拖动物体的时候，防止鼠标按下的时候对象突然跳动一下

拖动物体的时候，防止鼠标按下的时候对象突然跳动一下

$(function() {
    init();
});
// mouse interaction drag
// 拖动物体的时候，防止鼠标按下的时候对象突然跳动一下；

var stage, output;
var diff={}; // 偏移量；

function init(e) {
    stage = new createjs.Stage('demo1');
    
    stage.mouseMoveOutside = true;
    
    var circle = new createjs.Shape();
    circle.graphics.beginFill('red').drawCircle(0,0,50);
    
    var label = new createjs.Text('drag me','bold 14px Arial','#ffffff');
    label.textAlign = 'center';
    label.y = -7;
    
    var dragger = new createjs.Container();
    dragger.x = dragger.y = 100;
    dragger.addChild(circle, label);
    stage.addChild(dragger);
    
    dragger.on('pressmove',function(evt){
        evt.currentTarget.x = evt.stageX-diff.x;
        evt.currentTarget.y = evt.stageY-diff.y;
        
        stage.update();
    });
    
    dragger.on('mousedown',function(evt){
        // plan1
//        diff = dragger.globalToLocal( evt.stageX,evt.stageY);
//        console.log(diff);
        // plan2
        diff.x = evt.stageX-evt.currentTarget.x;
        diff.y = evt.stageY-evt.currentTarget.y;
        console.log(diff);
    });
    
    stage.update();
}

其实，可以设置这样的属性：offset.x, offset.y

$(function() {
    init();
});
// DragAndDrop

var canvas, stage;

var mouseTarget;
var dragStarted;
var offset;
var update = true;

function init(e) {
    
    canvas = document.getElementById('demo1');
    
    stage = new createjs.Stage(canvas);
    
    createjs.Touch.enable(stage);
    
    stage.enableMouseOver(10);
    stage.mouseMoveOutside = true;
    
    var image = new Image();
    image.src = "assets/daisy.png";
    image.onload = handleImageLoad;
}

function stop(e) {
    createjs.Ticker.removeEventListener("tick",tick);
}

function handleImageLoad(event) {
    var image = event.target;
    var bitmap;
    var container = new createjs.Container();
    stage.addChild(container);
    
    for(var i=0;i<100;i++){
        bitmap = new createjs.Bitmap(image);
        container.addChild(bitmap);
        bitmap.x = canvas.width*Math.random()|0;
        bitmap.y = canvas.height*Math.random()|0;
        bitmap.rotation = 360 * Math.random()|0;
        bitmap.regX = bitmap.image.width/2|0; // regX干什么用的？ 
        bitmap.regY = bitmap.image.height/2|0;
        bitmap.scaleX = bitmap.scaleY = bitmap.scale = Math.random()*0.4+0.6;
        bitmap.name = "bmp_"+i;
        bitmap.cursor = "pointer";
        
        bitmap.on("mousedown",function(evt){
            this.parent.addChild(this);
            this.offset = {x:this.x-evt.stageX,y:this.y-evt.stageY};
        });
        
        bitmap.on("pressmove",function(evt){
            this.x = evt.stageX + this.offset.x; // this.offset.x 干什么用的？是为了防止图片中心突然跳动到鼠标位置的；
            this.y = evt.stageY + this.offset.y;
            
            update = true;
        });
        
        bitmap.on("rollover",function(evt){
            this.scaleX = this.scaleY = this.scale*1.2;
            update = true;
        });
        
        bitmap.on("rollout",function(evt){
            this.scaleX = this.scaleY = this.scale;
            update = true;
        });
    }
    
    createjs.Ticker.addEventListener("tick",tick);
    
}

function tick(event) {
    if(update){
        update = false;
        stage.update(event);
    }
}

 

转载于:https://www.cnblogs.com/stono/p/5653099.html