裁剪面积角未反射
裁剪面积角未反射
提问于 2015-09-10 15:14:45
我有一个面板，用于创建使用帆布织物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，池塘等。
- 将任何图像拖动到产品占位符。
当移动图像时，裁剪区域仍然没有得到当前占位符(矩形)的角度。
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-09-16 10:32:45
试试这把小提琴，它可能会帮你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();
}Stack Overflow用户
发布于 2015-09-16 10:47:04
你也可以试试这个：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在这个问题中的想法Multiple clipping areas on Fabric.js canvas
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32505705
复制相关文章
相似问题
腾讯云开发者
