未反映裁剪区域角度

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

请关注以下详情：

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

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

Answer 1

试试这个 fiddle，它可能对你有帮助 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();
}

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 idea Multiple clipping areas on Fabric.js canvas

未反映裁剪区域角度

Clipping Area Angle Not Reflected

canvas

fabricjs