Fabric.js 动态裁剪区域对图像和 SVG/形状的影响不同

Question

我有一个 Fabric.js 画布，它允许根据对象占据的区域进行动态剪辑。但是，剪切区域对 SVG/形状的处理与图像不同，使它们稍微偏移并“突破”剪切区域。重新创建：

1. 转到https://jsfiddle.net/mikewagz/hncqbhah/
2. 将徽标拖到剪辑区域的边界 - 这会正确剪辑，被剪辑到其中心占据的任何区域而不会破坏边界。
3. 现在抓取一个形状并将其拖到剪切区域。您可以在边界下方看到少量。
4. 按比例放大形状会加剧问题，在剪切区域下方显示越来越多的像素。请注意，它还会在顶部和左侧沿相同方向偏移剪切区域。

如何纠正？非常感谢任何帮助，谢谢！

剪辑功能代码：

var clipByName = function (ctx) {
  this.setCoords();
  var clipObj = findByClipName(this.clipName);
  var scaleXTo1 = (1 / this.scaleX);
  var scaleYTo1 = (1 / this.scaleY);
  ctx.save();

  var ctxLeft = -( this.width / 2 ) + clipObj.strokeWidth;
  var ctxTop = -( this.height / 2 ) + clipObj.strokeWidth;
  var ctxWidth = clipObj.width - clipObj.strokeWidth;
  var ctxHeight = clipObj.height - clipObj.strokeWidth;

  ctx.translate( ctxLeft, ctxTop );
  ctx.scale(scaleXTo1, scaleYTo1);
  ctx.rotate(degToRad(this.angle * -1));

  ctx.beginPath();

  var isPolygon = clipObj instanceof fabric.Polygon;
  // polygon cliping area
  if(isPolygon)
  {
      // prepare points of polygon
      var points = [];
      for(i in clipObj.points)
          points.push({
              x: (clipObj.left + clipObj.width / 2) + clipObj.points[i].x - this.oCoords.tl.x,
              y: (clipObj.top + clipObj.height / 2) + clipObj.points[i].y - this.oCoords.tl.y
          });

      ctx.moveTo(points[0].x, points[0].y);
      for(i=1; i<points.length; ++i)
      {
        ctx.lineTo(points[i].x, points[i].y);
      }
      ctx.lineTo(points[0].x, points[0].y);
  }
  // rectangle cliping area
  else
  {
      ctx.rect(
          clipObj.left - this.oCoords.tl.x,
          clipObj.top - this.oCoords.tl.y,
          clipObj.width,
          clipObj.height
    );
  }

  ctx.closePath();

  ctx.restore();

}

Answer 1

您应该指定在缩放路径时发生这种情况。 偏移量来自于在计算 ctxLeft 和 ctxTop 时使用 strokeWidth。

这是一个更简单的 clipByName 函数，不需要进行大量数学运算来绘制剪切区域，并且无需调用 .setCoords() 和使用 .oCoords

https://jsfiddle.net/hncqbhah/2/

var clipByName = function (ctx) {

var clipObj = findByClipName(this.clipName);

ctx.save();
ctx.setTransform(1,0,0,1,0,0);

ctx.beginPath();

var isPolygon = clipObj instanceof fabric.Polygon;
// polygon cliping area
if(isPolygon)
{
    // prepare points of polygon
    var points = [];
    for(i in clipObj.points)
        points.push({
            x: (clipObj.left + clipObj.width / 2) + clipObj.points[i].x ,
            y: (clipObj.top + clipObj.height / 2) + clipObj.points[i].y
        });

    ctx.moveTo(points[0].x, points[0].y);
    for(i=1; i<points.length; ++i)
    {
        ctx.lineTo(points[i].x, points[i].y);
    }
    ctx.lineTo(points[0].x, points[0].y);
}
// rectangle cliping area
else
{
    ctx.rect(
        clipObj.left,
        clipObj.top,
        clipObj.width,
        clipObj.height
    );
}

ctx.closePath();

ctx.restore();

}

同样绑定clipTo函数也不需要io loDash：

  obj.set({
    clipName: 'clip2',
    clipTo: clipByName
  }

这就够了。