更改画布形状

Question

我想要实现的目标：我需要在不同的画布中加载不同的图像，移动它们并调整其大小并显示预览。我正在使用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>

Answer 1

回复@Observer评论：

clipTo是deprecated since v2.0.0。您可以使用v2.0.0实现此功能（由于它接受clipPath，因此比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()

更改画布形状

问题描述投票：3回答：1

1个回答

最新问题

更改画布形状

问题描述 投票：3回答：1

1个回答

最新问题

问题描述投票：3回答：1