两个画布在织物js中发行

Question

我使用织物js。我用javascript显示/隐藏属性显示了两个画布。问题在于元素选择在第二个画布上不起作用。并且在第一个画布中选择的位置不正确，移动光标位于选择的下方。

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