canvas - 使用fabricjs和angularjs进行捏缩放答案

【问题标题】：canvas - pinch zooming using by fabricjs and angularjscanvas - 使用fabricjs和angularjs进行捏缩放
【发布时间】：2014-11-02 15:05:13
【问题描述】：

我正在尝试使用 FabricJs 在画布上进行捏合缩放。但我对此一无所知。

我还从谷歌搜索了一些代码。但不行。任何人都不会写一篇关于使用织物进行缩放选项的文章。

如果您对此有任何想法，请告诉我。请告诉我.......

我试过了

....

canvas.on('touch:gesture', function (e) {
                isGestureEvent = true;
                // /* Just use the scale of the touch event to determine zoom in or zoom out. */
                var lPinchScale = e.self.scale;
                var type = e.e.type;
                if (type == "touchstart") {

                    //console.log("touchstart");
                    aGestureTouchStartTouches = e.e.touches;
                    aGestureScale.push(lPinchScale);
                    //console.log("scale:" + lPinchScale);

                } else if (type == "touchmove") {
                    console.log("touchmove");


                    //var modCheck = 5;
                    //if(aGestureScale.length % modCheck == 0) {

                    // canvasScale is current scale
                    // lPinchScale is what we want to set it to, relative to what it is now
                    // ie if canvasScale == 2.7
                    // var newScale = canvasScale * lPinchScale
                    // newScale is where we want canvasScale to end up
                    // 

                    // Get the last pinch scale;
                    var lastScale = aGestureScale[aGestureScale.length - 1];

                    // if scaleDiff negative then pinch in (zoom out), positive it is pinch out (zoom in)
                    var scaleDiff = lPinchScale - lastScale;
                    if (scaleDiff < 0) {

                        scaleDiff = lastScale - lPinchScale;
                        scaleDiff = 1 + scaleDiff;
                        fnZoomOutByFactor(scaleDiff);
                    }
                    else {

                        scaleDiff = 1 + scaleDiff;
                        fnZoomInByFactor(scaleDiff);
                    }

                    //console.log("scale:" + lPinchScale);
                    //}

                    // add new scale
                    aGestureScale.push(lPinchScale);

                } else {
                    console.log("gesture that is not move or start")
                }
            });

....

这就像一个示例代码。我不能把我的所有代码。 bcs 这是非常大的代码.. 请为我提供一些示例..

谢谢！！

我已经下载了最新版本：https://github.com/kangax/fabric.js/tags

但不工作。 :(

【问题讨论】：

你的事件触发了吗？

标签： javascript html angularjs canvas fabricjs

【解决方案1】：

我做了一点改动，它工作了

var canvas = new fabric.CanvasWithViewport('canvas');
canvas.on('touch:gesture',function(event){
    isGestureEvent = true;      
    var lPinchScale = event.self.scale;  
    var scaleDiff = (lPinchScale -1)/10 + 1;  // Slow down zoom speed    
    canvas.setZoom(canvas.viewport.zoom*scaleDiff);   

});

【讨论】：

【解决方案2】：

您需要使用手势模块进行自定义构建：http://fabricjs.com/build/

当使用这个时，手势事件应该被触发。

【讨论】：