Official documents say regX and regY graphics and distance to the registration point.
So what point is it registered?
- I understand that the registration point of the graphic x / y corresponding point
- Graphic dynamic efficiency is the registration point of origin
If you modify regX and regY value graphic graphics position on the canvas it will be changed, but the registration point of fact, has not been changed . Because the pattern is x / y value has not been changed. If the registration point is (100, 100) to modify regX / regY after, or registration point (100, 100).
Examples
Draw a square width and height is 100. This then set square (x, y) is (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>
For this square is on the registration point (100, 100) in this position. This position is relative to the square of the parent element, parent element in this example is a stage. If the coordinates relative to the registration point of the upper left corner, then the shape is (0, 0).
Let graphics move:
<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>
Driven animation can be seen in Fig origin is the top left corner of the graph is a graphical registration point (100, 100) at this point.
Modify regX and regY property
<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>
After modifying the properties regX graphics and regY position has changed, compared to the above pictures, graphics closer to the upper left corner of the stage. This time the distance from the stage of the graphics should be (50, 50), but the graphics or registration point (100, 100) has not been regX and value changes of regY.
Let graphics move:
<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>
It can be seen from FIG moving below, the animation or the origin (100, 100) in this position, and does not change the registration point.
Note: The registration point is not always so and graphics overlap the upper left corner
reference
