剑客
关注科技互联网

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

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
}

参数说明

参数名 参数示例 参数说明
hover true or false 用于返回是否触摸在线或者点上
type "point" or "line" or "" 用于返回鼠标触摸在什么类型上
id num 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

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址