当缩放画布然后平移时,现在如果我试图在画布内拖动对象,则无法拖动.但画布只是平移
When Zoomed the canvas and then pan, now if I am trying to drag the objects within canvas then not able to do so. But canvas is panning only
1)在不缩放的情况下,我可以平移画布并拖动图像。
2) 如果缩放,可以在画布内拖动图像。
3) 但是当我在缩放后平移画布时,如果我试图拖动图像,那么画布只是平移。无法拖动图像
在imagesHitTests(x,y)和imagesHitTtests2(x,y)中,我们发现了在主svg文件上绘制的图像的命中率。
有点panX和panY。我应该如何解决这个问题?
以下是我的代码:
var dataJSON = data || [];
var dataJSON2 = data2 || [];
window.onload = function(){
var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
var canvasOffset=$("#myCanvas").offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
var lastX=0;
var lastY=0;
var panX=0;
var panY=0;
var dragging=[];
var dragging2=[];
var isDown=false;
function loadImages(sources, callback){
var images = {};
var loadImages = 0;
var numImages = 0;
//get num of sources
for(var i in sources){
numImages++;
}
for(var i in sources){
images[i] = new Image();
images[i].onload = function(){
if(++loadImages >= numImages){
callback(images);
}
};
images[i].src = sources[i];
}
}
var sources = {darthVader : '/static/images/orange1.png', yoda : '/static/images/green1.png'};
// load the tiger svg file
var svgfiles = ["/static/images/awesome_tiger.svg"];
function draw(scaleValue){
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.save();
ctx.drawSvg(svgfiles[0],panX,panY,400*scaleValue, 400*scaleValue);
loadImages(sources, function(images){
ctx.scale(scaleValue, scaleValue);
for(var i = 0, pos; pos = dataJSON[i]; i++) {
ctx.drawImage(images.darthVader, parseInt(parseInt(pos.x) + parseInt(panX)), parseInt(parseInt(pos.y) + parseInt(panY)), 20/scaleValue, 20/scaleValue);
}
for(var i = 0, pos; pos = dataJSON2[i]; i++) {
ctx.drawImage(images.yoda, parseInt(parseInt(pos.x) + parseInt(panX)), parseInt(parseInt(pos.y) + parseInt(panY)), 20/scaleValue, 20/scaleValue);
}
ctx.restore();
});
};
var scaleValue = 1;
var scaleMultiplier = 0.8;
draw(scaleValue);
var startDragOffset = {};
var mouseDown = false;
// add button event listeners
document.getElementById("plus").addEventListener("click", function(){
scaleValue /= scaleMultiplier;
//checkboxZoomPan();
draw(scaleValue);
}, false);
document.getElementById("minus").addEventListener("click", function(){
scaleValue *= scaleMultiplier;
//checkboxZoomPan();
draw(scaleValue);
}, false);
document.getElementById("original_size").addEventListener("click", function(){
scaleValue = 1;
//checkboxZoomPan();
draw(scaleValue);
}, false);
// create an array of any "hit" colored-images
function imagesHitTests(x,y){
// adjust for panning
x-=panX;
y-=panY;
// create var to hold any hits
var hits=[];
// hit-test each image
// add hits to hits[]
loadImages(sources, function(images){
for(var i = 0, pos; pos = dataJSON[i]; i++) {
if(x >= parseInt(parseInt(pos.x) * scaleValue) && x <= parseInt(parseInt(pos.x) * scaleValue + parseInt(20)) && y >= parseInt(parseInt(pos.y) * scaleValue) && y <= parseInt(parseInt(pos.y) * scaleValue + parseInt(20))){
hits.push(i);
}
}
});
return(hits);
}
function imagesHitTests2(x,y){
// adjust for panning
x-=panX;
y-=panY;
// create var to hold any hits
var hits2=[];
// hit-test each image
// add hits to hits[]
loadImages(sources, function(images){
for(var i = 0, pos; pos = dataJSON2[i]; i++) {
if(x >= parseInt(parseInt(pos.x) * scaleValue) && x <= parseInt(parseInt(pos.x) * scaleValue + parseInt(20)) && y >= parseInt(parseInt(pos.y) * scaleValue) && y <= parseInt(parseInt(pos.y) * scaleValue + parseInt(20))){
hits2.push(i);
}
}
});
return(hits2);
}
function handleMouseDown(e){
// get mouse coordinates
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
// set the starting drag position
lastX=mouseX;
lastY=mouseY;
// test if we're over any of the images
dragging=imagesHitTests(mouseX,mouseY);
dragging2=imagesHitTests2(mouseX,mouseY);
// set the dragging flag
isDown=true;
}
function handleMouseUp(e){
// clear the dragging flag
isDown=false;
}
function handleMouseMove(e){
// if we're not dragging, exit
if(!isDown){
return;
}
//get mouse coordinates
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
// calc how much the mouse has moved since we were last here
var dx=mouseX-lastX;
var dy=mouseY-lastY;
// set the lastXY for next time we're here
lastX=mouseX;
lastY=mouseY;
// handle drags/pans
if(dragging.length>0){
// we're dragging images
// move all affected images by how much the mouse has moved
for(var i = 0, pos; pos = dataJSON[dragging[i]]; i++) {
pos.x = parseInt(pos.x) + parseInt(dx);
pos.y = parseInt(pos.y) + parseInt(dy);
}
}
else if(dragging2.length>0){
for(var i = 0, pos1; pos1 = dataJSON2[dragging2[i]]; i++) {
pos1.x = parseInt(pos1.x) + parseInt(dx);
pos1.y = parseInt(pos1.y) + parseInt(dy);
}
}
else{
// we're panning the tiger
// set the panXY by how much the mouse has moved
panX+=dx;
panY+=dy;
}
draw(scaleValue);
}
// use jQuery to handle mouse events
$("#myCanvas").mousedown(function(e){handleMouseDown(e);});
$("#myCanvas").mousemove(function(e){handleMouseMove(e);});
$("#myCanvas").mouseup(function(e){handleMouseUp(e);});
}
如果我理解正确,您必须更改标尺上图像的坐标和宽度''高度
你想做这样的事——http://drag.com.hostinghood.com/?
相关文章:
- 旋转后拖动对象
- Javascript拖动对象
- dropable的Over事件是't工作正常,在可拖动对象被拖放到贪婪的可拖动对象上并再次拖动后
- 如何在拖动对象时检测画布的中心线以使其居中
- 删除时禁用可拖动对象
- 拖放无法识别动画CC中拖动对象的子对象
- 防止可拖动对象被添加多次jQuery
- 还原可拖动对象
- 在放置之前找到拖动对象的位置
- Jquery UI:如何指示可拖动对象成功拖放到可排序对象上
- jquery UI 两个可拖动对象冲突
- 如何将可拖动对象移动到某个区域
- AngularJS指令拖动对象如何删除不需要的鼠标效果
- 用于 Web 浏览器上可拖动对象的 Javascript 框架
- 使用 HTML CSS 和 JS 拖动对象
- 原生HTML5拖放:使可拖动对象不可拖放
- jQuery UI:Y 鼠标在放置可拖动对象时坐标错误
- 如何在 Jquery 中初始化可拖放对象上的可拖动对象
- 如何在jqueryui中实现可拖动对象的堆叠属性
- 当缩放画布然后平移时,现在如果我试图在画布内拖动对象,则无法拖动.但画布只是平移