专栏首页王金龙的专栏svg.js教程及使用手册详解(二)

svg.js教程及使用手册详解(二)

上篇简要介绍了svg.js的基本信息和基本用法,这篇开始详细讲解svg.js的用法。

SVG元素

SVG元素主要包括各种形状、线条、文本、路径。

矩形——Rect

Rects有两个参数,即矩形的宽度和高度:

var rect = draw.rect(100, 100)

椭圆——Ellipse

Ellipses就像矩形一样,有两个参数,横向和纵向的直径:

var ellipse = draw.ellipse(200, 100)

圆——Circle

Circles有一个参数,即圆的直径:

var circle = draw.circle(100)

倘若画椭圆的时候,设置其两个参数相同,那么实际上画出的图形和相同直径的圆是一样的。

直线——Line

四个参数,分别是直线起点和终点的x、y坐标:

var line = draw.line(0, 0, 100, 150).stroke({ width: 1 })

折线——Polyline

由三个或三个以上的点组成折线,也可以认为是不闭合的多边形。所以其参数就是折线顶点的坐标:

var polyline = draw.polyline('0,0 100,50 50,100').fill('none').stroke({ width: 1 })

其中用空格分开的每一对坐标x1,y1表示一个顶点的坐标,所以使用以下的这种集合的方式来表示点的坐标也是可以的:

var polyline = draw.polyline([[0,0], [100,50], [50,100]]).fill('none').stroke({ width: 1 })

多边形——Polygon

polyline画出的是折线,是不闭合的多边形,Polygon则相对的画出的是闭合的多边形。其参数是闭合多边形的顶点的坐标:

var polygon = draw.polygon('0,0 100,50 50,100').fill('none').stroke({ width: 1 })

二者的区别仅仅在于,起点和终点是否连接。

路径——Path

var path = draw.path('M10,20L30,40')

实际上svg.js中Path的使用方法跟SVG的Path的使用方法是一样的。具体如下:

M = moveto(M X,Y) :将画笔移动到指定的坐标位置 L = lineto(L X,Y) :画直线到指定的坐标位置 H = horizontal lineto(H X):画水平线到指定的X坐标位置 V = vertical lineto(V Y):画垂直线到指定的Y坐标位置 C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY):三次贝赛曲线 S = smooth curveto(S X2,Y2,ENDX,ENDY) Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY):二次贝赛曲线 T = smooth quadratic Belzier curveto(T ENDX,ENDY):映射 A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y):弧线 Z = closepath():关闭路径

图片——Image

当需要在SVG画布上放置图片时,可以使用以下函数:

var image = draw.image('/path/to/image.jpg', 200, 200).move(100, 100)

其中第一个参数是图片路径,后两个参数分别表示图片的宽度和高度。

文本——Text

第一种是最简单的创建文本的方式:

var text = draw.text("Lorem ipsum dolor sit amet consectetur.\nCras sodales imperdiet auctor.")

以上代码会自动创建一个文本块,并在必要时插入换行。

第二种方式相对复杂,也增加了更多控制:

var text = draw.text(function(add) {
  add.tspan('Lorem ipsum dolor sit amet ').newLine()
  add.tspan('consectetur').fill('#f06')
  add.tspan('.')
  add.tspan('Cras sodales imperdiet auctor.').newLine().dx(20)
  add.tspan('Nunc ultrices lectus at erat').newLine()
  add.tspan('dictum pharetra elementum ante').newLine()
})

要获取text文本的内容:

text.content

要修改text文本的内容:

text.text('Brilliant!')

还有如下这种使用起来更自然的方式:

text.font({
  family:   'Helvetica'
, size:     144
, anchor:   'middle'
, leading:  '1.5em'
})

文本路径——TextPath

var text = draw.text(function(add) {
  add.tspan('We go ')
  add.tspan('up').fill('#f09').dy(-40)
  add.tspan(', then we go down, then up again').dy(40)
})
text.path('M 100 200 C 200 100 300 0 400 100 C 500 200 600 300 700 200 C 800 100 900 100 900 100').font({ size: 42.5, family: 'Verdana' })

以上代码在执行时,将沿着给定的路径绘制文本。

继承——Use

var rect = draw.rect(100, 100).fill('#f09')
var use  = draw.use(rect).move(200, 200)

如上代码所示,在SVG画布上将会出现两个rect,原始的rect和use的实例,任何在原始rect上所做的修改都将会在use的实例上显现。

如果我不想让原始的rect出现怎么办呢?

var rect = draw.defs().rect(100, 100).fill('#f09')
var use  = draw.use(rect).move(200, 200)

如上,可以使用defs()方法,由此也拓展出一个更易于重用的SVG组件。可以将原始的rect当作一个库元素,可以通过use方法来进行重用而不会修改原始元素。

下一篇将持续更新svg.js中引用元素的方法,也即控制画布上的元素进行动画操作的方法,敬请期待!

 原文链接:http://www.jinlongtalk.com/2017/02/21/svg-js2/

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Java基础系列1:Java基本类型与封装类型

    当初学习计算机的时候,教科书中对程序的定义是:程序=数据结构+算法,Java基础系列第一篇就聊聊Java中的数据类型。

    王金龙
  • 详解Java8的日期和时间API

    在JDK1.0的时候,Java引入了java.util.Date来处理日期和时间;在JDK1.1的时候又引入了功能更强大的java.util.Calendar,...

    王金龙
  • 编程语言中那些有趣的命名

          学习NodeJS的时候,一定会用到其包管理器npm。npm的字面意思是node package manager,实际的含义也是这样,但是npm真正的...

    王金龙
  • 实现瀑布流布局

    瀑布流,又称瀑布流式布局。是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部,瀑布流...

    WindrunnerMax
  • 在 mono 下使用微软的 OWIN 认证中间件

    使用 Microsoft.Owin.Security 中间件作为 OWIN 应用的标准验证在 IIS 下面工作良好, 不过最近在将 WebAPI 应用迁移到 L...

    beginor
  • 地理信息系统(GIS)系列——ArcGIS 开发的各种示例

    魏晓蕾
  • JS实用技巧手记之六

    除特别注明外,本站所有文章均为慕白博客原创,转载请注明出处来自https://geekmubai.com/programming/166.html

    慕白
  • 常用的Hadoop 文件查看工具

    packages.config <?xml version="1.0" encoding="utf-8"?> <packages> <package id...

    挖掘大数据
  • javascript当中eval用法

    1)eval 例 4.1.1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <...

    马克java社区
  • Arcgis for JS扩展GraphicLayer实现区域对象的聚类统计与展示

    分省市雨量站的数目通过统计表的形式在页面端展示,位置根据XY坐标信息将雨量站标绘在图上。

    lzugis

扫码关注云+社区

领取腾讯云代金券