i-painter

i-Painter

简化 Canvas 渲染逻辑为初心的轻量级插件。

• 解决了那些问题？
• 应用场景
• 未来构想
• 起步

解决了那些问题？

• 解决移动端 PX 转 REM 后的适配问题
• 解决了不同设备像素比海报生成模糊的问题
• 简化 Canvas 的开发流程

应用场景

• 简单的 Canvas 绘制的需求，譬如生成海报等功能

未来构想

• 当前框架处于 Bate 阶段，需要不断完善，希望做最简单的轻量级的 Canvas 插件

起步

下载安装：

npm install --save i-painter

示例

<!-- index.html -->
<script src="xx/xx/i-painter.js"></script>
<script>
  let Pen = new Painter(el);
</script>

import Painter from "i-painter";
let Pen = new Painter(el);

[JSAPI]

• 当前仅为测试版本，谨慎使用，有任何疑问和建议可以联系我 [e-mail]

绘制图片 drawImage()

Painter.drawImage(string || object);

属性	是否必填	作用
url（string）	√	图片地址
-	-	-
url	√	图片地址
x	×	x 轴坐标，默认值：0
y	×	y 轴坐标，默认值：0
w	×	图片宽度，默认值：画布宽度
h	×	图片高度，默认值：画布高度

绘制文字 drawText()

Painter.drawText(string || object);

属性	是否必填	作用
text（string）	√	文本
-	-	-
text	√	文本
x	×	x 轴坐标，默认值：0
y	×	y 轴坐标，默认值：0
size	×	字体大小：默认值：24
color	×	字体颜色：默认值：#FFFFFF
position	×	字体定位，可选值：left | center | right 默认值：left
hollow	×	是否空心，默认值：false

绘制矩形 drawRect()

Painter.drawRect(object);

属性	是否必填	作用
x	×	x 轴坐标，默认值：0
y	×	y 轴坐标，默认值：0
w	×	宽度，默认值：100
h	×	高度，默认值：100
color	×	颜色：可传 string | array, 默认值：#FFFFFF
radius	×	圆角：默认值：0
hollow	×	是否空心，默认值：false

绘制圆形 drawRound()

Painter.drawRound(object);

属性	是否必填	作用
x	×	x 轴坐标，默认值：0
y	×	y 轴坐标，默认值：0
r	×	半径，默认值：10
border	×	边框，默认值：10
color	×	颜色：可传 string, 默认值：#FFFFFF
hollow	×	是否空心，默认值：false

转换为 Base64 getDataURL()

Painter.getDataURL();

下载图片 toDownload()

Painter.toDownload(filename);

属性	是否必填	作用
filename	×	下载图片名，默认值：i-painter

转换为 Img 元素 toElementImage()

Painter.toElementImage();

• 当前仅为测试版本，谨慎使用，有任何疑问和建议可以联系我 [e-mail]