markline.js 一个轻量级 canvas 画 markline 标记线的库

markline js A simple & light js for painting marklines 这是一个轻量的、无依赖的canvas库。使用它你

markline.js

A simple & light js for painting marklines.

markline.js 一个轻量级 canvas 画 markline 标记线的库

这是一个轻量的、无依赖的canvas库。使用它你能够快速画出漂亮的矢量标线(markline)。

特性

  • 支持缩放、拖动
  • 支持背景图放置类型有img和canvas
  • 无依赖、轻量(min版仅9kb)

示例

DEMO

html

<link rel="stylesheet" type="text/css" href="markline.css">

<script type="text/javascript" src="markline.min.js"></script>

...

<canvas id="canvas" width="1366" height="768"></canvas>

<img id="bg" src="bg.jpg"></img>

准备一个canvas容器,以及一个背景(可以是图片也可以是canvas)(如果不提供背景将会自动用黑色背景填充)

data

var data = [{

from: { x: 300, y: 50 },

to: { x: 50, y: 300 },

style: '#fff',

info: ['Hi,this is markline!']

},{

...

}]

准备好在图上描的线的两端坐标以及线的颜色,和鼠标hover上去后提示的信息

js

var mkLine = markline('canvas','bg',1366,768);

mkLine.setOption(data);

mkLine.paint();

使用 .setOption()

的方法将数据导入,调用 .paint()

方法画出markline

Done.

说明文档

方法

markline()

用于生成markline对象

参数说明

参数名是否必须参数说明
canvasId提供所需绘制的canvas元素的id名
bgId提供一个绘制的背景图的id名(img、canvas皆可)
bgWidth提供绘制背景图的宽度(不提供将默认使用canvas宽度)
bgHeight提供绘制背景图的宽度(不提供将默认使用canvas高度)

示例

var mkLine = markline('canvas','bgId',1366,768);

方法

.setOption(json)

用于导入绘制的信息

参数说明

参数名是否必须参数说明
from提供绘制起点的x和y坐标
to提供绘制终点的x和y坐标
style提供markline的颜色(不提供将默认使用白色)
info提供鼠标hover上markline显示的信息(不提供将不显示)

示例

mkLine.setOption([{

from: { x: 300, y: 50 },

to: { x: 50, y: 300 },

style: '#fff',

info: ['Hi,this is markline!']

},{

from: { x: 100, y: 100 },

to: { x: 50, y: 300 },

style: '#000',

info: ['Hi,this is another markline!']

}])

注意: 先要通过 .setOption()

将数据导入后,调用该方法才可以绘出markline

方法

.paint()

用于绘制markline

参数说明

无参数

示例

mkLine.paint()

注意: 先要通过 .setOption()

将数据导入后,调用本方法才可以绘出markline

方法

.paintPoint(json)

用于绘制标记点

参数说明

参数名是否必须参数说明
x提供绘制标记点的x坐标
y提供绘制标记点的y坐标
style提供绘制点的颜色(不提供将默认使用红色)
info提供鼠标hover上绘制点显示的信息(不提供将不显示)

示例

mkLine.paintPoint([{

x: 300,

y: 50,

style: '#fff',

info: ['Hi,this is markline!']

},{

x: 200,

y: 100,

style: '#000',

info: ['Hi,this is another markline!']

}])

注意: 先要调用 .paint()

方法,再调用本方法才可以绘出标记点

方法

.getLines()

用于返回各个markline标记线的对象信息

返回类型

json

示例

[Line,Line,Line...]

使用

var lines = mkLine.getLines();

lines[0].style = 'red'; //修改第一条标记线的颜色为红色

方法

.getLine(id)

用于返回确定id的markline标记线的对象信息

返回类型

Object

使用

var line = mkLine.getLine(0);

line.style = 'red'; //修改第一条标记线的颜色为红色

方法

.getBalls()

用于返回各个markline标记线上运动点的对象信息

返回类型

json

示例

[Ball,Ball,Ball...]

使用

var balls = mkLine.getBalls();

balls[0].style = 'red'; //修改第一条标记线的运动点的颜色为红色

方法

.getBall(id)

用于返回确定id的markline标记线的运动点的对象信息

返回类型

Object

使用

var ball = mkLine.getBall(0);

ball.style = 'red'; //修改第一条标记线的运动点的颜色为红色

方法

.getPoints()

用于返回各个标记点的对象信息

返回类型

json

示例

[Point,Point,Point...]

使用

var points = mkLine.getPoints();

points[0].style = '#fff'; //修改第一个标记点的颜色为白色

方法

.getPoint(id)

用于返回确定id的标记点的对象信息

返回类型

Object

使用

var point = mkLine.getPoint(0);

point.style = '#fff'; //修改第一个标记点的颜色为白色

方法

.getHover()

用于返回当鼠标在线或者点上时的相关信息

返回类型

Object

示例

{

hover: false,

type: "",

id: null

}

参数说明

参数名参数示例参数说明
hovertrue or false用于返回是否触摸在线或者点上
type"point" or "line" or ""用于返回鼠标触摸在什么类型上
idnum or null用于返回触摸上的线或者点的id

使用

var isHover = mkLine.getHover()

console.log(isHover);

Tips:通常和 .onContextmenu()

或者 .onClick()

事件进行配合使用

方法

.onClick(callback)

当鼠标在所绘制的canvas上左键单击时触发的事件

使用

mkLine.onClick(function(){

var e = window.event;

var canvas = document.getElementById("canvas");

var mouse = {

x : e.clientX - canvas.getBoundingClientRect().left,

y : e.clientY - canvas.getBoundingClientRect().top

};

var isHover = mkLine.getHover();

console.log(isHover);

});

Tips:通常和 .getHover()

事件进行配合使用

方法

.onContextmenu(callback)

当鼠标在所绘制的canvas上右击时触发的事件

使用

mkLine.onContextmenu(function(){

var e = window.event;

var canvas = document.getElementById("canvas");

var mouse = {

x : e.clientX - canvas.getBoundingClientRect().left,

y : e.clientY - canvas.getBoundingClientRect().top

};

var isHover = mkLine.getHover();

console.log(isHover);

});

Tips:通常和 .getHover()

事件进行配合使用

修改鼠标hover的提示样式

只需要更改markline.css里的 #mk-info

#mk-info div

的样式即可。

License

MIT

Copyright (c) 2016 Molunerfinn

未登录用户
全部评论0
到底啦