兩個畫布在織物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(); 
     };