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

最新推荐文章于 2025-06-23 14:17:02 发布

原创最新推荐文章于 2025-06-23 14:17:02 发布 · 1.3w 阅读

2 ·

CC 4.0 BY-SA版权

canvas&webgl 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了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