首页
   /       /   
使用FabricJS画出简单图形
3月
20
使用FabricJS画出简单图形
作者:大彭Sir    分类: 学习笔记

关于FabricJS

Fabricjs是一个开源的基于canvas的web交互的js库,开源协议MIT,并有很多贡献者。

Fabric 提供了canvas 渲染的对象模型,也能对SVG进行了很好的解析和交互,并且可以当作对于其他类似需求的必不可少的工具。它基于原生方法提供了简单并且强大的对象模型.也考虑到了canvas的状态和渲染,直接让我们对对象进行操作即可。

下载FabricJS

请在任意搜索引擎或者GitHub搜索并下载FabricJS

画一个简单的图形

完整代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../fabric.js"></script>
</head>
<style>
    canvas {
        border: 1px rgb(0, 0, 0) solid;
    }
</style>

<body>
    <canvas id="c" width="800" height="800"></canvas>
</body>
<script>
    var canvas = new fabric.Canvas("c");
    var rect = new fabric.Rect({
        left: 100,
        top: 100,
        fill: "red",
        width: 100,
        height: 100
    })
    var circle = new fabric.Circle({
        radius: 50,
        fill: "green",
        left: 200,
        top: 200,
        height: 200,
    })
    var triangle = new fabric.Triangle({
        width: 80,
        height: 100,
        fill: "pink",
        left: 300,
        top: 300
    })
    canvas.add(rect); //正方形
    canvas.add(circle); //圆形
    canvas.add(triangle); //三角形
</script>

</html>

API介绍

绘制图形
fabric.Rect({}) 方形

  • left:0, // 距离画布左侧的距离

  • top:0, // 距离画布上边的距离

  • fill:'oink', // 背景颜色

  • width:10, // 宽度

  • height:10 // 高度

  • 更多属性不一一赘述

fabric.Circle({}) 圆形

  • 同方形

fabric.Triangle({}) 三角形

  • 同方形

fabric.Pat({M x y L x1 y1 L x2 y2 z}) 多边形

  • M表示起点,从坐标为x、y点起步,画到L x1、y1点 ,然后在画到L x2、y2点,最后z表示闭合改图形

fabric

  • Image() 通过元素插入图片

  • fromURL() 通过URL插入图片

事件
在fabric中,提供了很多不同的事件

mouse(鼠标事件)

  • move:按下且移动

  • down:按下时

  • up:按下抬起时

  • dblclick:双击时

  • mouseout:离开元素时

  • mousewheel:滚轮事件

selection

  • created 初次选中图层

  • updated 图层选择变化

  • cleared 清空图层选中

after- render画布重绘后

object(对象)

  • selected:被选中

  • deselected:取消选中

  • moving:移动

  • rotating:旋转

  • added:添加

  • removed:移除

  • modified:调整

set与get
obj.set()通常设置属性的方式有两种,第一种是在绘制的时候添加进去。

另一种是通过set方法设置

例:obj.set({color:''})

注意:需canvas.add(obj)刷新页面

obj.get()

有set方法自然就有get方法

例:obj.getXXX 获取相应属性的属性值

组别
fabric.Group([x,y],{})

Group属性可以将x与y两个fabric实例组合成一个组别,在页面上显示出来

序列化和反序列化
toJSON(序列化)

  • 导出画布信息

loadFromJSON(反序列化)

  • 将导出的信息还原成画布

注意事项
obj.renderAll()所有图层的操作之后,都需要调用这个方法刷新

obj.add()将场景加入画布中

操作案例

图层移动
// 上移图层

obj.bringForward();

// 下移图层

obj.sendBackwards();

// 使用canvas对象的moveTo方法,移至图层到指定位置

card.moveTo(obj, index);

// 旋转图层

obj.rotate(angle)

// 翻转图层,沿着X轴或者Y轴翻转

obj.set({ scaleX/Y: -this.selectedObj.scaleX/Y,})

// 删除图层

obj.remove()在进行相应操作后都需要canvas.renderAll()重新刷新画布,否则操作不生效

查询组件
canvas.item(index:number)

查找第index个添加到canvas的组件

本文标签:标签: js 图形 Fabric
责任声明:本页信息由网友自行发布或来源于网络,真实性、合法性由发布人负责,请仔细甄别!本站只为传递信息,我们不做任何双方证明,也不承担任何法律责任。文章内容若侵犯你的权益,请联系本站删除!
转载声明:本文作者大彭Sir,如需转载请保留文章出处!原文链接请自行复制!

Theme By Brief 鄂ICP备19010459号

站长统计 sitemap

首页

分类

友链

登录