我想要实现的目标:我需要在不同的 Canvas 中加载不同的图像，移动它们并调整其大小并显示预览。我正在使用fabricJs。使用矩形 Canvas 时，一切正常，问题是当我要将 Canvas 与对角线部分连接在一起时。像这样:
我用CSS中的transform属性尝试了一些东西，但是后来我再也无法与 Canvas 进行交互了。有关如何执行此操作的任何想法？还是有一种方法可以让一个 Canvas 只包含类似部分的内容？
我现在所拥有的(只有一部分代码可以与 Canvas 进行交互，预览是我再次绘制所有内容的另一块 Canvas ):
$( 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" width="272px" height="465px"></canvas>
<canvas id="canvas2" width="272px" height="465px" style="float: left;"></canvas>
</div>
<div>
<input type="file" id="imageLoader1" name="imageLoader1"/>
<input type="file" id="imageLoader2" name="imageLoader1"/>
</div>
</body>最佳答案
回复@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" width="400" height="400"></canvas>关于javascript - 更改 Canvas 形状，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44529826/