canvas - 未反射(reflect)裁剪区域角度

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. 将任何图片拖到产品占位符。

移动图片时，裁剪区域仍然获取不到当前占位符(矩形)的角度。

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