更改画布形状
Posted
技术标签:
【中文标题】更改画布形状【英文标题】：Change canvas shape 【发布时间】：2017-11-15 17:22:00 【问题描述】：我想要实现的目标：我需要在不同的画布中加载不同的图像，移动它们并调整它们的大小并显示预览。我正在使用fabricJs。使用矩形画布一切正常，问题是当我想将画布与对角线部分连接时。像这样的：
我尝试了 CSS 中的 transform 属性，但后来我无法再与画布交互。关于如何做到这一点的任何想法？或者有没有办法让只有一个画布有类似部分的东西？
我现在拥有的（只有部分代码与画布交互，预览是另一个画布，我在其中再次绘制所有内容）：
$( document ).ready(function()
addImage('canvas1', 'imageLoader1');
addImage('canvas2', 'imageLoader2');
);
function addImage(canvas, input)
var canvas = new fabric.Canvas(canvas);
document.getElementById(input).addEventListener('change', function (e)
var file = e.target.files[0];
var reader = new FileReader();
reader.onload = function (f)
var data = f.target.result;
fabric.Image.fromURL(data, function (img)
var oImg = img.set(
left: 0,
top: 0,
angle: 00,
width: 100,
height: 100
).scale(0.9);
canvas.add(oImg).renderAll();
var a = canvas.setActiveObject(oImg);
var dataURL = canvas.toDataURL(
format: 'png',
quality: 0.8
);
);
;
reader.readAsDataURL(file);
);
.container
width: 544px;
.canvas-container
float: left;
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.12/fabric.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="container">
<canvas id="canvas1" ></canvas>
<canvas id="canvas2" style="float: left;"></canvas>
</div>
<div>
<input type="file" id="imageLoader1" name="imageLoader1"/>
<input type="file" id="imageLoader2" name="imageLoader1"/>
</div>
</body>【问题讨论】：
唯一的方法是拥有两个画布，并且只使用每个画布的一部分（被对角线截断）。 @VSO 如何剪切画布？我应该将它们包装在一个 div 中并剪切它还是有其他方法？ 检查函数clipTo();您可以覆盖 2 个画布并对其进行剪辑jsfiddle.net/5FPJt/104 @Observer 谢谢！正是我需要的 【参考方案1】：回复@Observer 评论：
clipTo 是 deprecated since v2.0.0。您可以使用clipPath 来实现这一点（它比clipTo 更强大、更灵活，因为它接受fabric.Object）：
const canvas = new fabric.Canvas("canvas", backgroundColor: "#d3d3d3")
const container = new fabric.Rect(
width: 200,
height: 200,
left: 100,
top: 100,
)
const obj = new fabric.Circle(
radius: 50,
left: 150,
top: 150,
fill: "blue"
)
canvas.clipPath = container
canvas.add(obj)
canvas.requestRenderAll()#canvas
background: #e8e8e8;
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.0.0-beta.5/fabric.min.js"></script>
<canvas id="canvas" ></canvas>【讨论】：
以上是关于更改画布形状的主要内容，如果未能解决你的问题，请参考以下文章