EaselJS中的注册点是什么？

任何人都可以解释在EaselJS regX和regy的目的？它让我感到困惑。从技术上讲，此代码段：EaselJS中的注册点是什么？

var shape = new createjs.Shape(); 
shape.graphics.beginFill("blue").drawRect(centerX - SIZE/2, centerY - SIZE/2, SIZE, SIZE);

和此代码段：

var shape = new createjs.Shape(); 
shape.graphics.beginFill("blue").drawRect(centerX - SIZE/2, centerY - SIZE/2, SIZE, SIZE); 
shape.regX = SIZE/2; 
shape.regY = SIZE/2;

提供完全相同的结果。那么，regX/regY实际上是从形状x/y中减去它们的值？为了说明，centerX，centerY代表画布的中心，尺寸是代表形状大小的属性。

来源

2014-12-07 gdyrrahitis

您使用的示例是一个形状，它有一个单独的坐标系统，您可以绘制点。 regX/regY属性位于DisplayObject，因此它们适用于舞台上的所有对象。 Container也是如此，您可以在[50,50]处绘制元素，或在[0,0]处绘制元素，并抵消注册点。

从技术上讲，两种方法实现相同的结果（视觉上抵消内容），但两者有不同的目的。注册点可以在事后进行更改，并简单地偏移元素从中抽取的位置。

这对于像0,0处绘制的位图那样更明显。

来源

2014-12-08 17:36:13 Lanny

简单的回答：它们是替代x，y坐标。我知道的唯一用途是旋转位图。见示例here。

这里的样本代码：

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script asrc="http://code.createjs.com/easeljs-0.7.0.min.js"></script> 
 
<script> 
 
//this sample uses the timer to rotate a bitmap around its center 
 

 
var stage, rect, img; \t \t //declare global variables 
 

 
function init() { 
 
//this function is registered in the html body tag 
 

 
    stage = new createjs.Stage("demoCanvas"); \t //create a Stage object to work with the canvas element \t \t \t 
 
    
 
    img = new Image(); \t \t \t \t //create an Image object, then set its source property 
 
    img.src = 'green.jpg'; 
 
    
 
    img.onload = handleImageLoad; \t \t //register a handler for the onload event  
 
} 
 

 
function handleImageLoad(event) { 
 
//this function rus when the onload event completes 
 
    
 
    rect = new createjs.Bitmap(img); \t //create a Bitmap object, then set properties 
 
    rect.scaleX = .5; \t \t 
 
    rect.scaleY = .5; 
 
    rect.x = 250; \t \t 
 
    rect.y = 250; 
 
    
 
    rect.regX = img.width/2; \t \t //move registration point to center of bitmap 
 
    rect.regY = img.height/2; 
 
    
 
    stage.addChild(rect); \t \t //add the Bitmap object to the stage 
 
    
 
    createjs.Ticker.setFPS(30); \t \t //set the Ticker frame rate 
 
    createjs.Ticker.on("tick", tick); \t //add a Ticker event listener; 1st parameter specifies the event type, 
 
    \t \t \t \t \t //2nd parameter registers the function that is called when the event fires 
 
} 
 

 
function tick(event) { 
 
//this function is called when the tick event fires 
 

 
    rect.rotation += 8; \t \t //increments rotation by 8 degrees 
 
    stage.update(event); \t //update the stage 
 
} 
 

 
//samples list: http://www.clarksoncs.com/JavaScriptSamples/EaselJS/easelJsSamplesIndex.html 
 

 
</script> 
 
</head> 
 
<body onLoad="init();"> 
 
    
 
    <!--add a canvas tag--> 
 
    <canvas id="demoCanvas" width="2000" height="2000"></canvas> 
 
</body> 
 
</html>

来源

2014-12-21 18:29:45 user3076137

EaselJS中的注册点是什么？

回答

相关问题