设置样式

object.set 可以为元素设置一些样式

var path = new fabric.Path('M 0 0 L 0 100 L 100 120 z')
path.set({ left: 120, top: 120, fill: 'blue' })
canvas.add(path)

常用参数解析:

  • width/height 宽/高:number
  • left/top 左边距/上边距:number
  • fill 填充颜色:string
  • stroke 描边颜色:string
  • strokeWidth 描边宽度:number
  • angle 角度:number
  • originX 横轴中心点:['center'|'left'|'right]
  • originY 纵轴中心点:['center|'top'|'bottom']
  • flipX/flipY 水平翻转/垂直翻转:boolean

相对应地,可以通过 object.get 获取元素的某个属性

阴影

使用 setShadow 可以设置阴影,有两种传参方式

CSS形似的传参:

var canvas =new fabric.Canvas('main');
var rect = new fabric.Rect({
  width: 100,
  height: 100,
  fill: 'red'
});
canvas.add(rect);
rect.setShadow('2px 2px 10px rgba(0,0,0,0.2)');
canvas.renderAll();

对象形似的传参:

rect.setShadow({
  color: 'red',
  blur: 10,
  offsetX: 20,
  offsetY: 20
});
canvas.renderAll();

MIT Licensed | Copyright © 2018-present 滇ICP备16006294号

Design by Quanzaiyu | Power by VuePress