0

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

谁能帮助我如何修复该功能以防止在缩放剪辑对象时出现多边形偏移问题。

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

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

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

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

这是关于剪辑功能的代码

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(); 
}
4

1 回答 1

0

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

clipRegion 函数现在看起来像：

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

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

    ctx.restore(); 
}

这使得渲染没问题。如果还有其他方法可以解决上述问题，我想看看答案

于 2019-08-09T11:45:48.593 回答