better clip code for fabricjs

obj.clipTo = function (ctx) { ctx.save(); ctx.translate(0,0); ctx.rotate(motiv.getAngle()*-1/180*Math.PI); //ctx.scale(motiv.getScaleX(), motiv.getScaleX()); ctx.beginPath(); ctx.rect( (obj.getPointByOrigin(„center“, „center“).x-site.leftOffset-parseFloat(element.clipbox[0]))*-1/ obj.getScaleX(), (obj.getPointByOrigin(„center“, „center“).y-site.topOffset-parseFloat(element.clipbox[1]))*-1/ obj.getScaleX(), parseFloat(obj.clipBox[2])*obj.siteScale/ obj.getScaleX()+2, parseFloat(obj.clipBox[3])*obj.siteScale/ obj.getScaleX()+2 ); ctx.closePath(); ctx.restore(); }

clipbox based on paper cords for an image

fabric.util.loadImage(element.value, function (img) { var motiv = new fabric.Image(img, { left: (site.leftOffset+x*site.scale), top: (site.topOffset+y*site.scale), centeredRotating: true, id: element.id, selectable: selectable, angle: element.rotate, orgLeft: x, orgTop: y, pos: parseInt(element.pos, 10) }); motiv.scaleToWidth(width*site.scale); if(element.clipbox) { motiv.clipTo = function (ctx) { var $path = new fabric.Rect(); $path.set({ originX: ‚left‘, originY: ‚top‘, left: (site.leftOffset-motiv.getLeft()-(motiv.getWidth()/2)+parseFloat(element.clipbox[0])) / motiv.getScaleX(), top: (site.topOffset- motiv.getTop() […]