canvas - 使用fabricjs和angularjs进行捏缩放
Posted
技术标签:
【中文标题】canvas - 使用fabricjs和angularjs进行捏缩放【英文标题】:canvas - pinch zooming using by fabricjs and 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
但不工作。 :(
【问题讨论】:
你的事件触发了吗? 【参考方案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/
当使用这个时,手势事件应该被触发。
【讨论】:
以上是关于canvas - 使用fabricjs和angularjs进行捏缩放的主要内容,如果未能解决你的问题,请参考以下文章
FabricJS 防止 canvas.clipTo 剪切 canvas.backgroundImage