更改画布形状

Question

更改画布形状

4

我希望实现的功能是: 我需要在不同的画布中加载不同的图像，移动和调整它们的大小，并显示预览。我正在使用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" 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>

- sciamp-dev

唯一的方法是使用两个画布，并且仅使用每个画布的一部分（被对角线切断）。 - VSO

@VSO 我该如何裁剪画布？我应该将它们包装在 div 中并进行裁剪，还是有其他方法？ - sciamp-dev

3

检查函数 clipTo()；您可以重叠两个画布并对它们进行裁剪。http://jsfiddle.net/5FPJt/104/ - Observer

@Observer 谢谢你！正是我所需要的。 - sciamp-dev

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- soywod · Answer 1

回复@Observer的评论： clipTo自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>