[英]What is the registration point in EaselJS?
誰能解釋EaselJS中regX和regY的目的？ 這讓我感到困惑。 從技術上講，此代碼段：
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是表示畫布的中心，而size是表示形狀大小的屬性。
您使用的示例是Shape，它具有一個單獨的坐標系，可在上面繪制點。 regX / regY屬性位於DisplayObject ，因此它們適用於舞台上的所有對象。 對於容器也可以這樣說，您可以在[50,50]處繪制元素，或在[0,0]處繪制元素並偏移注冊點。
從技術上講，這兩種方法可以達到相同的結果（從視覺上抵消內容），但是兩者的目的不同。 可以事后更改注冊點，並且只需從元素所在位置偏移即可。
這對於以0,0繪制的位圖之類的東西來說更明顯。
簡單的答案：它們是替代的x，y坐標。 我知道的唯一用途是旋轉位圖。 在這里查看示例。
這是示例中的代碼：
<!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; //declare global variables function init() { //this function is registered in the html body tag stage = new createjs.Stage("demoCanvas"); //create a Stage object to work with the canvas element img = new Image(); //create an Image object, then set its source property img.src = 'green.jpg'; img.onload = handleImageLoad; //register a handler for the onload event } function handleImageLoad(event) { //this function rus when the onload event completes rect = new createjs.Bitmap(img); //create a Bitmap object, then set properties rect.scaleX = .5; rect.scaleY = .5; rect.x = 250; rect.y = 250; rect.regX = img.width/2; //move registration point to center of bitmap rect.regY = img.height/2; stage.addChild(rect); //add the Bitmap object to the stage createjs.Ticker.setFPS(30); //set the Ticker frame rate createjs.Ticker.on("tick", tick); //add a Ticker event listener; 1st parameter specifies the event type, //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; //increments rotation by 8 degrees stage.update(event); //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>
EaselJS，Canvas，Bitmap圖像質量低，注冊點不起作用
[英]EaselJS, Canvas, Bitmap image low quality and registration point not working
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.