canvasPlot

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

• canvasplot博客主页

• canvasplot项目GitHub地址

• canvasplot项目gitee地址

在线示例

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配置项参数列表

methods 方法列表

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