KineticJS和捏和縮放

Question

我想實現這樣的效果這裏概述：http://www.html5canvastutorials.com/labs/html5-canvas-multi-touch-scale-stage-with-kineticjs/

但在Layer在KineticJS

我已經得到它的工作在一定程度上（使用基本相同的代碼作爲鏈接），但似乎圖層圍繞着0,0原點，並且我看不到有關更改轉換原點的任何doco？

我怎樣纔能有效地捏和放大Layer，使它圍繞它的中心點縮放？

Answer 1

我做了一個插件，這種行爲：https://github.com/eduplus/pinchlayer

這可能是一點點現在最近的變化已經過時，但在layerTouchMove功能的邏輯是最有可能的還是聲音。這裏：

var touch1 = event.touches[0]; 
var touch2 = event.touches[1]; 

if (touch1 && touch2) { 
self.setDraggable(false); 
if (self.trans != undefined) { self.trans.stop(); } 
    if (self.startDistance === undefined) { 
     self.startDistance = self.getDistance(touch1, touch2); 
     self.touchPosition.x = (touch1.clientX + touch2.clientX)/2; 
     self.touchPosition.y = (touch1.clientY + touch2.clientY)/2; 
     self.layerPosition.x = (Math.abs(self.getX()) + self.touchPosition.x)/self.startScale; 
     self.layerPosition.y = (Math.abs(self.getY()) + self.touchPosition.y)/self.startScale; 
    } 
    else { 
     var dist = self.getDistance(touch1, touch2); 
     var scale = (dist/self.startDistance) * self.startScale; 
     if (scale < self.minScale) { scale = self.minScale; } 
     if (scale > self.maxScale) { scale = self.maxScale; } 
     self.setScale(scale, scale); 
     var x = (self.layerPosition.x * scale) - self.touchPosition.x; 
     var y = (self.layerPosition.y * scale) - self.touchPosition.y; 
     var pos = self.checkBounds({ x: -x, y: -y }); 
     self.setPosition(pos.x, pos.y); 
     self.draw(); 
    } 

基本上它會記錄起點和距離（夾有多長），然後比例繪製，並且相應地設置的層位置。希望這可以幫助。