vue3标注ailabel

已于 2024-01-25 15:14:25 修改
阅读量3.9k 收藏 18
点赞数 5
分类专栏： vue 文章标签： vue.js 前端 javascript
于 2022-06-22 09:43:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Tanjc518/article/details/125403313
版权 
<template>
  <div class="label_main">
    <div class="labek_operation">
      <div class="button-wrap">
        <el-button type="primary" class="label_btn" @click="restoration()">图像居中</el-button>
        <el-button type="primary" class="label_btn" @click="zoomIn()">图像放大</el-button>
        <el-button type="primary" class="label_btn" @click="zoomOut()">图像缩小</el-button>
        <el-button type="primary" class="label_btn" @click="setMode('PAN')">移动</el-button>
        <!-- <el-button type="primary" class="label_btn" @click="setMode('MARKER')" >注记</el-button> -->
        <el-button type="primary" class="label_btn" @click="setMode('POINT')">点</el-button>
        <el-button type="primary" class="label_btn" @click="setMode('LINE')">线段</el-button>
        <!-- <el-button type="primary" class="label_btn" @click="setMode('POLYLINE')" >多段线</el-button> -->
        <el-button type="primary" class="label_btn" @click="setMode('CIRCLE')">圆</el-button>
        <el-button type="primary" class="label_btn" @click="setMode('RECT')">矩形</el-button>
        <el-button type="primary" class="label_btn" @click="setMode('POLYGON')">多边形</el-button>
        <!-- <el-button type="primary" class="label_btn" @click="Fill()" >填充</el-button> -->
        <!-- <el-button type="primary" class="label_btn" @click="Revoke()">撤销</el-button> -->
        <el-button type="primary" class="label_btn" @click="getFeatures()">获取标注数据</el-button>
        <!-- <el-button type="primary" class="label_btn" @click="setMode('DRAWMASK')" >涂抹</el-button> -->
        <!-- <el-button type="primary" class="label_btn" @click="setMode('CLEARMASK')" >擦除</el-button> -->
        <!-- <el-button type="primary" class="label_btn" @click="getRle()">获取rle数据</el-button>   -->
        <!-- <el-button type="primary" class="label_btn" @click="setGraph()" >手动设置坐标</el-button> -->
      </div>
    </div>
    <div class="main_map" ref="main_map">
    </div>
  </div>
</template>
 
<script>
import AILabel from "ailabel";
import { reactive, toRefs, onBeforeMount, onMounted, watch, onBeforeUnmount, ref } from 'vue'
// 导入toRaw函数
import { toRaw } from '@vue/reactivity';
import { ElMessageBox, ElMessage } from 'element-plus';

export default {
  name: "LabelTemplate",
  props: ['imgUrl', 'divId'],
  setup (props, context) {
    //动态添加视图
    const main_map = ref(null)
    const mountEle = document.createElement("div");
    mountEle.id = props.divId
    mountEle.style.overflow = 'hidden';
    mountEle.style.position = 'relative';
    mountEle.style.height = '450px';
    mountEle.style.width = '650px';
    mountEle.style.border = '1px dashed #ccc';

    const state = reactive({
      imgUrl: props.imgUrl,
      divId: props.divId,
      drawingStyle: {},
      mode: "",
      itemName: "",
      editId: "", //待填充图形id
      deleteIconId: "delete01",
      gMap: null, //AILabel实例
      gFirstFeatureLayer: null, //矢量图层实例(矩形，多边形等矢量)
      allFeatures: null, //所有features
      gFirstImageLayer: null, //图层
      nHeight: '',
      nWidth: '',
      centerObj: {},
      gFirstTextLayer: null, //文本
      gFirstMaskLayer : null, //涂抹层
    })

    onBeforeMount(() => {
    })
    onMounted(() => {
      main_map.value.appendChild(mountEle)
      //获取图片原宽高
      getImageWH()
      //初始化实例
      initMap()
      //添加事件
      addEvent();
      //图片层添加
      setGFirstImageLayer()
      //添加矢量图层
      setGFirstFeatureLayer()
      // 添加 text 文本图层，用于展示文本
      setGFirstTextLayer()
      //初始化涂抹层
      setGFirstMaskLayer()
     

      // AILabel.Map设置绘制过程中十字丝关闭
      // gMap.disableDrawingCrosshair();

      // 禁用绘制时鼠标达到边界外自动平移
      // gMap.disablePanWhenDrawing();

      //禁用绘制时可鼠标滑轮缩放
      // gMap.disableZoomWhenDrawing()

      window.onresize = function () {
        state.gMap && state.gMap.resize();
      };
    })
    onBeforeUnmount(() => {
      state.gMap.destroy();
    })
    watch(() => state.mode, (newVal, oldVal) => {
      console.log('新的值mode:', newVal, '旧的mode:', oldVal,);
      state.gMap.setMode(newVal);
      setDrawingStyle(newVal);
    })
    watch(() => props.imgUrl, (newVal, oldVal) => {
      console.log('新的值imgUrl:', newVal, '旧的imgUrl:', oldVal,);
      state.imgUrl = newVal
      //获取图片原宽高
      getImageWH()
      //重新设置图片
      setGFirstImageLayer()
      //添加矢量图层
      setGFirstFeatureLayer()
      // 添加 text 文本图层，用于展示文本
      setGFirstTextLayer()
      //刷新map
      state.gMap.refresh();
    })
    // 初始化实例
    const initMap = () => {
      const gMap = new AILabel.Map(state.divId, {
        center: state.centerObj, // 为了让图片居中
        zoom: 500, //初始缩放级别
        mode: "PAN", // 绘制线段
        refreshDelayWhenZooming: true, // 缩放时是否允许刷新延时，性能更优
        zoomWhenDrawing: false, //绘制时可滑轮缩放
        panWhenDrawing: true, //绘制时可到边界外自动平移
        zoomWheelRatio: 5, // 控制滑轮缩放缩率[0, 10), 值越小，则缩放越快，反之越慢
        withHotKeys: true, // 关闭快捷键
      });
      state.gMap = gMap;
    }
    // 初始样式
    const setDrawingStyle = (mode) => {
      let drawingStyle = {};
      switch (mode) {
        //平移
        case "PAN": {
          break;
        }
        //注记
        case "MARKER": {
          // 忽略
          break;
        }
        //点
        case "POINT": {
          state.drawingStyle = { fillStyle: "#FF8C00" };
          state.gMap.setDrawingStyle(drawingStyle);
          break;
        }
        //圆
        case "CIRCLE": {
          state.drawingStyle = {
            fillStyle: "#87CEFF",
            fill: true, //是否填充 
            strokeStyle: "#87CEFF",
            globalAlpha: 0.3,
            lineWidth: 2,
          };
          state.gMap.setDrawingStyle(drawingStyle);
          break;
        }
        //线段
        case "LINE": {
          state.drawingStyle = {
            strokeStyle: "#BA55D3",
            lineJoin: "round",
            lineCap: "round",
            lineWidth: 10,
            arrow: false,
          };
          state.gMap.setDrawingStyle(drawingStyle);
          break;
        }
        //多线段
        case "POLYLINE": {
          state.drawingStyle = {
            strokeStyle: "#FF1493",
            lineJoin: "round",
            lineCap: "round",
            lineWidth: 10,
          };
          state.gMap.setDrawingStyle(drawingStyle);
          break;
        }
        //矩形
        case "RECT": {
          state.drawingStyle = {
            strokeStyle: "#0f0",
            lineWidth: 1,
            fillStyle: '#00f',
            fill: true, //是否填充 
            globalAlpha: 0.3,
            stroke: true,
          };
          state.gMap.setDrawingStyle(drawingStyle);
          break;
        }
        //多边形
        case "POLYGON": {
          state.drawingStyle = {
            strokeStyle: "#0099CC", //边框颜色
            fill: true, //是否填充
            fillStyle: "#FF6666", //填充色
            globalAlpha: 0.3,
            lineWidth: 3,
            stroke: true,
          };
          state.gMap.setDrawingStyle(drawingStyle);
          break;
        }
        //涂抹
        case "DRAWMASK": {
          state.drawingStyle = {
            strokeStyle: "rgba(255, 0, 0, .5)",
            fillStyle: "#00f",
            lineWidth: 50,
          };
          state.gMap.setDrawingStyle(drawingStyle);
          break;
        }
        //擦除
        case "CLEARMASK": {
          state.drawingStyle = { fillStyle: "#00f", lineWidth: 30 };
          state.gMap.setDrawingStyle(drawingStyle);
          break;
        }
        default:
          break;
      }
    }
    //添加 text 文本图层，用于展示文本
    const setGFirstTextLayer = () => {
      const gFirstTextLayer = new AILabel.Layer.Text(
        'first-layer-text', // id
        { name: '第一个文本图层' }, // props
        { zIndex: 12, opacity: 1 } // style
      )
      state.gMap.addLayer(gFirstTextLayer)
      state.gFirstTextLayer = gFirstTextLayer
    }
    //添加 涂抹层
    const setGFirstMaskLayer = () => {
      const gFirstMaskLayer = new AILabel.Layer.Mask(
            'first-layer-mask', // id
            {name: '第一个涂抹图层'}, // props
            {zIndex: 11, opacity: .5} // style
        );
      state.gMap.addLayer(gFirstMaskLayer);
      state.gFirstMaskLayer = gFirstMaskLayer 
    }
    //添加矢量图层
    const setGFirstFeatureLayer = () => {
      // 添加矢量图层
      const gFirstFeatureLayer = new AILabel.Layer.Feature(
        "first-layer-feature", // id
        { name: "第一个矢量图层" }, // props
        { zIndex: 10 } // style
      );
      state.gFirstFeatureLayer = gFirstFeatureLayer;
      state.gMap.addLayer(gFirstFeatureLayer);
    }
    // 图片层添加
    const setGFirstImageLayer = () => {
      // 图片层添加
      const gFirstImageLayer = new AILabel.Layer.Image(
        "first-layer-image", // id
        {
          src: state.imgUrl,
          width: state.nWidth,
          height: state.nHeight,
          crossOrigin: false, // 如果跨域图片，需要设置为true
          position: {
            // 左上角相对中心点偏移量
            x: 0,
            y: 0,
          },
          // 网格
          grid: {
            // 3 * 3
            // columns: [{ color: "#9370DB" }, { color: "#FF6347" }],
            // rows: [{ color: "#9370DB" }, { color: "#FF6347" }],
          },
        }, // imageInfo
        { name: "第一个图片图层" }, // props
        { zIndex: 5 } // style
      );

      // 添加到gMap对象
      state.gMap.addLayer(gFirstImageLayer);
      state.gFirstImageLayer = gFirstImageLayer
    }

    //获取原图宽度高度
    const getImageWH = () => {
      let nWidth = 500
      let nHeight = 300
      let centerObj = { x: 250, y: 150 }
      // 创建对象
      var img = new Image()
      // 改变图片的src
      img.src = state.imgUrl
      //根据原图宽高展示全部内容
      if (img.width / nWidth == img.height / nHeight) {
        nWidth = 500
        nHeight = 300
        centerObj = { x: 250, y: 150 }
      } else if (img.width >= nWidth) {
        nWidth = (nWidth / img.width) * img.width
        nHeight = (nWidth / img.width) * img.height
        centerObj.y = nHeight / 2
      } else if (img.height >= nHeight) {
        nWidth = (nHeight / img.height) * img.width
        nHeight = (nHeight / img.height) * img.height
        centerObj.x = nWidth / 2
      } else if (img.height < nHeight || img.width < nWidth) {
        nHeight = 300
        nWidth = img.width * (300 / img.height)
        centerObj.x = nWidth / 2
        centerObj.y = nHeight / 2
      }
      state.centerObj = centerObj
      state.nWidth = nWidth
      state.nHeight = nHeight
      return { nWidth, nHeight, centerObj }
    }

    // 获取所有features
    const getFeatures = () => {
      state.allFeatures = state.gFirstFeatureLayer.getAllFeatures();
      console.log("--allFeatures--", toRaw(state.allFeatures));
      toRaw(state.allFeatures).forEach((e, i) => {
        console.log(`第${i}条:`, e);
      })
    }

    // 添加图形
    const addFeature = (data, type, id) => {
      let drawingStyle = state.drawingStyle;
      let name = id
      id = `${id}${new Date().valueOf()}`
      console.log(data, '===', type);
      //线
      if (type === "LINE") {
        const scale = state.gMap.getScale();
        const width = drawingStyle.lineWidth / scale;
        const lineFeature = new AILabel.Feature.Line(
          id, // id
          { ...data, width }, // shape
          { name, textId: id }, // props
          drawingStyle // style
        );
        state.gFirstFeatureLayer.addFeature(lineFeature);
        // 多边形 添加 文本
        const textPosition = setText(data, type)
        addLayerText(id, name, textPosition)
      }
      //线段
      else if (type === "POLYLINE") {
        const scale = state.gMap.getScale();
        const width = drawingStyle.lineWidth / scale;
        const polylineFeature = new AILabel.Feature.Polyline(
          id, // id
          { points: data, width }, // shape
          { name, textId: id }, // props
          drawingStyle // style
        );
        state.gFirstFeatureLayer.addFeature(polylineFeature);
        // 多边形 添加 文本
        const textPosition = setText(data, type)
        addLayerText(id, name, textPosition)
      }
      //矩形
      else if (type === "RECT") {
        const rectFeature = new AILabel.Feature.Rect(
          id, // id
          data, // shape
          { name, textId: id }, // props
          drawingStyle // style
        );
        state.gFirstFeatureLayer.addFeature(rectFeature);
        // 多边形 添加 文本
        const textPosition = setText(data, type)
        addLayerText(id, name, textPosition)
      }
      //多边形
      else if (type === "POLYGON") {
        const polygonFeature = new AILabel.Feature.Polygon(
          id, // id
          { points: data }, // shape
          { name, textId: id }, // props
          drawingStyle // style
        );
        state.gFirstFeatureLayer.addFeature(polygonFeature);
        // 多边形 添加 文本
        const textPosition = setText(data, type)
        addLayerText(id, name, textPosition)
      }
      //点
      else if (type == "POINT") {
        const gFirstFeaturePoint = new AILabel.Feature.Point(
          id, // id
          { x: data.x, y: data.y, r: 5 }, // shape
          { name, textId: id }, // props
          { fillStyle: "#FF8C00", zIndex: 5, lineWidth: 2 } // style
        );
        state.gFirstFeatureLayer.addFeature(gFirstFeaturePoint);
        // 多边形 添加 文本
        const textPosition = setText(data, type)
        addLayerText(id, name, textPosition)
      }
      //注记
      else if (type == "MARKER") {
        const gFirstMarker = new AILabel.Marker(
          id, // id
          {
            src: "http://ailabel.com.cn/public/ailabel/demo/marker.png",
            position: {
              // marker坐标位置
              x: data.x,
              y: data.y,
            },
            offset: {
              x: -16,
              y: 32,
            },
          }, // markerInfo
          { name: "第一个marker注记", textId: id } // props
        );
        state.gFirstFeatureLayer.addFeature(gFirstMarker);
        // 多边形 添加 文本
        const textPosition = setText(data, type)
        addLayerText(id, name, textPosition)
      }
      //圆
      else if (type == "CIRCLE") {
        const gFirstFeatureCircle = new AILabel.Feature.Circle(
          id, // id
          { cx: data.cx, cy: data.cy, r: data.r }, // shape
          { name, textId: id }, // props
          {
            fillStyle: "#87CEFF",
            strokeStyle: "#3CB371",
            fill: true, //是否填充
            globalAlpha: 0.3,
            lineWidth: 2,
          } // style
        );
        state.gFirstFeatureLayer.addFeature(gFirstFeatureCircle);
        // 多边形 添加 文本
        const textPosition = setText(data, type)
        addLayerText(id, name, textPosition)
      }
      //涂抹
      else if (type == "DRAWMASK") {
        const drawMaskAction = new AILabel.Mask.Draw(
          `${+new Date().valueOf()}`, // id
          "铅笔",
          { points: data, width: 5 }, // shape
          { name: "港币", price: "1元", textId: id }, // props
          { strokeStyle: "#FF0000" } // style
        );
        state.gFirstFeatureLayer.addAction(drawMaskAction);
      }
      //擦除
      else if (type == "CLEARMASK") {
        const clearMaskAction = new AILabel.Mask.Clear(
          "first-action-clear", // id
          { points: data, width: 5 } // shape
        );
        state.gFirstMaskLayer.addAction(clearMaskAction);
      }
      getFeatures();
    }

    // 画完取名
    const getName = async (mode) => {
      console.log(mode);
      try {
        const { value } = await ElMessageBox.prompt("请输入填写名字", {
          confirmButtonText: "确定",
          showCancelButton: false,
          inputValidator: (v) => {
            if (v) {
              return true
            } else {
              return '请填写名字'
            }
          }
        });
        if (value) {
          state.itemName = value;
          return value;
        } else {
          return ''
        }
      } catch {
        return null;
      }
    }

    // 增加删除图标
    const addDeleteIcon = (feature, shape) => {
      // 添加delete-icon
      console.log(shape, "shape");
      let x = (shape?.x || shape?.cx || shape?.start?.x || shape?.points[0].x) + (shape?.width || shape?.r || 0)
      let y = (shape?.y || shape?.cy || shape?.start?.y || shape?.points[0].y) - 15
      const gFirstMarker = new AILabel.Marker(
        state.deleteIconId, // id
        {
          src: "https://s1.ax1x.com/2022/06/20/XvFRbT.png",
          position: { x, y }, // 矩形右上角 根据图形动态调整
          offset: {
            x: -20,
            y: -4,
          },
        }, // markerInfo
        { name: "delete" } // props
      );
      gFirstMarker.events.on("click", (marker) => {
        // 首先删除当前marker
        state.gMap.markerLayer.removeMarkerById(marker.id);
        // 删除对应text
        state.gFirstTextLayer.removeTextById(feature.props.textId);
        // 删除对应feature
        state.gFirstFeatureLayer.removeFeatureById(feature.id);
      });
      state.gMap.markerLayer.addMarker(gFirstMarker);
    }

    // 添加文本
    const addLayerText = (textId, textName, textPosition) => {
      // 添加一个文本
      const gFirstText = new AILabel.Text(
        textId, // id
        { text: textName, position: textPosition, offset: { x: 0, y: 0 } },
        { name: textName }, // props
        // 文本显示 style
        { fillStyle: '#F4A460', strokeStyle: '#D2691E', background: true, globalAlpha: 1, fontColor: 'red' }
      )
      state.gFirstTextLayer.addText(gFirstText)
    }

    // 删除 删除按钮
    const deIcon = () => {
      state.gMap.markerLayer.removeAllMarkers();
    }

    //设置文本坐标
    const setText = (data, type) => {
      let textPosition = {}
      switch (type) {
        case 'LINE':
          textPosition = { x: data?.start['x'], y: data?.start['y'] }
          break;
        case 'POLYLINE':
          textPosition = { x: data?.x, y: data?.y }
          break;
        case 'RECT':
          textPosition = { x: data['x'], y: data['y'] }
          break;
        case 'POLYGON':
          textPosition = { x: data[0]['x'], y: data[0]['y'] }
          break;
        case 'POINT':
          textPosition = { x: data.x, y: data.y }
          break;
        case 'MARKER':
          textPosition = { x: data.x, y: data.y }
          break;
        case 'CIRCLE':
          textPosition = { x: data.cx, y: data.cy - data.r }
          break;
        default:
          break;
      }
      return textPosition
    }

    // 增加事件
    const addEvent = () => {
      let gMap = state.gMap;
      gMap.events.on("drawDone", (type, data) => {
        console.log("--type, data--", type, data);
        if (type == "CLEARMASK" || type == "DRAWMASK") { //除了擦除 抹除外
          addFeature(data, type);
        } else {
          getName(type).then((id) => {
            if (id) {
              addFeature(data, type, id);
            }
          });
        }
      });
      gMap.events.on("boundsChanged", (data) => {
        console.log("--map boundsChanged--", data);
        return "";
      });
      // 双击编辑 在绘制模式下双击feature触发选中
      gMap.events.on("featureSelected", (feature) => {
        state.editId = feature.id;
        console.log("--map featureSelected--", feature, "双击编辑");
        //设置编辑feature
        gMap.setActiveFeature(feature);
        if (feature.type != "POINT") {
          // 增加删除按钮
          addDeleteIcon(feature, feature.shape);
        }
      });
      //右键 目前只针对"点"双击选中右键触发
      gMap.events.on("featureDeleted", (feature) => {
        if (feature.type == "POINT") {
          // 根据id删除对应feature
          state.gFirstFeatureLayer.removeFeatureById(feature.id);
          // 删除对应text
          state.gFirstTextLayer.removeTextById(feature.props.textId);
        }
      });
      // 单机空白取消编辑
      gMap.events.on("featureUnselected", () => {
        // 取消featureSelected
        state.editId = "";
        deIcon();
        gMap.setActiveFeature(null);
      });
      // 更新完
      gMap.events.on("featureUpdated", (feature, shape) => {
        console.log(feature, 'feature', shape);
        // 更新或者移动需要重新设置删除图标
        deIcon();
        feature.updateShape(shape);
        // 删除对应文本
        state.gFirstTextLayer.removeTextById(feature.props.textId);
        // 设置文本
        const textPosition = setText(shape, feature.type)
        addLayerText(feature.props.textId, feature.props.name, textPosition)
        if (feature.type != "POINT") {
          addDeleteIcon(feature, shape);
        }
        getFeatures()
      });

      // 删除
      gMap.events.on("FeatureDeleted", () => {
        console.log(2222222);
        // that.gFirstFeatureLayer.removeFeatureById(that.editId);
      });
    }
    // 获取坐标 需要自行添加
    const getPoints = (feature) => {
      switch (feature.type) {
        case "RECT":
          return feature.getPoints();
        case "LINE":
          return [feature.shape.start, feature.shape.end];
        case "POLYLINE":
          return feature.shape.points;
        case "POLYGON":
          return feature.shape.points;
        default:
          return [];
      }
    }
    //填充事件
    const Fill = () => {
      console.log("填充事件");
      if (!state.editId) {
        ElMessage({
          type: "info",
          message: "请选择填充标注",
        });
        return
      }
      let fill = state.gFirstFeatureLayer.getFeatureById(state.editId);
      console.log("--填充对象--", fill);
      fill.style.fillStyle = "#FFDAB9";
      fill.style.fill = true;
      //刷新map
      state.gMap.refresh();
    }
    //撤销
    const Revoke = () => {
      console.log("撤销");
      getFeatures();
      state.allFeatures.pop();
      //刷新map
      state.gMap.refresh();
      console.log(state.allFeatures, "--所有操作--");
    }
    const zoomIn = () => {
      state.gMap.zoomIn();
    }
    const zoomOut = () => {
      state.gMap.zoomOut();
    }
    const setMode = (mode) => {
      state.mode = mode;
    }
    //图片复位
    const restoration = () => {
      state.gMap.centerAndZoom({
        center: state.centerObj,
        zoom: 500
      })
    }

    //手动设置坐标
    function setGraph (data) {
      setDrawingStyle('POLYGON')
      addFeature([
        {
          "x": 163.125,
          "y": 63.125
        },
        {
          "x": 165.625,
          "y": 89.375
        },
        {
          "x": 226.25,
          "y": 106.875
        },
        {
          "x": 251.875,
          "y": 72.5
        },
        {
          "x": 268.75,
          "y": 37.5
        },
        {
          "x": 226.25,
          "y": 23.125
        }
      ], 'POLYGON');
    }
    function getRle () {
    }

    return {
      ...toRefs(state),
      initMap,
      getFeatures,
      setDrawingStyle,
      addFeature,
      getName,
      addDeleteIcon,
      addEvent,
      zoomIn,
      zoomOut,
      setMode,
      deIcon,
      getPoints,
      Fill,
      Revoke,
      setGraph,
      restoration,
      addLayerText,
      getRle,

      main_map
    }
  },
};
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.label_main {
  display: flex;
  margin-left: 20px;
  flex-direction: column;
  height: 100%;
}

.button-wrap {
  display: flex;
  /* flex-direction: column; */
  position: relative;
  z-index: 99;

}

.label_btn {
  padding: 0 10px;
  border: 1px solid #ccc;
  border-right: 0;
  border-radius: 0;
}

.label_btn:first-child {
  border-radius: 4px 0 0 4px;
}

.label_btn:last-child {
  border: 1px solid #ccc;
  border-radius: 0 4px 4px 0;
}

#map {
  /* margin: 0 auto; */
  overflow: hidden;
  position: relative;
  height: 450px;
  width: 650px;
  border: 1px dashed #ccc;
  // margin-left: 36px;
}

.main_map {
  position: relative;
}

.zoom-icon-wrapper {
  position: absolute;
  /* left: -36px; */
  top: 0px;
  z-index: 1000;
}

.zoom-icon-plus {
  width: 30px;
  height: 30px;
  line-height: 20px;
  text-align: center;
  border: 3px solid #6495ed;
  font-size: 20px;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  color: #ff8c00;
  cursor: pointer;
}

.zoom-icon-plus:hover {
  border-color: #4169e1;
}

.zoom-icon-minus {
  margin-top: 6px;
  width: 30px;
  height: 30px;
  line-height: 20px;
  text-align: center;
  border: 3px solid #6495ed;
  font-size: 25px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  color: #ff8c00;
  cursor: pointer;
}

.zoom-icon-minus:hover {
  border-color: #4169e1;
}

/* 删除图标 */
#delete01 {
  width: 10px;
  height: 10px;
}

.el-button+.el-button {
  margin-left: 0px;
}
</style>
使用
//引入
import { dLabelTemplate } from '@/components'
<dLabelTemplate :imgUrl="imgUrl" divId="map3" />

源代码（star点起来）：https://github.com/dingyang9642/AILabel (已经关了)
这个是源代码地址：http://ailabel.com.cn/public/ailabel/demo/index.js
API文档：http://ailabel.com.cn/public/ailabel/api/index.html
Demo文档：http://ailabel.com.cn/public/ailabel/demo/index.html
Demo1文档：http://ailabel.com.cn/public/ailabel/demo/label/index.html
npm地址：https://www.npmjs.com/package/ailabel

老版API文档（小于v5.0.0）：https://dingyang9642.github.io/AILabel/old_version_docs/#/

Tanjc518
关注
专栏目录
Vue3通透教程【十八】TS为组件的props标注类型
官方推荐
07-17 4万+
通过TS语法来编写组件的props方法
Vue3通透教程【一】Vue3现状—必然趋势？
官方推荐
01-30 7万+
凉哥作为 Vue 的忠诚粉丝输出过大量的 Vue 文章，应粉丝要求开始更新 Vue3 的相关技术文章，Vue 框架目前的地位大家应该都晓得，所谓三大框架使用人数最多，公司选型最多的框架，凉哥之前在文章中也提到过就是 Vue 框架之所以火起来的原因，和 Vue 框架相比其他框架的巨大优势，有兴趣的伙伴可以看一下Vue框架背后的故事。
适用于vue等架构的的原生js实现画布中鼠标移动绘制、编辑矩形
Sunshine_YXJ的博客
08-25 7972
功能概述 1. 鼠标在无矩形区域按下左键后拖动，生成矩形 2. 鼠标点击已绘制的矩形， 选中矩形，并绘制不同选中效果 3. 鼠标在已绘制的矩形中按住左键拖动，选中并移动矩形 4. 选中矩形后鼠标在选中矩形四个角按住拖动，可缩放矩形 效果预览 blog代码仅包含绘制画布部分，截图涉及列表展示、画布区域计算等，此处均省略，以一个基础页面代替 实现代码 draw.js /** * 图片标记 * 参数: cav-画布对象 list-标记数组 i-选中标记下标 **/ /* 操作执.
vue 使用 AIlabel 标注组件
cncxybuwanl的博客
12-01 6108
ailabel 工具使用
实现Vue3中图片预览以及放大镜效果组件封装
最新发布
weixin_74457498的博客
10-01 496
Vue3中实现小图切换大图显示以及放大镜效果
Vue + AILabel.js 实现图片标注
Zhang_aichi的博客
03-17 1万+
一、网址以及demo 官方文档：AILabel与你一路同行 demo地址1：AILabel-标注篇demo地址2：AILabel示例一览 二、我的实例代码（vue环境下） 三、完整代码 首先 npm i ailabel <template> <div> <div id="map"> <div class="button-wrap"> <button class="btn btn-defau...
【图像标注】使用vue3实现图像标注功能
weixin_44959182的博客
06-12 2711
最近没事情想写一个图像标注功能，本来是想基于Canvs开发，结果发现很多事情无法实现，或者做起来比较消耗性能，于是就想出了用div来画框的方法。后续会对其封装成一个npm插件，希望可以帮到有用的小伙伴。...
react，vue 前端实现图片标注 基于AiLabel实现二次封装
weixin_44313593的博客
04-17 2444
基于AiLabel 和class类实现标注事件二次封装
数据标注工具：AiLabel.js实现标注 超详细教程 案例分享
前端互助会
01-31 6861
背景：在前端开发过程中难免遇到针对图片的缩放平移；以及在图片上进行矢量数据、文本、标注的展示；如果你有上面的任何需求，恭喜你，找到组织了.... 在此背景下，AILabel.js出生了。 前面文章我们已经介绍过AiLabel.js了； https://blog.csdn.net/u012967771/article/details/113148527 npm下载地址：https://www.npmjs.com/package/ailabel github地址:https://github.com/d.
添加了其他功能和完善了代码。vue、konva标注多边形、矩形---demo2.0
08-13
vue+konva.js(未使用vue-konva)，实现数据标注矩形和多边形功能 demo2添加功能如下： 1、自适应画布 2、新矩形和多边形（顶点已经约束不能拖拽出画布） 3、ctrl+z撤销和del删除 4、鼠标滚轮放大和缩小 5、检查图形...
Vue3通透教程【四】Vue3组合API初体验
官方推荐
02-20 4万+
初步了解Vue的组合API和Vue2的选项式API视觉差距！
AILabel-master.zip
09-23
一款非常好用的标注工具
vue3图片描点标记
soclear_的博客
02-08 2733
图片标记描点
Vue3 + Farbic.js +Ts 实现的在线图片标注组件 支持矩形和点位标注
qq_46274532的博客
04-15 1483
1.实现矩形标注、点位（不规则四边形）标注。2.可拖拽、缩放、删除、居中显示标注标签。
前端实现标注ailabel附源码
小白学习html
07-16 4470
矩形标注，多边形标注，标注参数设置，保存以及回显图片，回显后可编辑。导出图片，撤回上一次操作等。
Vue3 图片绘制矩形，并在矩形上进行标注
leoz1的博客
03-05 1803
转载： https://blog.csdn.net/qq_37656005/article/details/123687788 https://blog.csdn.net/m0_46627730/article/details/106583908
vue3结合element-plus实现标签手动标注效果
热门推荐
m0_47634044的博客
05-05 11万+
先上效果图 功能描述：默认首选标签为第一个“时间”【读者可以根据代码修改默认的标签】，能够增加标签。 点击不同的标签可以进行标签切换。在正文部分能够根据输入的文本txt,或者内置的html文件进行标注，对选中的词语或文段打上标签【体现在背景颜色和文本节点的‘title’属性】。可以再次点击已经标注的内容进行取消标注。最终标注的结果将会以一个对象数组的形式保存，读者可以自行对被标注的内容进行一系列操作。标注结果形如： Proxy {0: {…}, 1: {…}, 2: {…}, 3: {…}, 4: {…}
vue2 - 详细实现内容或文本批注功能，将文字/图片图像/链接/任意div元素加入注释批注当鼠标点击或选中时显示气泡批注框，类似Excel/word设置标注批注功能，支持批注创建与修改记录多人协作！
高级前端工程师
08-19 2959
vue2，nuxt2，批注功能，给文字加上批注，鼠标移入时显示气泡批注，vue图片加入批注鼠标划过显示出来，vue文本批注，pdf批注，文本注释，图像注释，vue实现图片批注功能，vue选中文字添加标注，在线标注，选中文本右边添加标注，vue2实现图片框选标注图片标注，文字标注功能，鼠标选中文本后可添加批注，URL链接批注，通过鼠标选中文字，实现对文字进行标注，取消标注，用于标记的文字，自定义插入标签，怎么对图像标注，历史批注，vue标注，记录每一次增加批注并列出列表，在页面上选中文字添加批注，recogi
救星来了前端标注工具 实现图片 图像标注 多边形 矩形 画笔 缩放 线段 等功能 的插件 AILabel.js
weixin_44378370的博客
08-31 1万+
一、网址以及demo 官方文档：http://ailabel.com.cn/public/ailabel/api/index.html#1 demo地址1： http://ailabel.com.cn/public/ailabel/demo/label/index.html demo地址2： http://ailabel.com.cn/public/ailabel/demo/index.html 二、我的实例代码（vue环境下） 三、如有不懂的添加官方qq群向大佬请教（378301400） <tem
vue3 图像标注工具
09-12
Vue3 图像标注工具是一个基于Vue3开发的用于进行图像标注的工具。它提供了一个用户友好的界面，让用户可以方便地对图像进行标注。 该工具的主要功能包括： 1. 图像上传和预览：用户可以上传本地的图像文件，并在界面上预览图像。 2. 标注工具：提供了多种标注工具，如矩形框、多边形等，用户可以根据实际需求选择合适的工具进行标注。 3. 标注编辑：用户可以对已经标注的区域进行编辑，包括调整大小、移动位置等操作。 4. 标注保存和导出：用户可以将标注结果保存在本地或者导出为其他格式，如JSON、XML等。 5. 标注管理：用户可以对已经标注的图像进行管理，包括查看、删除等操作。 总之，Vue3 图像标注工具提供了一个方便快捷的方式，帮助用户进行图像标注工作，满足不同场景下的需求。
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值