(转)第04节:Fabric.js用路径画不规则图形
在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来代替这种路径的形式。
(转)第04节:Fabric.js用路径画不规则图形的更多相关文章
- Canvas实用库Fabric.js使用手册
简介什么是Fabric.js? Fabric.js是一个可以简化Canvas程序编写的库. Fabric.js为Canvas提供所缺少的对象模型, svg parser, 交互和一整套其他不可或缺的工 ...
- (转)第01节:初识简单而且强大的Fabric.js库
Fabric.js是一个功能强大和简单Javascript HTML5的canvas库.Fabric提供了很多可以互动的Canvas元素,还在canvas上提供了SVG的语法分析器. 你可以轻松的使用 ...
- (转)第05节:Fabric.js的动画设置
凡是出色的Canvas库都少不了制作动画的方法,Fabric.js也不例外,它有着编写简单且功能强大的动画助手,这就是animate( )方法. animate主要使用代码如下: rect.anima ...
- Fabric.js的使用
最近项目有一个绘制的功能,搜了一圈发现fabric.js口碑不错,但是文档稀缺,于是东看看西搜搜的把项目的需求都给实现了,想分享一下. 篇幅有点长,但看完后可以轻松驾驭fabric.我的项目是基于VU ...
- js相对路径相关(比如:js中的路径依赖导入该js文件的路径)
问题描述: 前几天调用同事的js接口文件,在他自己的html测试页面ok,在我这边调用时出现问题. debug过程中,将该测试html移到其他位置都不行,放到原html测试页面同层次路径下是OK的. ...
- 【Lucene3.6.2入门系列】第04节_中文分词器
package com.jadyer.lucene; import java.io.IOException; import java.io.StringReader; import org.apach ...
- HTML5 Canvas JavaScript库 Fabric.js 使用经验
首先,表明我的态度:采用 Flash 才是最优方案,不建议使用 HTML 5 的 Canvas 做一些生产/工业级的网页应用. Flash的优势一是浏览器支持好,二是代码成熟稳定.而HTML5 的 C ...
- fabric.js和高级画板
本文介绍fabric.js框架使用,以及使用fabricjs打造一个高级画板程序. 高级画板功能介绍 全局绘制颜色选择 护眼模式.网格模式切换 自由绘制 画箭头 画直线 画虚线 画圆/椭圆/矩形/直角 ...
- ubuntu 14.04查看java的安装路径
有时候,使用apt-get install 安装了某个软件之后,却不知道这个软件的安装路径在哪里. 那怎么样去找出这个软件的安装路径呢? 下面我们java 这个软件为例, 找出ubuntu 14.04 ...
随机推荐
- 10_PAE_非PAE
前置知识: 在 windows 中 保护模式 有两种模式: 段保护 和 页保护 段保护 主要体现在 段选择子上:但是数据段.代码段.栈段等采用的都是4GB平坦模式,段的特征并没有那样展现.所以具体的保 ...
- 解决Google Chrome浏览器字体模糊的问题
之前使用Google的Chrome浏览器一直觉得有时候,其显示的字体比较模糊,不管是Windows XP还是Windows 7都会出现要么显示的网页字体模糊,要么是Chrome浏览器本身显示的菜单模糊 ...
- python从字符串中提取数字_filter
my_str = '123and456' number = filter(str.isdigit, my_str ) # number = 123456 使用正则表达式: >>> i ...
- on windows in superset sql lab error "module object has no attribute sigalrm"
改下 utils.py 文件 It works after doing the following change (sorry for the massed up alignment, prob ...
- 【JZOJ6419】模拟旅行&【BZOJ5506】【luoguP5304】旅行者
description 某国有n座城市,这些城市之间通过m条单向道路相连,已知每条道路的长度. 不过,小X只对其中k座城市感兴趣. 为了更好地规划模拟旅行路线,提升模拟旅行的体验,小X想要知道他感兴趣 ...
- Struts2入门的第一个应用
今天开始学习struts2技术,现在struts2的技术已经超过了struts1,所以本人就没有学习struts1了,当然这个肯定不会影响我们后面的学习,先来看一下工程的目录结构: 说明: query ...
- 51nod 1556 计算(递推)
传送门 解题思路 在一个网格图上走\(n\)步,每次可以向右上,右下,右,但必须在第一象限,最后从\((0,0)\)走到\((n,0)\)的方案数为默慈金数.递推式为\(m[i+1]=\frac{(2 ...
- P1802 5倍经验日
P1802 5倍经验日 题目背景 现在乐斗有活动了!每打一个人可以获得5倍经验!absi2011却无奈的看着那一些比他等级高的好友,想着能否把他们干掉.干掉能拿不少经验的. 题目描述 现在absi20 ...
- ggplot2在一幅图上画两条曲线
ggplot2在一幅图上画两条曲线 print(data)后的结果是 C BROWN.P MI.P 0 0.9216 0.9282 30 0.9240 0.9282 100 0.9255 0.9282 ...
- Spring源码由浅入深系列五 GetBean
获取bean的过程如上图所示.下一章将继续图示讲解createBean的过程.