fabricjs学习一:基本图形、静态canvas、image、path

本文介绍了fabricjs库中的7种基础图形,包括Circle、Ellipse、Line等,并展示了如何通过get和set方法设置元素属性。同时,讨论了如何禁用canvas元素的选择和拖动,以及image和path的操作。提供了基础的image加载和path处理示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

fabric提供了7种基础图形

使用示例

var circle = new fabric.Circle({
  radius: 20, fill: 'green', left: 100, top: 100
});
var triangle = new fabric.Triangle({
  width: 20, height: 30, fill: 'blue', left: 50, top: 50
});

canvas.add(circle, triangle);

可以通过 get方法获取元素属性,用set设置元素属性

 

fabricjs的canvas上的元素,初始是可以选择,拖动,拉伸的。要禁止这些操作,有两种方式:

一、在单个元素上设置 selectable为false,这样设置的单个元素是无法选择和拖动了。

var canvas = new fabric.Canvas('c');
...
canvas.selection = false; // disable group selection
rect.set('selectable', false); // make object unselectable

二、通过设置静态的canvas,可以让所有元素都无法拖动。

var staticCanvas = new fabric.StaticCanvas('c');

staticCanvas.add(
  new fabric.Rect({
    width: 10, height: 20,
    left: 100, top: 100,
    fill: 'yellow',
    angle: 30
  }));

 

image操作示例:

1、来自于image元素

// html
<canvas id="c"></canvas>
<img src="my_image.png" id="my-image">

// js
var canvas = new fabric.Canvas('c');
var imgElement = document.getElementById('my-image');
var imgInstance = new fabric.Image(imgElement, {
  left: 100,
  top: 100,
  angle: 30,
  opacity: 0.85
});
canvas.add(imgInstance);

2、来自于image url

fabric.Image.fromURL('my_image.png', function(oImg) {
  // scale image down, and flip it, before adding it onto canvas
  oImg.scale(0.5).set('flipX, true);
  canvas.add(oImg);
})

path

var canvas = new fabric.Canvas('c');
var path = new fabric.Path('M 0 0 L 200 100 L 170 200 z');
path.set({ left: 120, top: 120 });
canvas.add(path);

 

参考:

http://fabricjs.com/fabric-intro-part-1

 

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值