canvasplot

v1.1.8

Published

2 years ago

canvas canvasPlot

Downloads

0High
0Medium
0Low

gjtool

canvas canvasplot canvasPlot rect

canvasPlot

canvasplot.js canvas绘制矩形，拖动缩放，删除。

在线示例

https://www.gjtool.cn/canvasplot/index.html

快速使用（有两种方式）

一、script标签引入方式

<div id="demo" style="width:500px;height:500px;"></div>

3.引入js

<script src="canvasPlot.min.js" type="text/javascript" charset="utf-8"></script>

4.实例化

var canvasPlot = new CanvasPlot({
	parentNode: document.querySelector("#demo"),
	width: 500,
	height: 500,
	imagePath: '3.jpg'
});

二、npm安装方式

1.安装

npm install canvasplot

2.使用

<template>
  <div id="app">
	<div id="demo" style="width:500px;height:500px;"></div>
  </div>
</template>
<script>
import CanvasPlot from "canvasplot";
export default {
    name: 'App',
	data() {
	  return {
	  };
	},
	mounted() {
		var canvasPlot = new CanvasPlot({
			parentNode: document.querySelector("#demo"),
			width: 500,
			height: 500,
			imagePath: '3.jpg'
		});

		canvasPlot.addRect({
			x: 212,
			y: 119,
			w: 50,
			h: 50
		});
		canvasPlot.addRect({
			x: 280,
			y: 126,
			w: 60,
			h: 30
		});
		canvasPlot.drawRectBegin();
		canvasPlot.on("drawFinish",function(){
			//somecode
		})
	}
}
</script>

options配置项参数列表

|参数名称 |类型 |取值 |是否必须 |作用 | |:---: |:---: |:---: |:---: |:---: | |parentNode | HTMLelement | - | √ |canvasPlot的父元素 | |width | Number | - | - |canvasPlot的宽，不填默认跟随父元素宽度 | |height | Number | - | - |canvasPlot的高，不填默认跟随父元素高度 | |imagePath | String | - | √ |canvasPlot的图片路径 | |showMenu | Boolean | - | - |是否显示右键菜单 | |rectBgColor | String | - | - |rect矩形内部填充颜色，不填默认中间透明 | |dragMoveButton | String | rightClick / midddleClick | - |右键拖动画布或者中键拖动画布 |

methods 方法列表

|方法名 |传参 |传参取值 |作用 | |:---: |:---: |:---: |:---: | |addRect | Object |{x:10,y:10,w:40,h:40} |手动添加矩形 | |delPlot | Object |plot |删除plot，不传参默认删除所有plot | |drawRectBegin | - |- |开始绘制矩形 | |drawRectFinish | - |- |结束绘制矩形 | |setCanvasDragZoom | Boolean |true/false |设置允许拖动缩放 | |getPlotCaches | - |- |获取绘制的plot数据缓存 | |getSelection | - |- |获取当前选中的plot | |getOffset | - |- |获取当前canvas偏移值，放大比例{scale:1,x:0,y:0} | |setOffset | Object |{scale:1,x:0,y:0} |设置当前canvas偏移值，放大比例 | |getData | - |-|获取canvasPlot的默认绘制plot数据,偏移值和缩放比例。{offset:{scale:1,x:0,y:0},data:[]} | |setData | Object |{offset:{scale:1,x:0,y:0},data:[]} |canvasPlot的默认绘制plot数据,偏移值和缩放比例（可以用来回显上次的数据 | |screenshot | String |jpg/png等图片格式 |当前canvas截图，返回base64 | |downLoad | String |jpg/png等图片格式 |当前canvas截图，下载下来成为图片文件 | |on | (String, Function, Boolean)|String：监听的事件名，Function：监听的事件回调, Boolean: 为true时，不可与同类型的事件共存，当前事件函数会覆盖前面同类型的事件 |on方法监听所有事件，所有类型事件默认可以同时存在多个，触发事件时会同时执行| |off| (String, Function)|String：要卸载的事件名，Function：要卸载的事件函数 |off方卸载on监听的所有事件，第一个参数为true时，卸载所有on监听的事件。第二个参数为空时，卸载第一个参数的同类型的所有事件| |clear | - |- |清除画布内容 | |setImage | (String, Number,Number) |String：图片地址，x，y设置当前图片的位置，可选 |设置当前背景图 | |destroy | - |- |销毁实例 |

on方法监听所有事件-事件名列表

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme