Javascript KineticJS和收缩与缩放

我希望达到这里概述的效果：

但是在

KineticJS

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

---

如何有效地收缩和缩放

层

，使其围绕中心点缩放？

我为这种行为制作了一个插件：

随着最近的变化，它现在可能有点过时了，但是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();
     }

var touch1=event.touch[0]；
var touch2=event.touchs[1]；
如果（触摸1和触摸2）{
自我设置可拖动（错误）；
如果（self.trans！=未定义）{self.trans.stop（）；}
if（self.startDistance==未定义）{
self.startDistance=self.getDistance（触摸1，触摸2）；
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；
}
否则{
var dist=self.getDistance（触摸1，触摸2）；
变量标度=（dist/self.startDistance）*self.startScale；
如果（scaleself.maxScale）{scale=self.maxScale；}
自我设置刻度（刻度，刻度）；
VARx=（self.layerPosition.x*scale）-self.touchPosition.x；
变量y=（self.layerPosition.y*scale）-self.touchPosition.y；
var pos=自校验边界（{x:-x，y:-y}）；
自身设置位置（位置x、位置y）；
self.draw（）；
}

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