深圳网站建设新闻,网站建设营销的企业,合肥最新消息今天,wordpress菜单设计官方文档说regX和regY是图形与注册点的距离。
那么注册点是什么呢#xff1f;
我理解注册点就是图形的x/y对应的点图形动效的原点就是注册点
如果修改图形的regX和regY值图形在画布上的位置是会被改变的#xff0c;但是注册点其实并没有被改变。因为图形的x/y值并没有被改…官方文档说regX和regY是图形与注册点的距离。
那么注册点是什么呢
我理解注册点就是图形的x/y对应的点图形动效的原点就是注册点
如果修改图形的regX和regY值图形在画布上的位置是会被改变的但是注册点其实并没有被改变。因为图形的x/y值并没有被改变。注册点如果是(100, 100)修改regX/regY之后注册点还是(100, 100)。
示例
绘制一个正方形宽高都是100。然后设置这个正方形的(x, y)为(100, 100)。
body onloadinit();canvas idgame width500 height700 stylebackground-color: black/canvas
/bodyscript typetext/javascript
function init() {let stage new createjs.Stage(game)let shape new createjs.Shape()shape.graphics.beginFill(red).drawRect(0, 0, 100, 100)shape.x 100shape.y 100stage.addChild(shape)stage.update()
}
/script
/body对于这个正方形来说注册点就在(100, 100)这个位置。这个位置是相对于正方形的父元素的这个例子中父元素是stage。如果相对于形状左上角的话注册点的坐标就是(0, 0)。
让图形动起来
body
script src../../EaselJS-1.0.0/lib/easeljs.js/script
body onloadinit();canvas idgame width500 height700 stylebackground-color: black/canvas
/bodyscript typetext/javascript
function init() {let stage new createjs.Stage(game)let shape new createjs.Shape()shape.graphics.beginFill(red).drawRect(0, 0, 100, 100)shape.x 100shape.y 100stage.addChild(shape)stage.update()// 动起来流畅点createjs.Ticker.setFPS(60)createjs.Ticker.addEventListener(tick, () {shape.rotation 1stage.update()})
}
/script
/body从动图中可看到动画的原点是图形的左上角也就是图形的注册点位置(100, 100)这个点。
修改regX和regY属性
body
script src../../EaselJS-1.0.0/lib/easeljs.js/script
body onloadinit();canvas idgame width500 height700 stylebackground-color: black/canvas
/bodyscript typetext/javascript
function init() {let stage new createjs.Stage(game)let shape new createjs.Shape()shape.graphics.beginFill(red).drawRect(0, 0, 100, 100)shape.x 100shape.y 100// 修改regX regY属性改变正方形位置shape.regX 50shape.regY 50stage.addChild(shape)stage.update()
}
/script
/body修改属性regX和regY之后图形的位置发生了变化相比于上面的图片图形更加靠近stage的左上角。这时候图形距离stage的距离应该是(50, 50)但是图形的注册点还是(100, 100)并没有被regX和regY的值改变。 让图形动起来
body
script src../../EaselJS-1.0.0/lib/easeljs.js/script
body onloadinit();canvas idgame width500 height700 stylebackground-color: black/canvas
/bodyscript typetext/javascript
function init() {let stage new createjs.Stage(game)let shape new createjs.Shape()shape.graphics.beginFill(red).drawRect(0, 0, 100, 100)shape.x 100shape.y 100// 修改regX regY属性改变正方形位置shape.regX 50shape.regY 50stage.addChild(shape)stage.update()// 动起来流畅点createjs.Ticker.setFPS(60)createjs.Ticker.addEventListener(tick, () {shape.rotation 1stage.update()})
}
/script
/body从下面的动图中可以看出来动画的原点还是在(100, 100)这个位置注册点并没有改变。 注所以注册点并不总是和图形左上角重叠
参考
Shape Class
Easeljs之regX/regY详解
