Как выбрать обрезанное изображение в ткани 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

ответ

Смежные вопросы