如何修复 FabricJS 缩放的多边形裁剪偏移

Question

我正在尝试将 FabricJS 矩形剪裁成多边形。裁剪工作正常，直到需要裁剪的多边形形状现在被缩放。在此之后，多边形裁剪导致了一些奇怪的偏移。

任何人都可以帮助我如何解决缩放剪辑对象时防止多边形偏移问题的功能。

这是缩放前的样子。剪辑工作正常

图片=> https://i.imgur.com/Eop2YJh.png

然后在缩放多边形时出现问题。

2: 图片 => https://i.imgur.com/ICkP8SG.png

这里是fiddle上的代码，带有裁剪功能

https://jsfiddle.net/0xpvc9uq/

因此，如果有人知道有什么意义以及我该如何解决它，我会很高兴。

感谢

var canvas = new fabric.Canvas('c');

var rect1 = new fabric.Rect({
    left: 0, top: 0,
    width: 900, height: 900,
    fill: 'blue',
    selectable: false,
      clipTo: clipRegion,
    scaleX: 1.5,
    scaleY: 1.5

});

var clipPoly = new fabric.Polygon([
        { x: 180, y: 10 },
        { x: 300, y: 50 },
        { x: 300, y: 180 },
        { x: 180, y: 220 }
    ], {
    originX: 'left',
    originY: 'top',
    left: 180,
    top: 10,
    fill: 'transparent', /* use transparent for no fill */
    strokeWidth: 0,
    selectable: false,
    strokeWidth: 1,
    stroke: "red",
    scaleX: 1.3,
    scaleY: 1.3
});

canvas.add(rect1, clipPoly);

function clipRegion (ctx) {
  rect1.setCoords();

    const clipObj = clipPoly;
    const scaleXTo1 = (1 / rect1.scaleX);
    const scaleYTo1 = (1 / rect1.scaleY);

    ctx.save();

    const ctxLeft = -( rect1.width / 2 ) - clipObj.strokeWidth - rect1.strokeWidth;
    const ctxTop = -( rect1.height / 2 ) - clipObj.strokeWidth - rect1.strokeWidth;

    ctx.translate( ctxLeft, ctxTop );
    ctx.scale(scaleXTo1, scaleYTo1);
    ctx.rotate((rect1.angle * -1) * (Math.PI / 180));
    ctx.beginPath();

    const matrix = clipPoly.calcTransformMatrix();

    let points = [];
    clipObj.points.forEach( (point) => {
      points.push({
        x:  ((point.x * matrix[0]) + (clipObj.strokeWidth * clipObj.scaleX)) - rect1.oCoords.tl.x,
        y:  ((point.y * matrix[3]) + (clipObj.strokeWidth * clipObj.scaleY)) - rect1.oCoords.tl.y
      });
    });

    ctx.moveTo(points[0].x, points[0].y);

    points.forEach((point) => {
      ctx.lineTo(point.x, point.y);
    });

    ctx.lineTo(points[0].x, points[0].y);
    ctx.closePath();
    ctx.restore(); 
}

Answer 1

我发现还有另一种方法可以解决所有问题。

clipRegion 函数现在看起来像：

function clipRegion (ctx) {
    ctx.save();

    ctx.setTransform(1, 0, 0, 1, 0, 0);
    clipPoly.render(ctx);

    ctx.restore(); 
}

这使得渲染没问题。如果还有人有其他办法解决上面的问题，我想看看答案

如何修复 FabricJS 缩放的多边形裁剪偏移

How to fix FabricJS scaled polygon clipping offset

javascript

clip

html5-canvas

fabricjs

fabricjs2