jxstjh-draw

介绍

基于 fabric.js 的绘图组件，支持多端（PC、移动端）。

安装

npm install @jxstjh/draw-editor

使用

UMD.js

<script src="./node_modules/@jxstjh/draw-editor/dist/jxstjh-draw-editor.umd.js"></script>

DrawEditorIns = new window.jxstjhDrawEditor.DrawEditor(wap1);

TS

import { ref, onMounted } from "vue";
import {
  DrawEditor,
  EditorMode,
  ROIType,
  ROIConfig,
  Annotation,
  EditorEvent,
} from "@jxstjh/draw-editor";
// 编辑ROI
const box1 = ref();
const box2 = ref();
let drawEditorIns = null;
let drawEditorIns2 = null;
const mockROIs: ROIConfig[] = [
  {
    id: "81681f16-7312-c81a-f365-341012585797",
    type: "polygon",
    npoints: [
      {
        x: 0.1899497487437186,
        y: 0.4939271255060728,
      },
      {
        x: 0.22512562814070357,
        y: 0.6902834008097165,
      },
      {
        x: 0.29145728643216085,
        y: 0.4473684210526315,
      },
    ],
  },
  {
    id: "1345caa5-e500-ebc2-59d0-9bd05ad56bee",
    type: "rect",
    npoints: [
      {
        x: 0.35,
        y: 0.01,
      },
      {
        x: 0.99,
        y: 0.99,
      },
    ],
  },
];
const mockAnnotations: Annotation[] = [
  {
    id: "22111ssahdkd",
    cls: "烟",
    prob: 0.8762211872,
    xyns: [
      { x: 0.5, y: 0.5 },
      { x: 0.75, y: 0.75 },
    ],
  },
  {
    id: "11211ssahdkd",
    cls: "火",
    prob: 0.3762211872,
    xyns: [
      { x: 0.8, y: 0.3 },
      { x: 0.85, y: 0.45 },
    ],
  },
];

onMounted(() => {
  // box1
  const wap1 = box1.value;
  drawEditorIns = new DrawEditor(wap1);
  drawEditorIns.on(EditorEvent.CANVAS_INIT, id => {
    console.log("canvas:init");
    console.log(id);
  });
  drawEditorIns.on(EditorEvent.ROIS_INIT, e => {
    console.log("rois:init");
    console.log(e);
  });
  drawEditorIns.init(EditorMode.EDIT, 1920, 1080, mockROIs);
  drawEditorIns.on(EditorEvent.ROI_EDIT_CREATED, e => {
    console.log("roi:edit:created");
    console.log(e);
  });
  drawEditorIns.on(EditorEvent.ROI_EDIT_COMPLETED, e => {
    console.log("roi:edit:completed");
    console.log(e);
  });
  drawEditorIns.on(EditorEvent.ROI_EDIT_DELETED, e => {
    console.log("roi:edit:deleted");
    console.log(e);
  });
  drawEditorIns.on(EditorEvent.ROI_SELECTION_CREATED, e => {
    console.log("roi:selection:created");
    console.log(e);
  });
  drawEditorIns.on(EditorEvent.ROI_SELECTION_CLEARED, e => {
    console.log("roi:selection:cleared");
    console.log(e);
  });
  drawEditorIns.on(EditorEvent.ROI_SELECTION_UPDATED, e => {
    console.log("roi:selection:updated");
    console.log(e);
  });
  drawEditorIns.on(EditorEvent.CANVAS_RESIZE, e => {
    console.log("canvas:resize");
    console.log(e);
  });

  // box2
  const wap2 = box2.value;
  drawEditorIns2 = new DrawEditor(wap2);
  drawEditorIns2.init(EditorMode.VIEW, 1920, 1080, mockROIs, mockAnnotations);
});
const exportROI = () => {
  console.log(drawEditorIns!.exportROI());
};
const addROI = (type: ROIType) => {
  drawEditorIns!.addROI(type);
};

<div class="box" ref="box1">
  <img src="../assets/test.png" alt="" />
</div>
<button @click="addROI(ROIType.RECT)">add rect</button>
<button @click="addROI(ROIType.POLYGON)">add ploygon</button>
<button @click="exportROI()">export ROI</button>
<div class="box" ref="box2">
  <img src="../assets/test.png" alt="" />
</div>

.box {
  margin-top: 50px;
  margin-left: 100px;
  width: 80vw;
  height: 60vh;
  position: relative;
}
.box img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}