Заполнить прямоугольник растянутым изображением с Fabricjs

Я создал код для рисования прямоугольника с помощью Fabricjs и заполнил прямоугольник рисунком изображения и с помощью «no-repeat». Вот код:Заполнить прямоугольник растянутым изображением с Fabricjs

<!DOCTYPE HTML> 
<html> 
<head> 
    <script src="js/fabric.min.js" ></script> 
</head> 
<body> 

<script> 
function addRect() { 
    var canvas = new fabric.Canvas('c'); 
    fabric.Object.prototype.transparentCorners = false; 

    canvas.setWidth(800); 
    canvas.setHeight(600); 

    function loadPattern(url) { 
    fabric.util.loadImage(url, function(img) { 
     rect.fill = new fabric.Pattern({ 
     source: img, 
     repeat: 'no-repeat', 
     }); 
     canvas.renderAll(); 
    }); 
    } 

rect = new fabric.Rect({ 
       left: 100, 
       top: 100, 
       width: 200, 
       height: 200, 
       angle: 0, 
       stroke: 'red', 
       strokeWidth: 3, 
      }); 

      canvas.add(rect); 


    loadPattern('images/test.png'); 

    document.getElementById('fillpattern').onchange = function() { 
    loadPattern('images/' + this.value+'.png'); 
    }; 
    canvas.renderAll(); 
    } 


</script> 
<button onclick="addRect()">add</button> 
<select id="fillpattern" name="fillpattern"> 
           <option value="horizontal">horizontal</option> 
           <option value="vertical">vertical</option> 
           <option value="diagonal">diagonal</option> 
           <option value="cross">cross</option> 
           <option value="test">test</option> 
          </select> 

<div> 
    <canvas id="c"> 
    </canvas> 
</div> 

</body> 
</html>

Как я могу заполнить прямоугольник растянутым изображением?

источник

2016-02-07 Hendri Tobing

Хотя в моем ответе я не использую концепцию шаблона, но надеюсь, что это поможет вам.

 var canvas = new fabric.Canvas('c'); 
     var ctx = canvas.getContext("2d"); 
     ctx.beginPath();  
     ctx.rect(40, 40, 220, 220); 
     ctx.closePath(); 
     ctx.stroke(); 
     ctx.clip(); 
     var img = new Image(); 
     img.onload = function() { 
      var img_ = new fabric.Image(img, { 
       left: 20, 
       top: 0, 
       height: 220, 
       width: 220, 
       selectable: true, 
       hasControls: false, 
       hasBorders: false 
      }); 
      canvas.add(img_); 
      img_.sendToBack(); 
     }; 
     img.src = 'images/87357.jpg';

источник

2016-10-05 06:38:31 Libretto

выбираемых истинное свойство позволяет перемещать изображение внутри прямоугольника, также добавляя простую функцию переведенной с некоторым входом диапазона типа вы можете управлять масштабирование на canvas.item (0) и можете дать лучший контроль. – Libretto

Заполнить прямоугольник растянутым изображением с Fabricjs

ответ

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