如何選擇織物js中的裁剪圖像

<html> 
<head> 
    <style type="text/css"> 
     canvas{ 
      border:1px solid #ccc; 
     } 

     .canvas-container{ 
      float: left; 
      left: 20px; 
     } 
    </style> 
</head> 
<body> 
<canvas id='canvas' width='500' height='600' ></canvas> 
<canvas id='C2' width='500' height='600'></canvas> 
<script type="text/javascript" src="fabric.js"></script> 
<script> 
    (function() { 
     var canvas = this.__canvas = new fabric.Canvas('canvas'); 
     fabric.Object.prototype.transparentCorners = false; 

     var radius = 300; 

     fabric.Image.fromURL('./images/Chrysanthemum.jpg', function(img) { 
     img.scale(0.4).set({ 
      left: 10, 
      top: 100, 
      angle: 0, 
      clipTo: function (ctx) { 
      ctx.rect(-250, -250, 400, 400); 
      } 
     }); 
     canvas.add(img).setActiveObject(img); 
     console.log(canvas.getActiveObject()); 
     }); 
    })(); 
</script> 
</body> 


---------- 


</html>

//上述代碼;如何選擇織物js中的裁剪圖像

現在活動對象大小與未被裁剪的圖像相同; 但是，如果有任何方法可以選擇裁剪圖像。意味着將選擇較小尺寸的較小尺寸。 thx！

來源

2015-12-16 Yang.Chueng

剪輯並不意味着這種效果：如果您希望某些剪裁更好，如果剪裁不同於preserverveAspectRatio屬性允許您使用的模式技巧。（基本在中心收穫，作物向左收穫，對於x軸和y軸都是如此）。

正如你所看到的，而不是圖像我創建一個具有所需尺寸的矩形，然後我使用img加載創建一個模式，將填充矩形。然後，您可以使用圖案上的offsetX和offsetY來修改可見的圖像部分。

偏移是訪問trought：

rect.fill.offsetX 
rect.fill.offsetY

(function() { 
 
     var canvas = this.__canvas = new fabric.Canvas('canvas'); 
 
     fabric.Object.prototype.transparentCorners = false; 
 

 
     var radius = 300; 
 

 
     fabric.Image.fromURL('http://fabricjs.com/assets/pug.jpg', function(img) { 
 
     var rect = new fabric.Rect({width: 400, height: 400}); 
 
     var pattern = new fabric.Pattern({source: img.getElement(), offsetX: -20, offsetY: -50}); 
 
     rect.scale(0.4).set({ 
 
      left: 10, 
 
      top: 100, 
 
      angle: 0, 
 
      fill: pattern, 
 
     }); 
 
     canvas.add(rect).setActiveObject(rect); 
 
     }); 
 
    })();

canvas{ 
 
    border:1px solid #ccc; 
 
} 
 

 
.canvas-container{ 
 
    float: left; 
 
    left: 20px; 
 
}

<canvas id='canvas' width='500' height='600' ></canvas> 
 
<canvas id='C2' width='500' height='600'></canvas> 
 
<script type="text/javascript" src="http://fabricjs.com/lib/fabric.js"></script>

來源

2015-12-16 11:42:32 AndreaBogazzi

真的非常感謝你！謝謝。 –

只是接受答案，如果這是正確的解決方案 – AndreaBogazzi

如何選擇織物js中的裁剪圖像

回答

相關問題