介绍
angular2-drawing 是一个基于 Angular2 框架的绘图库，可以在浏览器中创建和编辑 SVG 图形。它提供了丰富的 API 和组件，使得开发者可以快速创建出漂亮的图形。
安装
首先，需要安装 angular2-drawing 的 npm 包：
npm install angular2-drawing --save
接着，在 Angular2 的模块中，导入 Angular2DrawingModule 并添加到 imports 中：
-- -------------------- ---- -------
------ - --------------------- - ---- -------------------
-----------
-------- -
----------------------
-- ---
--
-- ---
--
------ ----- --------- - -使用
创建画布
首先，需要在组件中导入 DrawingService，并在构造函数中注入。然后，就可以使用 createCanvas 方法来创建一个画布：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------------- - ---- -------------------
------------
--------- -----------
--------- ----- ----------------
--
------ ----- ------------ -
------------------- --------------- --------------- -
------------------------------------------ ---- -----
-
-绘制图形
在创建了画布之后，就可以开始绘制图形了。DrawingService 提供了多种绘制方法，例如绘制矩形、圆形、直线等。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------------- - ---- -------------------
------------
--------- -----------
--------- ----- ----------------
--
------ ----- ------------ -
------------------- --------------- --------------- -
----- ---- - ------------------------------------- ---- ---- ---- -
----- ------
------- --------
------------ --
---
----- ------ - ---------------------------------- ---- --- -
----- -------
------- --------
------------ --
---
----- ---- - -------------------------------- ---- ---- ---- -
------- --------
------------ --
---
-
-编辑图形
在创建了图形之后，也可以对其进行编辑。DrawingService 提供了多种编辑方法，例如移动、缩放、旋转等。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------------- - ---- -------------------
------------
--------- -----------
--------- ----- ----------------
--
------ ----- ------------ -
------------------- --------------- --------------- -
----- ---- - ------------------------------------- ---- ---- ---- -
----- ------
------- --------
------------ --
---
------------- ----
------------- ---
----------------
-
-事件
DrawingService 还提供了多种事件来响应用户操作，例如 onclick、onmouseover、onmouseout 等。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------------- - ---- -------------------
------------
--------- -----------
--------- ----- ----------------
--
------ ----- ------------ -
------------------- --------------- --------------- -
----- ---- - ------------------------------------- ---- ---- ---- -
----- ------
------- --------
------------ --
---
--------------- -- -
------------------------
---
------------------- -- -
------------------ --------
---
------------------ -- -
------------------ -------
---
-
-总结
angular2-drawing 是一个功能强大的绘图库，可以快速创建出漂亮的 SVG 图形。本文介绍了它的基本使用方法，希望对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562d581e8991b448e02bc