SVG.js 基础图形绘制整理（二）

最新推荐文章于 2023-09-04 15:02:25 发布

weixin_33758863

最新推荐文章于 2023-09-04 15:02:25 发布

阅读量175

点赞数

一、折线

var draw = SVG('svg1').size(300, 300);
//画折线
//使用字符串点
// var polyline=draw.polyline('0,0 100,50 50,100');
// polyline.fill('none').stroke({width:2});
//使用数组点
var polyline = draw.polyline([
    [0, 0],
    [100, 50],
    [50, 100]
]);
polyline.fill('none').stroke({
    width: 2,
    color: 'red'
});
//获取节点数组,返回 SVG.PoineArray
var array1 = polyline.array();
console.info(array1);
//修改折线,
polyline.plot([
    [0, 0],
    [100, 50],
    [50, 100],
    [150, 150],
    [200, 200]
]);
//使用动画
polyline.animate(1000).plot([
    [50, 150],
    [100, 200]
]);

二、多边形

var draw = SVG('svg1').size(300, 300);
//画多边形
var polygin = draw.polygon('0,0 100,50 50,100');
polygin.fill('none').stroke({
    width: 1
});
//获取点数组 SVG.PointArray
var array1 = polygin.array();
console.info(array1);
//修改当前多边形
// polygin.plot([
//     [0,0], [100,50], [50,100], [150,50], [200,50]
// ]);
//使用动画
polygin.animate(1000).plot([
    [0, 0],
    [100, 50],
    [50, 100],
    [150, 50],
    [200, 50]
]);

三、路径

var draw = SVG('svg1').size('100%', 300);
//画 路径
var path = draw.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');
//获取数组点 SVG.PathArray
var array1 = path.array();
console.info(array1);
//获取路径的长度
var length = path.length(); //949.8208618164062
console.info(length);
//返回指定路径位置的点,返回SVG.Point
var point = path.pointAt(105);
console.info(point);
//修改路径的位置
path.plot('M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80');
//使用动画,对于path的动画，只有相邻的两个状态的点数相同
//也就是只有路径具有相同的命令（M、C、S等，才会有效果
path.animate(1000)
    .plot('M10 80 C 40 150, 65 150, 95 80 S 150 10, 180 80')
    .loop(true, true);