转载自:https://svgjs.com/svg.draw.js/

Get Started

Install svg.draw.js using bower:
```
bower install svg.draw.js
```

Include the script after svg.js into your page

<script src="svg.js"></script>
<script src="svg.draw.js"></script>

Draw your first rectangle using this simple piece of code:

<div id="myDrawing"></div>var drawing = new SVG('myDrawing').size(500, 500);
drawing.rect().draw()   // Here we init a rectangle and start drawing it

Usage

As default the drawing starts with a click on the svg-Element

var draw = SVG('drawing');
draw.rect().draw(options);

You can use your own mouse-events. Just pass the event-Object to the draw-Function

var drawing = SVG('myDrawing');
var rect = draw.rect();draw.on('mousedown', function(event){rect.draw(event, options);
});
draw.on('mouseup', function(event){rect.draw(event);
});

The addon automatically knows when to start or stop drawing (most shapes start with the first event and stop with the second). However when dealing with e.g. a polygon you are able to set new points with every event. To finish the drawing you have to call the done-function. See the next chapter for that.

Methods

svg.draw.js populates its methods it uses to draw the shape. This is useful in edgecases but generally not needed. However the method done is needed for poly-shapes and cancel can be called on every shape to stop drawing and remove the shape.

// Finishes the poly-shape
polygon.draw('done');// Cancels drawing of a shape, removes it
polygon.draw('cancel');/* The following are only useful in edge-cases */// Draws a new point with the help of (mouse-)event
polygon.draw('point', event)// Draws the point while moving the mouse (basically the animation)
polygon.draw('update', evnt)// Stop drawing, cleans up
polygon.draw('stop', event)

Options

The following options can be used to modify the behavior of the addon:

snapToGrid: Specifies a grid to which a point is aligned (default:1)

Note that you can specify the options only on the first call. When you want to change the options while drawing use polygon.draw('params', key, value) This is useful when you want to activate the grid-option when ctrl or soemthing is pressed.

Events

svg.draw.js fires a few specific events which are:

drawstart
drawstop
drawudpdate
drawpoint
drawdone
drawcancel

These events are called at the end of the corresponding method.

Each event-object holds the relative position to the parent-Object of the Shape (which is mostly the SVG-doc itself) as Array

Binding a function to the Event is easy

var draw = SVG('drawing');
draw.rect().draw();
rect.on('drawstart', function(event){console.log(e.detail); // Holds event, current Point-coords and matrix
});

Plugins

Currently svg.draw.js only supports all the basic shapes (line, polyline, polygone, rect, image, circle, ellipse). Any other type you want to draw and is available through SVG.invent (e.g. image or your own element) can be added using a plugin which just serves the functions to draw the shape.

For example:

SVG.Element.prototype.draw.extend('line polyline polygon', {// add methods here which should be added to the draw-object// e.g.foo: function(){// can access this}// or even variablesbar:5}

Method calc is always needed which updates the point of the shape.

You also can extend two shape-types at once:

SVG.Element.prototype.draw.extend({'line polyline polygon': {// add methods here which should be added to the draw-object// e.g.foo: function(){// can access this}// or even variablesbar:5}'circle':{// something}
}

See the implementation of all shapes as examples.

svg.draw.js draw rectangle 画矩形相关推荐

svg.draggable.js 实现动态向svg中添加图形和图片并可以拖拽
源码: <!doctype html> <html> <head><meta charset="utf-8"><title&g ...
html svg折线带圆角,SVG / d3.js上的矩形的一个角的圆角(svg / d3.js rounded corner
我知道SVG有一个内置的功能做圆角,但我需要做的仅在四角的2圆角. 我知道我可以互相模仿的是顶部绘制多个矩形,但似乎有点俗气. 任何方式使用裁剪或任何d3.js的方法来做到这一点? 现在我有了rect ...
使用 SVG 和 JS 创建一个由星形变心形的动画
序言:首先,这是一篇学习 SVG 及 JS 动画不可多得的优秀文章.我非常喜欢 Ana Tudor 写的教程.在她的教程中有大量使用 SVG 制作的图解以及实时交互 DEMO,可以说教程的所有细枝末节 ...
原生 js 实现类 3d 地图大屏展示自动高亮轮播、显示悬浮提示 tootip 的方案：svg + popper.js 定位引擎
要实现的效果如下图,3d 地图高亮自动轮播,展示白云区各个镇街的人口数局. 原由为什么想到这个方案,是因为我在用 echarts-gl 实现 3d 地图效果的过程中,我发现通过 dispatchA ...
微风丛林动态风景壁纸svg动画js特效
下载地址一款微风丛林动态风景壁纸svg动画特效,画面中呈现了微风吹干丛林晃动的动画效果,可用于网页背景图.插画等,欢迎大家下载. dd:
天气icon小图标svg动画js特效代码
下载地址很多种天气小图标svg代码,天气icon小图标svg动画特效代码 dd:
SVG.js 笔记（一）
SVG.js 是一款轻量级的SVG类库,并且不依赖任何第三方类库. 然后是一堆废话,讲框架是如何接近SVG规范,并且保持轻量级.接着就是展示一些SVG.js特点,为了让你相信并使用他. 代码精简通过 ...
SVG.js 文本绘制整理
1.SVG.Text var draw = SVG('svg1').size(300, 300); //画文字内容展示 //var text = draw.text('中文内容测试\n换行处理'); ...
Leaflet中使用Leaflet.draw插件实现图形交互绘制和编辑(修改图形坐标点)
场景 Leaflet中使用Leaflet.Pin插件实现图层要素编辑效果: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/1224 ...
基于svg.js实现可编辑的图像（1）
一.关于svg.js 首先是svg.js的git地址https://github.com/svgdotjs/svg.js svg.js主要用于在页面绘制svg图像,关于svg图像可以参见w3schoo ...

svg.draw.js draw rectangle 画矩形