canvasplot

    0.0.4 • Public • Published

    canvasPlot

    npm version npm downloads npm downloads MIT GitHub issues GitHub stars GitHub forks

    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的图片路径

    methods 方法列表

    方法名 传参 传参取值 作用
    addRect Object {x:10,y:10,w:40,h:40} 手动添加矩形
    delPlot Object 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监听的事件

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

    事件名 作用
    drawFinish 监听canvasPlot绘制完成
    dragMoveFinish 监听canvasPlot拖拽完成

    Install

    npm i canvasplot

    DownloadsWeekly Downloads

    2

    Version

    0.0.4

    License

    MIT

    Unpacked Size

    32.4 kB

    Total Files

    6

    Last publish

    Collaborators

    • gjtool