Scaling with canvas - with fabricjs and angularjs
I am trying to enlarge an image on a canvas using FabricJs . but I have no idea about that.
And I also searched for some codes from google. But it doesn't work. either of them is not writing an article for being able to scale using fabric.
Please if you have any idea about this. please let me know.......
I tried this
....
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")
}
});
....
This is just a sample code. I cannot fit all my code. bcs that's very big code .. Please provide a sample for me ..
Thank!!
I downloaded the latest version: https://github.com/kangax/fabric.js/tags
But doesn't work. :(
+3
user3559224
source
to share
2 answers
I have changed a bit and it works
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);
});
+4
source to share
You need a custom build with a gesture module: http://fabricjs.com/build/
When using this, you should trigger gesture events.
+1
source to share