Canvas_draw_rect NPM

使用 canvas 绘制矩形框

类使用方法：

import Zksy from 'canvas_draw_rect'

const marker = new Zksy('box',{
    	color:'red'， // 设置所有框的颜色，默认红色
    	lineHeight:2 // 设置所有框的线宽，默认2
        rectData:[
          {
    		color:'', // 设置单独框的颜色
    		lineHeight：0 // 设置单独框的线宽
            serviceData:[[40,40,100,100],[80,80,100,100]] // 设置数据格式[[x坐标，y坐标，宽，高]]
        },
        ]
    })

 方法：
 // 根据盒子的宽高计算出比例，得出真实展示在画布上的坐标,type包括0和1，0是标准坐标格式[x,y,width,height],1是四个坐标格式[[480, 96], [480, 243], [950, 243], [950, 96]]
 marker.computeRationCoord(serviceData,type)
 marker.setServiceData([120,120,100,100]) // 绘制矩形框
 marker.remove() // 删除所欲绘制的矩形框

Vue 组件使用方法：

<template>
    <div class=“box”>
        <video></video>
		 <DrawGraph
          :listData="videoArrListData2" // 数据
          :serviceDataType="1" // 数据格式类型
          :algWidthAndHeight="[1920, 1080]" // 算法提供的宽高
          color="#07bd07"
        ></DrawGraph>

    </div>
</template>

<script>
    export default {
        data(){
            return{
             videoArrListData2:[
              [21, 282],
              [21, 432],
              [90, 432],
              [90, 282],
            ]
            }
        }
    }
</script>

<style lang="scss" scoped>
    .box{
  position: relative;
  width: 960px;
  height: 540px;
    }
</style>
import { DrawGraph } from 'canvas_draw_rect'

使用技术: