关于图片:????-image2D-Drawing-TwoDimensional-Pictures-Using-ECMAScript

作者：心叶
工夫：2020-09-01 00:03

???? 对于我的项目

应用ECMAScript绘制二维图片,开发这个库的初衷是心愿越来越多的人能够更自在的施展本人的创意，感触绘图的乐趣，并把积攒的教训分享进去，推动库自身的倒退，从而一直优化！因而，这个库永远都是自在、开源、探讨和提高的。

<script src="https://cdn.jsdelivr.net/npm/image2d@1.8.9/build/image2D.min.js"></script>

你能够通过CDN的形式引入（版本历史），在代码中通过image2D或$$调用，当然，你也能够通过npm的形式引入。

npm install --save image2d

装置好了当前，在须要的中央引入即可：

import $$ from 'image2d';

具体的接口或相干阐明请查阅接口文档或者在遇到困难的时候通过issue和咱们取得联系！

如果想退出其中能够通过issue分割咱们,这是在线地址

上面咱们来演示如何绘制一个圆弧（更简单的图形，比方树图、地图等请通过教程进行学习）！

绘图的第一步当然是获取画笔了，画笔分为两种：Canvas2D 和 SVG，咱们来看看具体的代码：

// 咱们假设咱们当初在页面有一个canvas标签：<canvas id='painter'></canvas>
var painter=$$('#painter').attr({
  "width":300,
  "height":300
}).painter();

下面的$$(‘#painter’)返回一个 image2D 对象，通过 ID 选择器查找结点，咱们设置了画布的大小，而后调用对象上的 painter 办法就能够获取画笔了。

如何判断画笔的类型？如果结点是 canvas 获取的就是 Canvas2D 画笔，如果结点是 SVG 获取的就是 SVG 画笔，因而这里是Canvas2D画笔。

不论是什么画笔，都一样能够进行配置（当然有缺省值），比方画笔的粗细，色彩等，上面来配置圆弧的色彩和线条粗细和类型：

painter.config({
  'strokeStyle':'red',
  'lineWidth':3,
  'lineDash':[5]
});

画笔获取并配置好了当前，间接调用画笔上的办法即可绘图：

painter.strokeArc(150, 150, 100, 130, Math.PI/2, Math.PI/2*3);

这样，一个圆弧就绘制好了，能够点击此次查看运行成果。

怎么样？是不是很简略，尽管间接应用 Canvas2D 或 SVG 也能够实现，不过借助这个库绘图会更简略（咱们次要解决了浏览器兼容和简单计算上的问题，并使得SVG和Canvas2D绘图习惯保持一致，同时形象了局部有用的概念）。

你能够把更多的精力放在绘制出更乏味的作品上（如果借助本库开发了乏味的作品，能够去这里增加，如果应用过程中有好的意见，能够来issue中提出）。

MIT