0

我使用 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, 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, y, 0, 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, y, 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 时，拖动不起作用。

4

0 回答 0