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);
}