Fabric js中的两个画布问题

Question

我正在使用织物 js。我正在展示两个带有 javascript show/hide 属性的画布。问题是元素选择在第二个画布上不起作用。在第一个画布中，选择的位置不正确，移动光标就在选择的下方。

<?php $url=base_url().'uploads/'.$info->image;
list($width, $height, $type, $attr) = getimagesize($url); ?>

<div class="col-md-8" id="canvas-holder">
    <canvas id="canvas" width="<?php echo $width?>" height="<?php echo $height?>"></canvas>
    <script type="text/javascript">
        var canvas = new fabric.Canvas('canvas');
        var img = '<?php echo base_url()?>uploads/<?php echo $info->image;?>';
        canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));
    </script>
</div>
<div class="col-md-8" id="canvas-holder2">
    <canvas id="canvas2" width="<?php echo $width?>" height="<?php echo $height?>"></canvas>
    <script type="text/javascript">
        var canvas2 = new fabric.Canvas('canvas2');
        var img2 = '<?php echo base_url()?>uploads/<?php echo $info->image;?>';
        canvas2.setBackgroundImage(img2, canvas2.renderAll.bind(canvas2));
    </script>
</div>

有什么解决办法吗？ ? ?

Answer 1

也许你可以尝试重置坐标并调用 calcOffset()

        var updateCoords = function()
        {
            var objects = canvas.getObjects();
            for (var i in objects) {
                objects[i].setCoords();
            }
            canvas.calcOffset()
            canvas.renderAll();
        };