如何使用fabricjs實現相框？

https://jsfiddle.net/YangChueng/sywh55Ls/如何使用fabricjs實現相框？

的Javascript

(function() { 
    var canvas = this.__canvas = new fabric.Canvas('canvas'); 
    loadImage('http://i.stack.imgur.com/sdCd3.png'); 

    var $a = document.getElementById('add'); 
    $a.onclick = function(e){ 
     var $img = document.getElementById('target'); 
     loadImage($img.src); 
    }; 

    function loadImage(url){ 
     fabric.Image.fromURL(url, function(img) { 
     img.scale(0.5).set({ 
      left:100, 
      top:100 
     }) 
     canvas.add(img).setActiveObject(img); 
    }); 
    } 
})();

當我按一下按鈕，如何應用添加到圖像中存在的其中之一是PNG圖像？我可以限制在PNG中添加的圖像嗎？

來源

2015-12-22 Yang.Chueng

我認爲你需要添加一個模式到你的結構對象。

請看看我的示例，該示例創建兩個結構對象並在其中的每一個上添加圖像。

var circle = new fabric.Circle({ 
        radius: 60, 
        fill: 'red', 
        left: 50, 
        top: 100 
       }); 
      canvas.add(circle); 
addPattern(circle); 

//create square object 
var square = new fabric.Rect({ 
       left: 180, 
       top: 140, 
       fill: 'green', 
       width: 140, 
       height: 180 
      }); 
      canvas.add(square); 
addPattern(square); 


function addPattern(obj){ 
    fabric.util.loadImage('http://fabricjs.com/assets/pug_small.jpg', function (img) { 

       obj.fill = new fabric.Pattern({ 
        source: img, 
        repeat: 'no-repeat' 
       }); 
       canvas.renderAll(); 
    }); 
}

的jsfiddle：https://jsfiddle.net/tornado1979/t6vf5z5w/

來源

2015-12-22 13:13:00

我理解的解決方案實現類似功能的相框是如何剪輯圖像。但我的問題是如何使新增的圖像適應在PNG甚至有限它。所以我不認爲它真的有用 –

您可以通過使用globalCompositeOperation設置爲源之上

var canvas = new fabric.Canvas('c'); 
 

 
fabric.Image.fromURL('http://fabricjs.com/assets/2.svg', function(img){ 
 
    img1 = img; 
 
    fabric.Image.fromURL('http://fabricjs.com/assets/pug.jpg', function(img){ 
 
    img1.scaleToWidth(canvas.getWidth()); 
 
    img2 = img; 
 
    img2.scaleToHeight(300); 
 
    img2.left = 50; 
 
    img2.top = 50; 
 
    img2.globalCompositeOperation = 'source-atop'; 
 
    canvas.add(img1); 
 
    canvas.add(img2); 
 
    }); 
 
});

<script type ="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script> 
 
<canvas id="c" width="400" height="400" style="border:1px solid #ccc"></canvas>

來源

2016-10-28 11:51:22

如何使用fabricjs實現相框？

回答

相關問題