fabricjs上手指南

张迁发布于2019-08-22 16:39 / 3320人阅读

摘要：可以对每一个对象使用动画，克隆，修改属性，事件监听，碰撞检测等。修改属性需及时渲染才能展示出效果。每次更改了对象的位置，大小时比如，，若要感知该对象的具体位置用于对象间碰撞边缘检测，或事件响应，需要使用方法重设对象的四个角坐标。

fabricjs是一个canvas的库，原本canvas的操作主要基于上下文，需要使用者自己从0开始去实现一些基本功能。而canvas库文件封装好了许多便利的对象，这些canvas库使得用户可以在比较高级的层面上进行绘制。fabricjs就是其中之一。

上手建议：官方api写得比较简洁，建议先看看官方快速教程，也可以参考这部中文教程

使用fabricjs的新手套路：

1. 创建fabric的canvas对象。
2. 创建fabric的各种对象，包括：rect，circle，line，image等。
3. 将创建好的对象添加到canvas。
4. 可以对每一个fabric对象使用动画，克隆，修改属性，事件监听，碰撞检测等。修改属性需及时渲染canvas才能展示出效果。

fabricjs使用注意要点：

每次修改对象的参数后需要执行canvas.renderAll()重新渲染，否则不会出效果。

fabric对象用acoords参数（bl，br，tl，tr）【大概是topleft，bottomright的意思】表达自己所在canvas中的位置。每次更改了对象的位置，大小时（比如left，width），若要canvas感知该对象的具体位置（用于对象间碰撞边缘检测，或事件响应），需要使用setCoords方法重设对象的四个角坐标。

介绍下常用的配置参数，这些配置参数可用来配置fabric对象
width宽：number,
height高：number,
fill填充颜色：string,
stroke描边颜色:string,
strokeWidth描边宽度：number,
angle角度:number,
left左边距:number,
top上边距:number,
originX横轴中心点:["center"|"left"|"right],
originY纵轴中心点:["center|"top"|"bottom"],
flipX水平翻转:boolean,
flipY垂直翻转：boolean,

更多配置参数请参考：fabric.Object，以及其子类

介绍下官方相应的demo
事件
动画
克隆
边缘检测
精灵动画
分组和取消分组

GPU云服务器云服务器 fabricjs 编程指南上手 html指南

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94544.html

用typescript写静态页面

摘要：在中调用库以调用一个库为例识别库需要一个接口文件，的接口文件已经做好了，只需在终端众即可安装其余步骤与以往写时一样，在中引入，在中引入编译后的文件以上就是在静态页面中的应用。 typescript有许多的优点，对于已经上手angular开发的朋友想必都会很熟悉。那么，如果想在其其他非angular框架环境下使用typescript需要哪些步骤呢？以下内容，我们将以一个静态页面为例，简...

canger 2019-08-22 16:05 评论0 收藏0
FabricJS 前端绘图库使用总结(一)

摘要：使用一段时间了，总得来说，是一款非常强大的矢量图工具，官方文档也算丰富，但文档组织形式不太好，而且少部分设计不太一致，还是需要整理一下。是最基础的对象，针对标签做的封装，可以管理内部绘制的所有对象。使用一段时间了，总得来说，是一款非常强大的矢量图工具，官方文档也算丰富，但文档组织形式不太好，而且少部分api设计不太一致，还是需要整理一下。 Canvas canvas是最基础的对象，针...

paney129 2019-08-26 12:14 评论0 收藏0
turnjs fabricjs canvas 翻书

摘要：最近做了一个翻书效果的项目来总结一下实现过程和遇到的一些问题供自己以后快速解决问题希望也能帮到同样遇到此类问题的同学如果有更好的方法希望你能分享给我地址插件问题都是些自己觉的比较难解决的比较片面如有其他疑问可以留言交流或者当你从官网下载最近做了一个翻书效果的项目, 来总结一下实现过程和遇到的一些问题, 供自己以后快速解决问题, 希望也能帮到同样遇到此类问题的同学, 如果有更好的方法,...

mylxsw 2019-08-20 13:49 评论0 收藏0
Canvas实用库Fabric.js使用手册

摘要：为提供所缺少的对象模型交互和一整套其他不可或缺的工具。为什么要使用提供一个好的画布能力但是不够友好。就是为此而开发，它主要就是用对象的方式去编写代码。代表线，的意思是使用钢笔画一条线，从坐标画到坐标。代表让图形闭合路径。简介什么是Fabric.js? Fabric.js是一个可以简化Canvas程序编写的库。 Fabric.js为Canvas提供所缺少的对象模型, svg pars...

XGBCCC 2019-08-23 14:28 评论0 收藏0