? image2D : Drawing Two-Dimensional Pictures Using ECMAScript.

作者:心叶
时间:2020-09-01 00:03

  • 开源不易,去Github给个_Star_吧!

image2D logo

downloads install size CDN Version License

? 关于项目

使用ECMAScript绘制二维图片,开发这个库的初衷是希望越来越多的人可以更自由的发挥自己的创意,感受绘图的乐趣,并把积累的经验分享出来,推动库本身的发展,从而不断优化!因此,这个库永远都是自由、开源、讨论和进步的。

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

你可以通过CDN的方式引入(版本历史),在代码中通过image2D或$$调用,当然,你也可以通过npm的方式引入。

npm install --save image2d

安装好了以后,在需要的地方引入即可:

import $$ from 'image2d';

具体的接口或相关说明请查阅接口文档或者在遇到困难的时候通过issue和我们取得联系!

? 图表用例

image2D 用例截图

如果想加入其中可以通过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

Copyright (c) 2018-2020 走一步 再走一步

我还惊讶地意识到, 在我生命中有很多时刻, 每当我遇到一个遥不可及、令人害怕的情境,并感到惊慌失措...

303 声望
114 粉丝
0 条评论
推荐阅读
Audio Editor | 在线H5音频编辑器 - 使用指南
Audio Editor | 在线H5音频编辑器基于一个开源项目:audio.js。第一步:导入需要编辑的音频在浏览器中打开 https://hai2007.github.io/audio-editor/ 这个地址,即可看见下面的界面:然后,点击按钮“点击我选择需...

心叶1阅读 2.9k

封面图
CSS & SVG 绘制写作网格线的3种方式
欢迎关注我的公众号:前端侦探最近有同事问我这样一个问题:需要绘制一个自适应文本的写作网格线,设计稿是这样的其实就是一行行虚线,要求如下虚线的纵向间隔要跟随行高自适应,确保文本在每一栏虚线上虚线后面...

XboxYan7阅读 1.2k

封面图
原来 Canvas 也能直接绘制圆角矩形了
很多时候,在使用 Canvas 绘制圆角矩形都是一件比较麻烦的事,因为之前并没有直接的方法,只能通过直线和圆弧间接组合而成,下面是一个常规绘制方式

XboxYan6阅读 1.8k

封面图
用canvas实现手写签名功能
最近开发网站有一个需求,要求页面上有一块区域,用户能用鼠标在上面写字,并能保存成图片 base64 码放在服务器。这样的需求用 canvas 实现是最好的。需要用到 canvas 的以下几个属性:

谭光志5阅读 4.7k评论 2

three.js简明教程之:【1】入门用例
和直接使用WebGL相比,比如 着色器 ,大部分情况下你无需自己开发,不过,情况并不总是这样,如果你的需求太过特殊,我们依旧可以用更接近原生的方式来绘制,这是一个非常友好的设计。

zxl200707012阅读 403

封面图
svg之viewBox
基本语法首先,我在大小为400 x 400的画布中绘制了一个200 x 200的矩形:可以发现,没有问题。现在,我把svg的宽和高改变后:可以看见,等比例变小了。简单的理解就是:viewBox规范了画布的大小,svg标签里面的内...

zxl200707013阅读 308

封面图
CSS、SVG、Canvas对特殊字体的绘制与导出
欢迎关注我的公众号:前端侦探最近在项目中需要对特殊字体进行绘制与导出,如下简单解释一下:所谓绘制,就是视觉上可以看到就行(预览状态),导出呢,就是将看到的转换成图片(或者Canvas),以便于后续处理。...

XboxYan3阅读 733

封面图

我还惊讶地意识到, 在我生命中有很多时刻, 每当我遇到一个遥不可及、令人害怕的情境,并感到惊慌失措...

303 声望
114 粉丝
宣传栏