KineticJS 和捏和缩放

Posted 2023-03-05

【中文标题】KineticJS 和捏和缩放

【英文标题】：KineticJS and pinch and zoom

【发布时间】：2013-05-31 14:12:40

【问题描述】：

我想实现这里概述的这种效果：http://www.html5canvastutorials.com/labs/html5-canvas-multi-touch-scale-stage-with-kineticjs/

但是在Layer 中KineticJS

我已经让它在一定程度上工作（使用与链接中基本相同的代码），但似乎图层围绕 0,0 原点缩放，我看不到任何关于更改变换原点的文档？

如何有效地捏合和缩放 Layer 以使其围绕中心点缩放？

【参考方案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();
     

基本上它会记录起点和距离（捏的长度），然后相应地缩放和设置图层位置。希望这会有所帮助。