(转)第04节:Fabric.js用路径画不规则图形
2024-08-24 06:34:42
在Canvas上画方形、圆形、三角形都是很容易的,只要调用fabric对应的方法就可以了,但这些都是规则的图形,如果你想画一个不规则的图形,这时候你可以用fabric.js提供的路径绘图方法。所谓路径绘图就是用点和线的移动的方式进行绘图。通过对 线、曲线、弧的应用你可以非常复杂的图形。
我们先来看一段的代码:
var canvas = new fabric.Canvas('canvas');
var path = new fabric.Path('M 0 0 L 200 100 L 170 200 z');
path.set({ left: 120, top: 120,fill:'red' });
canvas.add(path);
上边的代码需要注意的是第二行, fabric.Path( )方法里边跟了一串字符串参数,看着有点复杂,其实这并不难理解。“M”代表“移动”命令,这个“M 00” 代表把画笔移动到(0,0)点坐标。“L”代表“线”,“L 200 100 ”的意思是使用钢笔画一条线,从(0,0)坐标画到(200,100)坐标。 “z” 代表让图形闭合路径。就这样我们轻松的画出了一个三角形。画好三角形后,我们可以用set( )方法对三角形的位置、颜色、角度、透明度等属性进行设置。
虽然用路径画图形很简单,但图形比较复杂时,你会发现这很难控制,代码会变的臃肿而不可阅读,在实际工作中没有这样使用的。我们可以用svg来代替这种路径的形式。
最新文章
- MySQL数据表range分区例子
- 转:关于BFC的初步了解以及常见使用
- javascript日期验证:填写的日期大于等于当前日期
- MarkDown插入图片
- xcode 忽然无法真机调试
- html5中的beginPath与stroke
- 被忽视但很实用的那部分SQL
- sql server和oracle的差异
- ajax大数据排队导出+进度条
- [033] 微信公众帐号开发教程第9篇-QQ表情的发送与接收(转)
- iOS 科学计数法保留N位有效数字
- Java 大数类BigInteger和BigDecimal的基本函数
- 设计模式学习系列(一)——IOC设计原则
- 2018-2019-1 20189210 《LInux内核原理与分析》第五周作业
- 人生苦短,我用Python(1)
- Executor与ExecutorService
- 解决svn中文乱码的问题
- Cognos11中Dashboard和HTML页面的简单集成
- unity 和 iOS/Android 信息交互(方法调用)
- 微信开发工具包,jar包