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(); 
    } 

基本上它会记录起点和距离（夹有多长），然后比例绘制，并且相应地设置的层位置。希望这可以帮助。