一个canvas绘制矩形的插件，自由拖动缩放

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

canvasplot博客主页

canvasplot项目GitHub地址

canvasplot项目gitee地址

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

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