Question

我想要实现的目标：我需要在不同的画布中加载不同的图像，移动和调整它们并显示预览。我正在使用fabricJs。使用矩形画布一切正常，问题是当我想要用对角线部分连接画布时。像这样：

我在CSS中尝试使用transform属性，但后来我再也无法与画布交互了。有关如何做到这一点的任何想法？或者有没有办法只有一个像部分一样的画布？

我现在拥有的东西（只有部分代码可以与画布相互作用，预览它是另一个画布，我再画一遍）：

＆＃13;

$( 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);
    });
}

＆＃13;

.container {
  width: 544px;
}

.canvas-container {
  float: left;
}

＆＃13;

<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>

＆＃13;

Answer 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" width="400" height="400"></canvas>

更改画布形状

1 个答案: