首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Golang语言情怀--第113期 全栈小游戏开发:第4节:坐标系和节点变换属性

本地坐标系(Local Coordinate) 本地坐标系也叫相对坐标系,是和节点相关联的坐标系。每个节点都有独立的坐标系,当节点移动或改变方向时,和该节点关联的坐标系将随之移动或改变方向。...位置(Position) 位置(Position) 由 X、Y 和 Z 属性组成,分别规定了节点在当前坐标系 x 轴、y 轴和 z 轴上的坐标,默认为 (0, 0, 0)。...如果父节点 NodeA 改变 Position,子节点 NodeB 也会跟着改变位置(世界坐标系),但是子节点 NodeB 的 Position 属性不会发生变化,因为子节点 NodeB 在以父节点 NodeA...当改变 X 属性时,表示节点会以 x 轴为中心进行逆时针/顺时针旋转,以此类推,改变 Y 或者 Z 属性时也是一样的。 当属性值为 正 时,节点 逆时针 旋转。...缩放(Scale) 缩放(Scale) 属性也是由 X、Y 和 Z 三个属性组成,分别表示节点在 x 轴、y 轴和 z 轴上的缩放倍率,默认为 (1, 1, 1)。

26530

2D变形(CSS3) transform

x, y) 1. 2D移动是2D转换里面的 一种功能,可以改变元素在页面中的位置,类似定位 translate 移动平移的意思 translate(50px,50px); 使用translate方法来将文字或图像在水平方向和垂直方向上分别垂直移动...可以改变元素的位置,x、y可为负值; ranslate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动) translateX(x)仅水平方向移动(X轴移动) translateY(Y...)仅垂直方向移动(Y轴移动) 2.重点 定义2D转换中的移动,沿X轴和Y轴移动元素 translate最大的优点:不会影响到其他元素的位置 translate中的百分比单位是相对自身元素的...注意单位是 deg 度数 重点 rotate里面跟度数,单位是deg 比如rotate(45deg) 角度为正值时,顺时针,负值时为逆时针 默认旋转中心点是元素中心点 transform-origin...(先旋转会改变坐标轴方向) 当我们同时又位移和其他属性时,记得将位移放到最前面

88730
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    高仿剪映视频多轨剪辑页实现

    视频轨道用于显示轨道在时间轴上的长度、以及轨道信息,同时视频轨道会显示对应时间的帧图像,而音频轨道则会显示波形图。...时间游标会固定在整个View的中间位置,虽然叫它游标,但实际上并不会移动,只能通过移动时间轴和视频轨道来表示当前的时间位置。...AlTrackView负责组织时间轴和各个视频轨道的布局,同时响应缩放手势,实时改变子View的长度。...当通过缩放手势放大时间轴,刻度间距由小到大变化,直到Space>MaxSpace时,根据View的宽度、刻度宽度以及Space与MinSpace、MaxSpace的关系重新生成新的刻度,并覆盖保存到数组...同理,当通过缩放手势放大时间轴,直到Space时,重新计算刻度数组。

    1.6K20

    三维数学(2)-三角函数

    角的度量方式 角度Degree与弧度Radian 两条射线从圆心向圆周射出,形成一个夹角和夹角正对的一段弧。当弧长等于圆周长的360分之一时,夹角为一度。弧长等于圆的半径时,夹角为1弧度。...(float radian) Mathf.Atan(float radian) 实例 在unity3d中画出cube北偏西30度,距离10的坐标v 根据三角函数求出坐标v相对于cube在z轴和x轴的偏移量...,然后用在cube坐标的基础上,x加上x轴偏移量,z加上z轴偏移量得出的坐标就是v坐标了。...但是这样求得的坐标,当cube旋转时v坐标是不会变的,如果需要让v坐标会随着cube的旋转而改变,可以用cube.transform.transformPoint(x偏移量,0,z偏移量)将v相对cube...的坐标转为世界坐标,这样当cube旋转时,v的坐标也会跟着旋转了。

    1.2K20

    css笔记 - transform学习笔记(二)

    原理是:改变元素的尺寸、形状、角度、位置等 js写法: object.style.transform="rotate(7deg)"; transform-origin 设置元素的基点位置 该元素允许改变被转换元素的位置...方法可能的配置 skew:翻转给定的角度,xdeg水平翻转度数,ydeg垂直翻转度数。...再者,当数值是大于0的值时,就是放大。当数值在0-1之间的时候,就是缩小。所以 放大还是缩小看的是数值的关系,和正负没有关系。 数值为0就是原来的宽高*0时就看不见了。...(x,y):相对于当前位置向水平(x)/垂直(y)方向移动,正值向右/下,负值向左/上 D name 含义 中心点 备注 2 translate(x,y) 2d两点位移 默认中心点就是盒模型的中心点...x-axis 定义该视图在x轴上的位置、 y-axis 定义该视图在y轴上的位置 perspective-visibility 定义元素在不面对屏幕时是否可见 混合写法 多个属性值之间用逗号隔开即可。

    1.7K10

    CSS3 transform 2D转换之移动 旋转 缩放(详细讲解看完就会)

    ) 位移 translate 移动元素位置的方法,再2D平面中进行移动,有两个值,第一个值是x轴移动,第二个值是y轴移动,正数向右向下移动,负数向左向上移动。...2.translate的移动是相对于自身移动的,类似定位中的relative。 3.translate不会脱离标准流,并且不会影响其他元素的位置。...,移动后原来位置的占有并不会消失,所以不会影响其他元素,同样都是没有脱离标准流。...不同是相对定位的百分比值不是根据自己计算的而是根据父级计算的 旋转 rotate transform: rotate(度数) 度数是正数时顺时针旋转,负数时逆时针旋转,单位是deg,默认的中心点是元素本身的中心点...(比如先旋转会改变坐标轴方向所以要先位移)

    1.3K20

    FPS游戏:实现GDI方框透视「建议收藏」

    如上图:由于(X,Y)(黑色)是已知条件,我们可以通过X比Y求反正切,即可得到a角的度数,然后与90度相加,即可求出敌人当前坐标位置与X轴之间的夹角度数。...第三四象限: 敌人在第三与第四象限与上图差不多,最终目的就是求敌人的位置与X轴之间的夹角,第三象限应该加180度,第四象限加上270度数。这里就不罗嗦了,很简单的东西。...另外4种特殊情况: 如果敌人在第一象限且与X轴重合,那么敌人与X轴为之间的夹角度数必然为零度,同理如果与Y轴重合的话,那么X轴与敌人之间的夹角度数为90度,以此类推就是这四种特殊情况。...如上图:我们的目标是求鼠标角度与敌人之间的夹角度数,而此时的鼠标指向第一象限,而敌人却在第四象限上,我们用360度减去e角度(e = 敌人坐标与x轴之间的夹角度数),即可得到K角度,用K角度加上M角度,...如上图:摄像机与屏幕之间的夹角统称为视场角,游戏中的准星位置到屏幕的边缘是FOV的一半,以屏幕分辨率1024×768为例,当FOV为90度时,则准心与屏幕的垂线构成45度等腰直角三角形,此时的摄像机到屏幕的距离就是一半屏幕长度

    5.3K32

    自定义View(一)-动画- XML生成View动画

    百分数、百分数p 三种样式,比如 50、50%、50%p,当为数值时,表示在当前View的左上角,即原点处加上50px,做为起始缩放点;如果是50%,表示在当前控件的左上角加上自己宽度的50%做为起始点...那么起始点就为B点(50,50) 当我们设置起始点的坐标为50%,50%时,是指X,Y轴的距离是当前控件基于A点的50%,也就是D点控件的中心点。...那么屏幕的重点是C,那么它离X,Y轴的距离为X,Y,那么此时的开始点就是A(0,0)点加上X,Y就是F(X,Y)点,此时F点为动画起始点。...translatel.gif rotate-旋转变化 android:fromDegrees 开始旋转的角度位置,正值代表顺时针方向度数,负值代码逆时针方向度数 android:toDegrees 结束时旋转到的角度位置,正值代表顺时针方向度数,负值代码逆时针方向度数 android:pivotX 缩放起点X轴坐标,可以是数值、百分数、百分数

    86110

    设备方向事件与设备运动事件以及简单的摇一摇实现

    设备方向事件 当设备的物理方向改变(如果用户倾斜或旋转设备)且改变幅度大于等于 0.01 度时,触发 DeviceOrientationEvent 对象。...这些(X、Y 和 Z)轴分别对应于 三个主要的属性: alpha: 在围绕 z 轴旋转时(即左右旋转时),y 轴的度数差。 beta: 在围绕 x 轴旋转时(即前后旋转时),z 轴的度数差。...gamma: 在围绕 y 轴旋转时(即扭转设备时),z 轴的度数差。 以下代码显示如何使用 deviceorientation 事件指导用户使其设备指向北方。 <!...设备运动事件 当移动或旋转(或者更精确地说是加速)设备时,会触发 DeviceMotionEvent 对象,并在 x、y 和 z 轴中提供 acceleration data(重力加速度对设备造成的 with...旋转遵循右手规则,这样,当顺着轴正向观察时,围绕该轴所做的正向旋转为顺时针旋转。 以下示例演示如何使用 ondevicemotion 事件检测和报告高于指定阈值的所有设备运动。 <!

    1K50

    HTML5 Canvas开发详解(5) -- 动画

    监听鼠标位置: 每个鼠标事件都有两个用于确定鼠标当前位置的属性:pageX和pageY(存在兼容性,可以使用clientX和clientY属性替代)。...Math.atan()来求出两个直角边对应的夹角的度数,但是可能会出现有一个度数对应两个夹角的情况: 在Canvas中,我们可以使用反正切函数 Math.atan2() 来求出两个直角边对应的夹角的度数...(angle) * radiusY; 3)波形运动 在Canvas中,根据sin函数作用对象的不同,常见的波形运动有: ① 作用于x轴坐标 当正弦函数sin作用于物体中心的x轴坐标时,物体会进行左右摇摆...② 作用于y轴坐标 当正弦函数sin作用于物体中心的y轴坐标时,物体运动的轨迹刚好就是sin函数的波形。...ball.draw(cxt, 'fill'); vx *= friction; vy *= friction; })() } } 当物体沿任意方向运动时

    2K30

    今日份分享:Flutter自定义之旋转木马

    子布局如何旋转 所谓的旋转就是所有的子布局绕着圆形移动,布局一旦移动就代表中间位置改变,根据上面我们计算的子布局位置的公式来看: 中心点坐标 x=width/2+sin(a)*R y=height/2...子布局原始角度值: double angle = startAngle + averageAngle * i; 我们可以在此基础上加上一个可变的角度值,通过改变这个值,所有的子布局都会同时加上此值同时移动了位置...image.png 上图是X轴方向查看旋转切面图,按照x轴旋转所有的x坐标都是相同的,y值从上往下不断增加。...因为绕着X轴旋转时,X坐标是不变的,Y坐标值改变,当旋转了a角度时,现在的Y坐标如图所示为 Y坐标旋转后=height/2+y*cos(a) y值我们已经在上面计算过了,y=cos(a)*R...所以最终的计算公式是: Y坐标值=height/2+cos(a)*R*cos(a) cos(a)在a=[0,90]区间时对应的值是1-0 即是 a=0度时cos(a)=1,就是原始状态(与Y轴平行)

    1.2K20

    3D图形学线代基础

    坐标系 世界坐标系 在构建 3D 场景时我们需要一个坐标系来描述场景中所有点的坐标,这个坐标系也被称为世界坐标系;一般默认为你面朝计算机屏幕时,X 轴是水平的(正方向为右),Y 轴是垂直的(正方向为上)...首先旋转并不会改变向量的大小,因此 OA 向量和 OB 向量大小均为 L: ? 设 OA 和 X 轴之间的夹角为 α 那么: ? 再设 OB 和 X 轴之间的夹角为 β 那么: ?...图中 OA 以 OA 上的某点 C 为基准点顺时针旋转 α 得到 BD,此时这个旋转变换会改变坐标系的原点,因此不属于线性变换;而当 OA 以原点为基准点顺时针 β 得到 OE,此时原点并没有发生变换,...沿着 X 轴正方向平移并不会改变 Y 轴坐标,而 X 轴坐标系为原有坐标加上平移距离,因此得到 B 点坐标,如下: ? 代入矩阵乘法: ?...先把 A 点坐标转换为齐次坐标(x1,y1,1),沿着 X 轴正方向平移并不会改变 Y 轴坐标,而 X 轴坐标系为原有坐标加上平移距离,因此得到 B 点齐次坐标,如下: ?

    2.1K31

    在Hypermesh中使用Hyperbeam创建自定义梁截面

    本文以壳单元梁为例,选择shellsection子面板,在lines中选择用来创建梁截面的几何线,把section base node切换为shear center(剪切中心的概念是:当载荷作用线通过该点时梁截面不会发生扭转...选择Reorient选项卡,可以改变坐标原点位置及y轴角度,更改后右侧Data中的数据也会随之改变。...HyperMesh会根据用户选择的曲线或者节点路径自动确定一个定位方向,并将HyperBeam中截面的Y轴沿此方向排列。offsets下的6个文本框分别对应梁单元两个节点在全局坐标系下的偏置。...在直接使用两个节点创建梁单元时,hypermesh hyperbeam不仅可以指定梁单元的方向和偏置,和可以指定梁单元的平动和转动属性,如下图所示,创建面板中有pins a和pins b选项,“pin”...例如,对于沿X轴方向的转动(dof 4),当设定pins b=4时,从b点到其接触单元的不能平动,但1D单元可沿其X轴转动,但此转动不能传递到B点相邻的单元上。

    4.6K40

    【Android】属性动画(基本用法)

    缺点,视觉上 上变化,并不是真正的位置上的变化。 属性动画(Property) 控制属性来实现动画。 特点:最为强大的动画,弥补了补间动画的缺点,实现位置+视觉的变化。...translationX 这里的移动分为沿x、y轴移动,沿x轴时使用translationX,沿y轴移动使用translationY。...注: translationX:下个位置大于上个上个位置时,向右移动,反之向左移动; translationY:下个位置大于上个上个位置时,向下移动,反之向上移动。...2.4、缩放 例:在2s内,沿x轴放大成原来的两倍,然后缩小会原样。...例:在3s内,沿x、y轴同时放大,然后缩小,在缩放的同时还要改变透明度。然后再完成3s的左右移动。

    1.5K80

    CSS3 2D转换

    旋转:rotate 缩放:scale 1.1 二维坐标系 2D转换是改变标签在二维平面上的位置和形状的一种技术 ?...重点 1>定义 2D 转换中的移动,沿着 X 和 Y 轴移动元素 2>translate最大的优点:不会影响到其他元素的位置 3>translate中的百分比单位是相对于自身元素的 translate...x轴上移动位置 y 就是y轴上移动位置 中间用逗号分隔*/ /* transform: translate(x, y); */ /* transform:...重点   1>rotate里面跟度数, 单位是 deg 比如 rotate(45deg)   2>角度为正时,顺时针,负时,为逆时针   3>默认旋转的中心点是元素的中心点 案例 的效果。(先旋转会改变坐标轴方向) 3. 当我们同时有位移和其他属性的时候,记得要将位移放到最前

    44310

    iOS学习——核心动画之Layer基础

    UIImageView中是UIView的主layer上添加了一个次layer(用来绘制contents),我们设置边框的是主layer,但是次layer在上变,不会有任何的影响,所以当我们调用切割语句的时候...//旋转 x,y,z 分别代表x,y,z轴....当需要做一些快速缩放,平移,二维的旋转时用KVC。后面forKeyPath属性值不是乱写的,苹果文档当中给了相关的属性.      ...之所以能够显示在屏幕上,是试音UIView中有一个图层 在创建UIView的时候,系统会自动创建一个CALayer在其中,用于显示东西,可以通过view.layer来去获取图层属性 当UIView要去显示的时候...x轴中心,y轴最右端,该锚点的位置是时钟图片的正中心 layer.anchorPoint = CGPointMake(0.5, 1); layer.position = CGPointMake

    1.5K61
    领券