官方文檔說regX和regY是圖形與註冊點的距離。
那麼註冊點是什麼呢？
- 我理解註冊點就是圖形的x/y對應的點
- 圖形動效的原點就是註冊點
如果修改圖形的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 = 100
shape.y = 100
stage.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 = 100
shape.y = 100
stage.addChild(shape)
stage.update()
// 動起來流暢點
createjs.Ticker.setFPS(60)
createjs.Ticker.addEventListener('tick', () => {
shape.rotation += 1
stage.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 = 100
shape.y = 100
// 修改regX regY屬性改變正方形位置
shape.regX = 50
shape.regY = 50
stage.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 = 100
shape.y = 100
// 修改regX regY屬性改變正方形位置
shape.regX = 50
shape.regY = 50
stage.addChild(shape)
stage.update()
// 動起來流暢點
createjs.Ticker.setFPS(60)
createjs.Ticker.addEventListener('tick', () => {
shape.rotation += 1
stage.update()
})
}
</script>
</body>
從下面的動圖中可以看出來，動畫的原點還是在(100, 100)這個位置，註冊點並沒有改變。
注：所以註冊點並不總是和圖形左上角重疊