console 命令行工具 X clear

console

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 = 'http://www.clarksoncs.com/JavaScriptSamples/EaselJS/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;
  // 先进行x,y 移动，然后使用regX在移动元素，将regX元素对准原来位置的左上角原点，以实现原点更改
    rect.x = 250;		
    rect.y = 250;
    console.log(rect.regX + ';' + rect.regY);
    // rect.regX = img.width/2;		//move registration point to center of bitmap
    // rect.regY = img.height/2;
  console.log(rect.regX + ';' + rect.regY);
    
    stage.addChild(rect);		//add the Bitmap object to the stage
    
    createjs.Ticker.setFPS(30);		//set the Ticker frame rate
  stage.update();
    //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) {
    rect.rotation += 8;		//increments rotation by 8 degrees
    stage.update(event);	//update the stage
}
stage.update();
//samples list: http://www.clarksoncs.com/JavaScriptSamples/EaselJS/easelJsSamplesIndex.html

<body onLoad="init();">
    
    <!--add a canvas tag-->
    <canvas id="demoCanvas" width="2000" height="2000"></canvas>
    <p>easeIjs里面所有与位置有关的对象，基本参考系都是左上角！从这个例子可以很直观的看到，旋转原点始终在左上角，regX/X，这两个属性都会改变元素的位置，当我们改变x，y时，，元素左上角的旋转原点也是在变化的，反正原点相对于元素左上角，但是regX就不一样了，regX为正时，会使元素水平左移，就像移动元素的副本一样，原来的左上角的原点依然保留在原来的位置，并不随元素移动，这样就间接实现了定义旋转的原点，说实话，我觉得这个很麻烦，很蠢，开发者应该像css3一样直接定义一个transition-origin，而不是这样复杂的移动而且还容易出错。大概总结一下，想要旋转元素，首先通过x,y来移动元素，然后使用regX/regY来移动元素，把第二次移动regX想象成在copy原来元素一份，直接在原来位置上面移动，将regX移动的元素的中间对准原来元素位置的左上角，这样就实现了重新定义原点。</p>
</body>

* {
  margin: 0;
  padding: 0;
}

本项目引用的自定义外部资源

easeljs.min.js