裁剪区域角度未反映答案

【问题标题】：Clipping Area Angle Not Reflected裁剪区域角度未反映
【发布时间】：2015-12-06 23:11:43
【问题描述】：

我有一个面板，用于使用 canvas fabric js 创建一些东西。 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 等。
将任意图片拖到产品占位符上。

移动图片时，剪切区域仍然没有获取到当前占位符（矩形）的角度。

【问题讨论】：

尝试在剪辑上添加描边颜色，可能会帮助您调试。并在剪裁中添加与在矩形上添加的角度相同的角度

标签： canvas fabricjs

【解决方案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();
}

【讨论】：

【解决方案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
});

您可以简单地使用 Polygon 进行剪辑。答案基于此问题中的@natchiketa 想法Multiple clipping areas on Fabric.js canvas

【讨论】：