Question

我正在使用fabric 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();
        };

在布料js中出现两个画布问题

1 个答案: