HTML5 Canvas - 在rescale上拖放坐标

时间:2016-09-02 08:35:08

标签: javascript jquery html5 canvas

//VARIABLES
//Drag Object Size
dragRadius = 100;
//Destination Size
destHeight = 434;
destWidth = 220;


var RosieDrag = new lib.RosieDrag();


//Drag Object Creation
//Placed inside a container to hold both label and shape

var test = new lib.test();
stage.addChild(test);
test.x = 525;
test.y = 1035;
var dragger = new createjs.Container();
dragger.x = 250;
dragger.y = 460;
dragger.addChild(RosieDrag);
dragger.setBounds(100, 100, dragRadius*2, dragRadius*2);
//DragRadius * 2 because 2*r = width of the bounding box



var RosieDrop = new lib.RosieDrop();
var destination = new createjs.Container();
destination.x = 900;
destination.y = 240;
destination.setBounds(950, 350, 100, 100);

destination.addChild(RosieDrop);

//DRAG FUNCTIONALITY =====================
dragger.on("pressmove", function(evt){
     evt.currentTarget.x = evt.stageX;
    evt.currentTarget.y = evt.stageY;
     stage.update(); //much smoother because it refreshes the screen every pixel movement instead of the FPS set on the Ticker
     if(intersect(evt.currentTarget, destination)){
       evt.currentTarget.alpha=0.2;
       
     }else{
       evt.currentTarget.alpha=1;
            }

});

//Mouse UP and SNAP====================
dragger.on("pressup", function(evt) {
  if(intersect(evt.currentTarget, destination)){
	 test.gotoAndPlay(5); 
    dragger.x = destination.x + destWidth/2;
    dragger.y = destination.y + destHeight/2;
    dragger.alpha = 1;
     stage.update(evt);
	  }
});
//Tests if two objects are intersecting
//Sees if obj1 passes through the first and last line of its
//bounding box in the x and y sectors
//Utilizes globalToLocal to get the x and y of obj1 in relation
//to obj2
//PRE: Must have bounds set for each object
//Post: Returns true or false
function intersect(obj1, obj2){
  var objBounds1 = obj1.getBounds().clone();
  var objBounds2 = obj2.getBounds().clone();

  var pt = obj1.globalToLocal(objBounds2.x, objBounds2.y);
  
  var h1 = -(objBounds1.height / 2 + objBounds2.height);
  var h2 = objBounds2.width / 2;
  var w1 = -(objBounds1.width / 2 + objBounds2.width);
  var w2 = objBounds2.width / 2;
 
  
  if(pt.x > w2 || pt.x < w1) return false;
  if(pt.y > h2 || pt.y < h1) return false;
  
  return true;
}


//Adds the object into stage
stage.addChild(destination, dragger);
stage.mouseMoveOutside = true;
stage.update();

您好,

我在画布上做了一个简单的拖放操作。它工作正常但是当画布调整到窗口时它会改变拾取对象时的位置以及掉落区域的位置(有趣的是它仍然会将东西绘制在正确的位置并将对象置于正确的位置后丢弃。

我确定我错过了一些简单的东西,这是我的代码:

0 个答案:

没有答案