fabric簡介(一)

Fabric 是canvas的封裝庫(Fabric.js is a powerful and simple  Javascript HTML5 canvas library)

1.官方地址: http://fabricjs.com/

2. cdn地址:  <script src="https://cdn.bootcdn.net/ajax/libs/fabric.js/4.2.0/fabric.js"></script>

3.相關的例子:

 3.1在canvas中加入背景圖片,並設置圖片不可移動和拖拽

      html中的設置:

  <img src="img/bg.png" id="lamp"  style="display: none;" />
  <canvas id="canvas"  width="900px"  height="383px" ></canvas>

 

  js 中的代碼:

window.onload = function() { //這塊必須用window.onload  而不用 $(function(){}) 否則會造成圖片時有時無  因爲涉及到圖片是否加載完畢
var canvas = new fabric.Canvas('canvas');
var imgElement = document.getElementById('lamp');
var imgInstance = new fabric.Image(imgElement, {
left: 0,
top: 0,
angle: 0,
width:100, // 寬高不設置 默認鋪滿canvas
height:100,
opacity: 1
});

// imgInstance .setWidth(350)   也可以這樣設置寬高
// imgInstance .setHeight(200)

//設置這個圖片不能動
imgInstance.hasControls = false;
imgInstance.lockMovementX = true;
imgInstance.lockMovementY = true;
imgInstance.lockRotation = true;
imgInstance.selectable = false;
canvas.add(imgInstance);
}