Databases
StackOverflow2013
Postsdbo
POzoom canvas not working for clip area
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POzoom canvas not working for clip area
    text
    copied!<p>I am using the following code for zoom in and zoom out effect. The problem is I am performing clip[suppose clip to circle with stroke colour] on canvas and then doing this zoomIn. What happened is all elements are zoomed, but clip area is not zoomed. How can I make clip area to zoom? </p> <p><strong>Clip Method ::</strong></p> <pre><code>canvas.clipTo = function(ctx) { var shp = new fabric.Rect({ top : top_Pos, left : left_Pos, width : c_width, height : c_height, fill:'', stroke : 'red', strokeWidth : 5 }); shp.render(ctx); }; </code></pre> <p><strong>Zoom method ::</strong></p> <pre><code>// Zoom In function zoomIn() { // TODO limit the max canvas zoom in console.log('zoom in called'); if (zoomEffect == false) { canvasScale = canvasScale * SCALE_FACTOR; canvas.setHeight(canvas.getHeight() * SCALE_FACTOR); canvas.setWidth(canvas.getWidth() * SCALE_FACTOR); var objects = canvas.getObjects(); for (var i in objects) { var scaleX = objects[i].scaleX; var scaleY = objects[i].scaleY; var left = objects[i].left; var top = objects[i].top; var tempScaleX = scaleX * SCALE_FACTOR; var tempScaleY = scaleY * SCALE_FACTOR; var tempLeft = left * SCALE_FACTOR; var tempTop = top * SCALE_FACTOR; objects[i].scaleX = tempScaleX; objects[i].scaleY = tempScaleY; objects[i].left = tempLeft; objects[i].top = tempTop; objects[i].setCoords(); } canvas.renderAll(); zoomEffect = true; } } // Zoom Out function zoomOut() { // TODO limit max cavas zoom out console.log('zoom out called'); if (zoomEffect == true) { canvasScale = canvasScale / SCALE_FACTOR; canvas.setHeight(canvas.getHeight() * (1 / SCALE_FACTOR)); canvas.setWidth(canvas.getWidth() * (1 / SCALE_FACTOR)); var objects = canvas.getObjects(); for (var i in objects) { var scaleX = objects[i].scaleX; var scaleY = objects[i].scaleY; var left = objects[i].left; var top = objects[i].top; var tempScaleX = scaleX * (1 / SCALE_FACTOR); var tempScaleY = scaleY * (1 / SCALE_FACTOR); var tempLeft = left * (1 / SCALE_FACTOR); var tempTop = top * (1 / SCALE_FACTOR); objects[i].scaleX = tempScaleX; objects[i].scaleY = tempScaleY; objects[i].left = tempLeft; objects[i].top = tempTop; objects[i].setCoords(); } } canvas.renderAll(); zoomEffect = false; } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload