SVG.js包的使用

1、SVG.js包简介

SVG.js是用于绘制矢量图和制作矢量动画的轻量级js库。

官网:https://svgjs.com/

(1)SVG.js包的开发文档

W3C关于SVG.js包的文档(英文)

https://www.w3.org/TR/SVG/

SVG.js包的英文开发文档,可以在官网和W3C上看到,但是中文的开发文档我没有找到,如果感觉英文看不习惯,可以使用Google浏览器,它的右上角有个按钮,点击“翻译此页”能够翻译整个网页。

 

 

2、SVG.js安装与入门

2.1 下载SVG.js包

(1)在SVG.js官网上下载
2.x版本下载地址:https://svgjs.com/docs/2.7/installation/
3.x版本下载地址:https://svgjs.com/docs/3.0/installation/
(2)在github上下载
下载地址:https://github.com/svgdotjs/svg.js
(3)在CNDJS上下载SVG.js包
SVG.js有很多版本,如果需要下载其他版本可以在CDNJS上下载。在CDNJS上,不仅可以搜索和下载js库,还可以找到相应js库的官网和github。
CDNJS的网址:https://cdnjs.com/

2.2 SVG.js入门

导入SVG.js包,绘制一个矩形
代码如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>绘制矢量图</title>
        <script type="text/javascript" src="js/svg-2.7.1.min.js" ></script>
    </head>
    <body>
        <div id="drawing"></div>    
    </body>
    <script type="text/javascript">
        //判断浏览器是否支持绘制SVG
        if (SVG.supported) {
            var drawing = SVG("drawing").size('100%', '100%');
            drawing.rect(100, 100).attr({ fill: '#f06' })
        }else{
            alert("浏览器不支持SVG!")
        }
    </script>
</html>


3、SVG.js绘制矢量图

3.1 基本介绍

此包能够绘制矩形(rect())、圆(circle())、椭圆(ellipse())、直线(line())、折线(polyline())、多边形(polygon())等,上述的方法比较简单,参见官网开发文档中的Elements目录即可。本段介绍一下绘制path路径中的参数和命令。

绘制path的命令如下:
M = moveto //绘制起始点;
L = lineto //绘制直线;
H = horizontal lineto //绘制水平直线
V = vertical lineto //绘制垂直直线
C = curveto //绘制曲线
S = smooth curveto //绘制平滑曲线
Q = quadratic Bézier curve //二次贝塞尔曲线
T = smooth quadratic Bézier curveto //平滑二次贝塞尔曲线
A = elliptical Arc //绘制椭圆弧线
Z = closepath //终止路径
注意:以上所有命令均允许小写字母。大写表示绝对定位,小写表示相对定位。

3.2 path路径绘制

注意:绘制路径时必须要有M或者m开头
(1)绘制一条直线(L)
绘制从(0,0)->(50,50)两点的直线,如下:
var pathStr = 'M0 0 L50 50';// L表示绘制直线,需要两个参数;

绘制从(0,0)->(50,0)两点的水平直线,如下:
var pathStr = 'M0 0 H50';//H表示绘制水平直线,仅仅需要一个参数50;
var pathStr = 'M0 0 L50 0';
var pathStr = 'M0 0 50 0';

绘制从(0,0)->(0, 50)两点的垂直直线,如下:
var pathStr = 'M0 0 V50';//V表示绘制垂直直线,仅仅需要一个参数50;
var pathStr = 'M0 0 L0 50';
var pathStr = 'M0 0 0 50';// 也可以不要L

(2)绘制多点折线(L)
绘制从(0,0)->(50, 50)->(20, 40)的折线
var pathStr = 'M0 0 L50 50 20 40';// 可以仅仅在第一个点后加1个L即可
var pathStr = 'M0 0 L50 50 L20 40';// 也可以在每个点前都加L
var pathStr = 'M0 0 50 50 20 40';// 还可以仅仅加1个M

(3)绘制曲线(C)
注意:绘制曲线必须至少4个点,1个起始点、3个曲线点,此外必须是3个点为1组。
绘制从(0,0)->(30,50)->(20,40)->(10,60)的曲线,共4个点。
var pathStr = 'M0 0 C30 50 20 40 10 60';

绘制从(0,0)->(30,50)->(20,40)->(10,60) ->(60,60)->(80,90)->(30,100)的曲线,共7个点。
var pathStr = 'M0 0 C30 50 20 40 10 60 C60 60 80 90 30 100';// 每3个点为1组,可以在前面C;
var pathStr = 'M0 0 C30 50 20 40 10 60 60 60 80 90 30 100';// 也可以在前面加1个C;
注意:如果这3个点(60,60)、(80,90)、(30,100)中缺少任何1个或2个,则这3个点都不能显示。

(4)绘制二次贝塞尔曲线(Q)
贝塞尔曲线类似于曲线,不过它是两个点为1组。
var pathStr = 'M0 0 Q30 50 20 40 Q10 60 60 60';
var pathStr = 'M0 0 Q30 50 20 40 10 60 60 60';
注意:如果这2个点(10,60) 、(60,60)缺少1个2个点都会显示。


(5)其他曲线
平滑曲线(S)的用法与二次贝塞尔曲线(Q)的用法相同。平滑二次贝塞尔曲线(T)与直线(L)的用法相同。
绘制平滑二次贝塞尔曲线(T)
var pathStr = 'M0 0 T30 50 T20 40 T10 60 T10 20';
var pathStr = 'M0 0 T30 50 20 40 10 60 10 20';

(6)绘制椭圆弧线(A)
绘制1椭圆圆弧必须要有7个参数,参数组成A rx ry x-axis-rotation large-arc-flag sweep-flag x y。
第1个参数rx:X轴的半径;
第2个参数ry:Y轴的半径;
第3个参数x-axis-rotation:弧线沿着X轴的旋转,一般默认为0;
第4个参数large-arc-flag:最大角度标识符号,只能是0或1,一般默认为1。
第5个参数sweep-flag:标识绘图的方向只能是0或1,1表示顺时针绘制弧线,0表示逆时针绘制弧线。
第6个参数sweep-flag:圆弧的结束点X;
第7个参数sweep-flag:圆弧的结束点Y;

绘制1个弧线
var pathStr = 'M50 0 A20 20 0 0 0 100 50';
绘制2个弧线
var pathStr = 'M50 0 A20 20 0 0 0 100 50 A20 20 0 0 1 200 200';
var pathStr = 'M50 0 A20 20 0 0 0 100 50  20 20 0 0 1 200 200';

运行结果如下:

 

4、实现的源代码

// 要看上述的代码结果,只需要替换下述的代码中相应部分的代码即可。
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>绘制矢量图</title>
        <script type="text/javascript" src="js/svg-2.7.1.min.js" ></script>
    </head>
    <body>
        <div id="drawing"></div>    
    </body>
    <script type="text/javascript">
        //判断浏览器是否支持绘制SVG
        if (SVG.supported) {
            var drawing = SVG("drawing").size('300', '300');
            // 绘制2个弧线
            var pathStr = 'M50 0 A20 20 0 0 0 100 50  20 20 0 0 1 200 200';
            var path = drawing.path(pathStr);
            // 无填充
            path.fill('none');
            // 设置线条的颜色、宽度、连接点形状
            path.stroke({ color: '#f06', width: 2, linecap: 'round', linejoin: 'round' });
        }else{
            alert("浏览器不支持SVG!")
        }
    </script>
</html>

  • 3
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue.js 是一个流行的前端框架,而 D3.js 则是一个广泛使用的数据可视化库。将这两个工具结合起来可以实现非常强大的数据可视化功能。 以下是使用 Vue.js 和 D3.js 的一些步骤: 1. 在项目中引入 D3.js 库,可以通过在 index.html 中添加 script 标签或者使用 npm 安装。 2. 创建 Vue.js 组件,含一个 DOM 元素用于渲染图表。 3. 在 Vue.js 组件中使用 D3.js 来绘制图表。可以使用 D3.js 提供的各种图表类型,如折线图、散点图、柱状图等。 4. 在 Vue.js 组件中绑定数据,使图表能够动态更新。 下面是一个简单的示例,展示如何在 Vue.js使用 D3.js 绘制一个简单的柱状图: ``` <template> <div ref="chart"></div> </template> <script> import * as d3 from 'd3'; export default { mounted() { // 绘制数据 const data = [4, 8, 15, 16, 23, 42]; // 创建 SVG 元素 const svg = d3.select(this.$refs.chart) .append("svg") .attr("width", 400) .attr("height", 200); // 创建柱状图 svg.selectAll("rect") .data(data) .enter() .append("rect") .attr("x", (d, i) => i * 70) .attr("y", (d, i) => 200 - 10 * d) .attr("width", 50) .attr("height", (d, i) => d * 10) .attr("fill", "steelblue"); } } </script> ``` 这个示例中,我们在 Vue.js 组件中的 mounted 钩子函数中使用 D3.js 绘制了一个简单的柱状图。我们使用了 D3.js 提供的 select 和 append 方法来创建 SVG 元素和矩形元素,并使用数据绑定来绘制图表。在 Vue.js 组件的模板中,我们使用 ref 属性来引用 DOM 元素,然后在 mounted 函数中使用 d3.select 方法来选中该元素,从而在该元素上绘制图表。 需要注意的是,在实际的应用中,我们可能需要更复杂的数据处理和图表绘制逻辑,但是以上步骤可以作为一个基础框架来使用

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值