javascript - zoom canvas not working for clip area -
i using following code zoom in , zoom out effect. problem performing clip[suppose clip circle stroke colour] on canvas , doing zoomin. happened elements zoomed, clip area not zoomed. how can make clip area zoom?
clip method ::
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); };
zoom method ::
// zoom in function zoomin() { // todo limit 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(); (var 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(); (var 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; }
use canvas.zoomtopoint(point,zoomfactor);
Comments
Post a Comment