阻力制約和放大

我已經沒有問題，使用PAN掌握Raphael.js 2.0基本縮放/平移效果：阻力制約和放大

set = (// set of elements, contained in a rectangle) 
var start = function() { 
     set.oBB = set.getBBox(); 
}, 
move = function (dx, dy) { 
     var bb = set.getBBox(); 
       set.translate(set.oBB.x - bb.x + dx, set.oBB.y - bb.y + dy); 
}, 
up = function() { // do stuff }; 
set.drag(move, start, up);

和ZOOM：

//before 
paper.setViewBox(0,0, 500,500, false); 
//after 
paper.setViewBox(0,0, 200, 200, false);

BUT我遇到了兩個很大的問題。這是一個拉斐爾創建SVG對象，而不是針對圖像...

首先，平移縮放後沒有「平滑」：我拖了一點，矩形移動了不少。我走得越遠，運動越糟糕。當我縮放時，可以以某種方式縮放拖動嗎？
其次，我該如何安排，以便平移放大的矩形不會讓我將其移出視口？ jQuery中我可以約束做到這一點，我已經試圖與set.translate功能打以上，包括約束，但是我得到無處...

任何意見，將不勝感激，要不然圖書館已經存在這樣做在Raphael.js？我看着raphael-spz，這似乎並沒有解決我上面的任何一個問題。

我想要的是基本上這http://dannyvankooten.com/demo/draggable-image-map-with-zoom/，但拉斐爾。他正在使用jQuery UI拖拽......我似乎無法在Raphael上班。

謝謝！

來源

2012-06-04 Petrov

因爲你已經縮放視框，你可能需要縮放拖動值以及，來回計算界限，你可以只是比較對視，像，

move = function (dx, dy) { 
     var bb = set.getBBox(), 
      //Move relative to viewport scale 
      x = dx/scale, 
      y = dy/scale, 
      //Lower bounds 
      xf = Math.max(0, set.oBB.x - bb.x + x), 
      yf = Math.max(0, set.oBB.y - bb.y + y); 
     //upper bounds 
     xf = Math.min(viewBoxWidth, xf + bb.width) - bb.width; 
     yf = Math.min(viewBoxHeight, yf + bb.height) - bb.height; 

     set.translate(xf, yf); 
}

scale是你的視框的因素與你的論文不同。即（200/500)

來源

2012-06-04 19:22:05 Andrew

謝謝@安德魯 - 很好地工作，但與500/200而不是200/500;）我的問題的第二部分的任何想法？ – Petrov

@Petrov有可能是一個更簡單的方法，但我更新了最直接的。 – Andrew

感謝@Andrew的更新，但這是我遇到的同樣的問題 - 平移正面（x或y），然後平移負面（x或y）是不可能的，並且還會導致下一次點擊 - 這裏是一個演示http://jsfiddle.net/TZusb/ – Petrov

阻力制約和放大

回答

相關問題