Package Exports

canvas-select

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (canvas-select) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

canvas-select 标注插件

使用 canvas 图形标注

快捷键

shift+Backspace 删除选中矩形

shift+ArrowDown 下移选中矩形

shift+ArrowUp 上移选中矩形

shift+ArrowLeft 左移选中矩形

shift+ArrowRight 右移选中矩形

使用

npm i canvas-select

<body>
  <div class="container"></div>
</body>
<script src="../lib/canvas-select.min.js"></script>
<script>
  const canvasSelect = new CanvasSelect(".container");
  canvasSelect.setData([
    {
      label: "火车",
      coor: [
        [10, 10],
        [100, 100],
      ],
    },
    {
      label: "房屋",
      coor: [
        [20, 20],
        [300, 80],
      ],
    },
  ]);
  // 删除选中
  canvasSelect.on("delete", function (info) {
    console.log("delete", info);
  });
  // 选中
  canvasSelect.on("select", function (info) {
    console.log("select", info);
    // 添加label
    // window.target = info;
    // window.target.label="新label"
    // canvasSelect.update()
  });
  // 报错
  canvasSelect.on("error", function (info) {
    console.log("error", info);
  });
  // 添加
  canvasSelect.on("add", function (info) {
    console.log("add", info);
  });
  // data更新
  canvasSelect.on("update", function (info) {
    console.log("update", info);
  });
  // resize
  canvasSelect.on("resize", function (info) {
    console.log("resize", info);
  });
</script>