剪切区域角度未反映 [英] Clipping Area Angle Not Reflected

问题描述

我有一个面板，用于使用画布面料js创建内容。
画布具有许多占位符，例如矩形，我想在该特定区域添加图像。我正在裁剪该区域，以使图像不会离开该区域。
现在一切正常，除了裁剪区域未使用画布实例设置角度（旋转不起作用）。

I have a panel for creating something using canvas fabric js. Canvas has many placeholders like a rectangle and I want to add images in that particular area. I am making that area clipped so that the image does not leave that area. Now everything is working fine except that the clipping area does not set angle (Rotate is not working) using canvas instance.

这是我的代码：

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

This is the URL where I want to see those changes. Try adding images by drag and drop. https://purplle.com/collection/create-collection/?template=175

请遵循以下详细信息：

1. 搜索产品，例如Lakme，池塘等。


2. 将任何图像拖动到产品占位符。

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

When moving the image, the clipping area is still not getting the angle of the current placeholder (Rectangle).

推荐答案

尝试这个小提琴，可能会帮助您
http://jsfiddle.net/ZxYCP/194/

Try this fiddle, it might help you 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();
}

这篇关于剪切区域角度未反映的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！