Question

在画布上的这个例子中，我们有一个选定的矩形。我们在画布的上半部分有一个OriginX和OriginY选择器。当我们选中一个复选框时，对象的旋转中心会发生变化。

但是在更改时，即使执行obj.setCoords，对象也无法正确呈现。

var canvas = new fabric.Canvas('canvas');
var rect1 = new fabric.Rect({
  width: 100,
  height: 100,
  left: 200,
  top: 200,
  angle: 0,
  fill: 'rgba(0,0,255,1)',
  originX: 'center',
  originY: 'center'
 });
 canvas.add(rect1);
 canvas.setActiveObject(rect1);
 $("#checkboxOneInput").on('change', function(){
   if(canvas.getActiveObject()){
         var obj = canvas.getActiveObject();
     obj.set('originX', 'left');
     obj.set('originY', 'top');
     obj.setCoords();
     canvas.renderAll();
  }
});
$("#checkboxTwoInput").on('change', function(){
  if(canvas.getActiveObject()){
        var obj = canvas.getActiveObject();
     obj.set('originX', 'center');
     obj.set('originY', 'top');
     obj.setCoords();
     canvas.renderAll();
  }
 });
 $("#checkboxThreeInput").on('change', function(){
  if(canvas.getActiveObject()){
        var obj = canvas.getActiveObject();
    obj.set('originX', 'rigth');
    obj.set('originY', 'top');
    obj.setCoords();
    canvas.renderAll();
  }
 });
$("#checkboxFourInput").on('change', function(){
   if(canvas.getActiveObject()){
        var obj = canvas.getActiveObject();
     obj.set('originX', 'left');
     obj.set('originY', 'center');
     obj.setCoords();
     canvas.renderAll();
   }
  });
  $("#checkboxFiveInput").on('change', function(){
   if(canvas.getActiveObject()){
         var obj = canvas.getActiveObject();
     obj.set('originX', 'center');
     obj.set('originY', 'center');
     obj.setCoords();
     canvas.renderAll();
    }
   });
  $("#checkboxSixInput").on('change', function(){
     if(canvas.getActiveObject()){
        var obj = canvas.getActiveObject();
        obj.set('originX', 'right');
        obj.set('originY', 'center');
        obj.setCoords();
        canvas.renderAll();
     }
   });
   $("#checkboxSevenInput").on('change', function(){
      if(canvas.getActiveObject()){
        var obj = canvas.getActiveObject();
        obj.set('originX', 'left');
        obj.set('originY', 'bottom');
        obj.setCoords();
        canvas.renderAll();
      }
   });
   $("#checkboxEightInput").on('change', function(){
      if(canvas.getActiveObject()){
         var obj = canvas.getActiveObject();
         obj.set('originX', 'center');
         obj.set('originY', 'bototm');
         obj.setCoords();
         canvas.renderAll();
      }
     });
     $("#checkboxNineInput").on('change', function(){   
       if(canvas.getActiveObject()){
         var obj = canvas.getActiveObject();
         obj.set('originX', 'right');
         obj.set('originY', 'bottom');
         obj.setCoords();
         canvas.renderAll();
       }
     });

Answer 1

这是在fabricjs的2.0.0版本中发现的错误，更改为版本 2.0.1 of fabricjs解决问题

OriginX和OriginY使对象无法选择

1 个答案: