如何解决在 timmywil panzoom 库中禁用平移而不禁用拖动
我使用 panzoom 库 (https://timmywil.github.io/jquery.panzoom/) 来缩放使用 raphael.js 制作的地图
如果我使用 disablePan 选项,它也会禁用任何其他拖动事件。是否可以禁用库中的平移并允许其他拖动事件?
<body>
<div class="header">
<p id="demo"></p>
</div>
<div class="row">
<div id="map" class="column-left">
</div>
<div id="inner" class="column-right">
<div id="mapper">
</div>
</div>
</div>
</body>
//****************PAZ-ZOOM INITIALISATION*******************
/*
const elem = document.getElementById('map')
const panzoom = Panzoom(elem,{
maxScale: 5,disablePan: true
})
panzoom.setOptions({ cursor: 'default' });
panzoom.pan(10,10)
panzoom.zoom(1,{ animate: true })
elem.parentElement.addEventListener('wheel',panzoom.zoomWithWheel)
*/
//****************RAPHAEL INITIALISATION*********************
var paper = Raphael('map',700,800);
var mat = paper.rect(0,paper.width,paper.height).attr("fill","#FFF");
var circle = paper.circle(75,75,50);
var rect = paper.rect(150,150,50,50);
var set = paper.set();
set.push(circle,rect);
set.attr({
fill: 'red',stroke: 0
});
var box;
//set that will receive the selected items
var selections = paper.set();
//DRAG FUNCTIONS
//when mouse goes down over background,start drawing selection box
function dragstart (x,y,event) {
box = paper.rect(x,0).attr("stroke","#9999FF");
}
//when mouse moves during drag,adjust box. If to left or above original point,you have to translate the whole box and invert the dx or dy values since .rect() doesn't take negative width or height
function dragmove (dx,dy,x,event) {
var xoffset = 0,yoffset = 0;
if (dx < 0) {
xoffset = dx;
dx = -1 * dx;
}
if (dy < 0) {
yoffset = dy;
dy = -1 * dy;
}
box.transform("T" + xoffset + "," + yoffset);
box.attr("width",dx);
box.attr("height",dy);
}
function dragend (event) {
//get the bounds of the selections
var bounds = box.getBBox();
box.remove();
reset();
console.log(bounds);
for (var c in set.items) {
//here,we want to get the x,y vales of each object regardless of what sort of shape it is,but rect uses rx and ry,circle uses cx and cy,etc
//so we'll see if the bounding boxes intercept instead
var mybounds = set[c].getBBox();
//do bounding boxes overlap?
//is one of this object's x extremes between the selection's xextremes?
if (mybounds.x >= bounds.x && mybounds.x <= bounds.x2 || mybounds.x2 >= bounds.x && mybounds.x2 <= bounds.x2) {
//same for y
if (mybounds.y >= bounds.y && mybounds.y <= bounds.y2 || mybounds.y2 >= bounds.y && mybounds.y2 <= bounds.y2) {
selections.push(set[c]);
}
}
selections.attr("opacity",0.5);
}
}
function reset () {
//empty selections and reset opacity;
selections = paper.set();
set.attr("opacity",1);
}
mat.drag(dragmove,dragstart,dragend);
mat.click(function(e) {
reset();
});
启用 panzoom 后,拖动不起作用。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。