createjs中shape的属性regX和regY
生活随笔
收集整理的這篇文章主要介紹了
createjs中shape的属性regX和regY
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
官方文檔說regX和regY是圖形與注冊點的距離。
那么注冊點是什么呢？
如果修改圖形的regX和regY值圖形在畫布上的位置是會被改變的，但是注冊點其實并沒有被改變。因為圖形的x/y值并沒有被改變。注冊點如果是(100, 100)修改regX/regY之后，注冊點還是(100, 100)。
示例
繪制一個正方形寬高都是100。然后設置這個正方形的(x, y)為(100, 100)。
<body onload="init();"><canvas id="game" width="500" height="700" style="background-color: black"></canvas> </body><script type="text/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 onload="init();"><canvas id="game" width="500" height="700" style="background-color: black"></canvas> </body><script type="text/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 onload="init();"><canvas id="game" width="500" height="700" style="background-color: black"></canvas> </body><script type="text/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 onload="init();"><canvas id="game" width="500" height="700" style="background-color: black"></canvas> </body><script type="text/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詳解
總結
以上是生活随笔為你收集整理的createjs中shape的属性regX和regY的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 开发流程补全
- 下一篇： 修改webpack的publicPath