裁剪区域角度不反映

Question

我有一个使用Canvas Fabric JS创建某个东西的面板。Canvas上有许多占位符，比如矩形，我想在特定区域添加图像。我正在将该区域剪切，以便图像不会离开该区域。现在一切都正常工作，除了使用Canvas实例设置剪辑区域的角度（旋转不起作用）。

以下是我的代码：

var clipByName = function (bindClip) {

    this.setCoords();
    var clipRect = findByClipName(this.clipName);
    var scaleXTo1 = (1 / this.scaleX);
    var scaleYTo1 = (1 / this.scaleY);
    bindClip.save();

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

    bindClip.translate(ctxLeft, ctxTop);


    bindClip.rotate(this.angle *(Math.PI / 180) * -1);
    bindClip.scale(scaleXTo1, scaleYTo1);

    bindClip.beginPath();
    bindClip.rect(
        clipRect.left - this.oCoords.tl.x,
        clipRect.top - this.oCoords.tl.y,
        clipRect.width,
        clipRect.height
    );
    console.log(bindClip);
    bindClip.closePath();
    bindClip.restore();
}

这是我想看到更改的URL。请尝试通过拖放添加图片。 https://purplle.com/collection/create-collection/?template=175

请按照以下说明进行操作：

1. 搜索产品，例如Lakme，Ponds等。
2. 将任何图像拖到产品占位符上。

移动图像时，裁剪区域仍未得到当前占位符（矩形）的角度。

- Jugal Singh

---

尝试在剪辑上添加描边颜色，这可能有助于调试。 并且在剪辑中添加角度，就像您在矩形中添加的一样。 - devesh singhal

Answer 1

试试这个代码片段，可能会对你有所帮助 http://jsfiddle.net/ZxYCP/194/

clipTo: function(ctx) { 
  ctx.save();
  ctx.setTransform(1, 0, 0, 1, 0, 0);
  ctx.rect(
    100, 100,
    200, 200
  );
  clipRect1.render(ctx);
  ctx.strokeStyle = "red";
  ctx.stroke();
  ctx.restore();
}

- Mayank Saxena

Answer 2

你也可以尝试这个: http://jsfiddle.net/ZxYCP/198/

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,
    width: 200,
    height: 200,
    fill: '#DDD', /* use transparent for no fill */
    strokeWidth: 0,
    selectable: false
});

您可以使用多边形来进行裁剪。答案基于@natchiketa在 Fabric.js画布上的多个裁剪区域问题中的想法。

- l00k