ben-sketch

screen shot

arrow

line

rect

text

ease

ellipse

Usage

import js and set a div element for init the sketch instance.

// html
<script type="text/javascript" src="//{you path to the dist file}/dist/sketch.js"></script>
<div id="sketch"></div>

// js
const options = {
    container: document.getElementById('sketch')
}
const sketch = new Sketch(options);

Options

| Options | Type | Example | description | | ------ | --------- | ----------- | --------- | | container | DOM (require) | document.getElementById('sketch') | 用来实例化的DOM节点 | | textSize | Int | 14（default） | 设置文字工具的文字大小 | | textLineHeight | Int | 18 (default) | 设置文字工具的文字行高 |

Api Method

| method | arguments | description | | ------ | --------- | ----------- | | setTool(Enum toolName) | Enum('line', 'rect', 'text', 'ease', 'ellipse') | Set the current tool of sketch instance | | setColor(String color) | String 'rgb(0,255,255)' or '#ff0' or 'rgba(255,255,255,0.5)' | Set the current color of sketch instance | | clear | (empty) | Clear all draws of the sketch instance | | draw(type, options) | | Draw the data to sketch |

example

const sketch = new Sketch({
    container: containerEl
});

sketch.setTool('rect'); // Set the tool to rectangle.
sketch.setColor('rgba(255,0,0,0.5)');  // Set the color to red with 50% opacity.
sketch.clear(); // Clear the sketch

Event

| eventName | callback arguments | Descriptions | | --------- | ------------------ | ------------ | | line | data | Emit when a line was drawed | | rect | data | Emit when a rect was drawed | | text | data | Emit when a text was drawed | | ease | data | Emit when a ease action happend | | ellipse | data | Emit when a ellipse action happend | | arrow | data | Emit when a ellipse action happend |

example

const sketch = new Sketch({
    container: containerEl
});

sketch.on('line', (data) => {
    // ...   You can done anything with the line data. 
    // The data include all the points of the line.
});

sketch.on('rect', (data) => {
    // ...   You can done anything with the rect data. 
    // The data include the rect's position, width, height, etc.
});

// ...

Change Log

1.3.5 (2017-05-15)

• [feature] 增加拖动绘制箭头图形的方法。

1.3.3 (2017-10-11)

• [optimize] 文字工具，绘图数据添加width、height两个数据。

1.3.0 (2017-09-30)

• [feature] 增加通过拖动绘制椭圆的方法。

1.2.6 (2017-09-13)

• [feature] 文字的字体选择在不同平台上表现差不多的字体。
• [feature] 更新对 ben-canvas 的版本依赖。

1.2.5 (2017-09-06)

• [feature] 实现文字输入的大小行高可配置。

1.2.4 (2017-09-04)

• [optimize] 文字在输入的过程中，颜色也会根据当前颜色显示。

1.2.2 (2017-08-24)

• [optimize] 提供一种没有选中工具的状态，对鼠标动作不做任何的处理。并且完成实例化后的默认状态为空。

1.2.0 (2017-08-24)

• [bugfix] 在设置为不支持的工具类型时导致的事件监听器报错的问题。
• [bugfix] 修复在通过调用 resize 来响应窗口变化时，绘图层不会同步变化而带来的绘图出现偏移的问题。
• [bugfix] 修复鼠标移出绘图区域橡皮擦工具会重复多次的bug。
• [bugfix] 提高最外层容器的z-index，使之不会被覆盖。
• [bugfix] 修复鼠标移出绘画区域，绘制动作没有终止的bug。
• [optimize] 修改绘图策略，采用常驻的绘图层，不再临时生成绘图层，完成后再删掉，会有一定的性能上的提升。
• [optimize] 屏蔽鼠标右键，只支持鼠标左键点击绘图。
• [optimize] 添加文字工具和橡皮工具的鼠标样式。
• [optimize] 添加自动发布脚本。
• [feature] 新增 width 和 height 两个可选参数来定义绘图区域的大小，不传会使用container.clientWidht 和 container.clientHeight 作为绘图区域的大小。

1.1.0 (2017-08-07)

• [feature] 提供颜色设置功能。
• [feature] Add example and screenshot to README.md
• [feature] 提供编译后的文件，无需使用者配置编译环境。
• [feature] 提供开发和打包的 webpack 配置。
• [bugfix] 修复因为内部 canvas 的样式定位问题导致的不能绘图的bug。
• [bugfix] 修复在firfox 浏览器下绘制文字位置错乱的问题。
• [bugfix] 更新 ben-canvas 的版本依赖，修复重复划线或者重复擦除的bug。
• [bugfix] 修复 package 中遗漏样式文件的bug。

1.0.0 (2017-08-03) 👏

• [feature] 完成基本的画图功能组件。

Contact

Author: Ben Chen

E-mail: [email protected]

Contributor: 高勇

E-mail: [email protected]