Проблема с двумя полотнами в ткани js

Question

Я использую ткань js. И я показываю два холста с javascript show/hide property. Проблема в том, что выбор элемента не работает на втором холсте. И в первом холсте выбор не находится в правильном положении, курсор перемещения находится чуть ниже выделения.

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