我正在尝试使用 FabricJs 在 Canvas 上缩放。但我对此一无所知。
而且我还从谷歌搜索了一些代码。但不工作。任何人都不会为使用 fabric 的缩放选项写一篇文章。
请如果你对此有任何想法。请让我知道......
我试过了
....
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
但不工作。 :(
最佳答案
我稍微改变了一下，它起作用了
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);
});
关于javascript - canvas - 由 fabricjs 和 angularjs 使用捏缩放，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25740452/