javascript - KineticJS 以及捏合和缩放

标签 javascript html canvas kineticjs

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

但是在KineticJS中的Layer

我已经让它在一定程度上发挥作用(使用与链接中基本相同的代码),但似乎图层围绕 0,0 原点缩放,我看不到任何有关更改变换原点的 doco?

如何有效地捏合和缩放图层,使其围绕中心点缩放?

最佳答案

我为这种行为制作了一个插件: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();
     }

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

关于javascript - KineticJS 以及捏合和缩放,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16930422/

相关文章:

JavaScript/jQuery : Detect both return key press and submit button press simultaneously

css - 覆盖 Canvas "steals"上下文菜单

javascript - 在 Canvas 内绘制 div 元素

python - 在 tkinter GUI 中更新 matplotlib 图

javascript - 将 pagespeed 与 phantomjs 和 jenkins 集成结合使用

javascript - 在焦点上选择文本框,在模糊时取消选择

css - 容器 div 内的 3 div 不允许换行

javascript - 在 mustache.js 模板中做一个简单的计算

javascript - 将路由器与 Express 和 Node.js 结合使用

php - 如何向 PHP/HTML 选择/选项添加选项