Philipp Poisel – Halt Mich (Mirco Niemeier live EDIT)

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

clip


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() - (motiv.getHeight()/2)+parseFloat(element.clipbox[1])) / motiv.getScaleY(),
                width: parseFloat(element.clipbox[2]),
                height: parseFloat(element.clipbox[3]),
                fill: 'none',
                scaleX: 1/motiv.getScaleX(),
                scaleY: 1/motiv.getScaleY(),
                angle: 360 - motiv.getAngle()
            });
            $path.render(ctx);
        }

    }

    paper.add(motiv);

});

We are Rail Fans