我想实现这里概述的这种效果:http: //www.html5canvastutorials.com/labs/html5-canvas-multi-touch-scale-stage-with-kineticjs/
但是在Layer
一个KineticJS
我已经让它在一定程度上工作(使用与链接中基本相同的代码),但似乎图层围绕 0,0 原点缩放,我看不到任何关于更改变换原点的文档?
如何有效地捏合和缩放 aLayer
使其围绕中心点缩放?
我想实现这里概述的这种效果:http: //www.html5canvastutorials.com/labs/html5-canvas-multi-touch-scale-stage-with-kineticjs/
但是在Layer
一个KineticJS
我已经让它在一定程度上工作(使用与链接中基本相同的代码),但似乎图层围绕 0,0 原点缩放,我看不到任何关于更改变换原点的文档?
如何有效地捏合和缩放 aLayer
使其围绕中心点缩放?
我为这种行为制作了一个插件: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();
}
基本上它会记录起点和距离(捏的长度),然后相应地缩放和设置图层位置。希望这可以帮助。