无名工具插件

一个添加附加绘图工具的有名插件 .

安装

npm install @annotorious/plugin-tools

工具

1. 椭圆

绘制椭圆或圆.

• 别动 SHIFT - 约束面与圆相比
• 别动 CTRL - 从中央向外引出

2. 线条

在两点之间画出直线.

3. 路径

创建由直线或曲线段组成的多线.

绘图 :

• 单击(或单击并拖动,如果 drawingMode 设置为 drag)开始.
• 点击可添加更多分数 .
• 打开路径 : 双击完成 .
• 关闭形状 : 在第一个点上点击回击 .

编辑 :

• 删除点 : 新闻 Del 或者说 Backspace ,而选择点来从路径中去除这些点.
• 切换角/曲线 : 单击一个点在角和平滑曲线之间切换(当选定一个点时会出现手势).
• 调整曲率 : 拖动手柄来细化形状.
• 曲线之间的尖角 : 别动 Alt 同时拖动一个手柄以独立移动.
• 重联手柄 : 双击点以恢复手柄 .
• 选择多点 : 别动 Ctrl (或 Option 点击点将其添加到选择中

使用量

该插件与两个注释版本一起工作 : 图像注释器 财务报告和审定财务报表 打开海德拉贡注释器。 。 。 .

图像注释器

import { createImageAnnotator } from '@annotorious/annotorious';
import { mountPlugin as mountToolsPlugin } from '@annotorious/plugin-tools';

import '@annotorious/annotorious/annotorious.css';
import '@annotorious/plugin-tools/annotorious-plugin-tools.css';

var anno = createImageAnnotator('sample-image', {
  /** Annotorious init options **/
});

mountToolsPlugin(anno);

// ['rectangle', 'polygon', 'ellipse', 'line', 'path']
console.log(anno.listDrawingTools());

anno.setDrawingTool('path');

打开海德拉贡注释器

import OpenSeadragon from 'openseadragon';
import { createOSDAnnotator } from '@annotorious/openseadragon';
import { mountPlugin as mountToolsPlugin } from '../src';

import '@annotorious/openseadragon/annotorious-openseadragon.css';
import '@annotorious/plugin-tools/annotorious-plugin-tools.css';

const viewer = OpenSeadragon({
  /** OpenSeadragon init options **/
});

const anno = createOSDAnnotator(viewer, {
  /** Annotorious init options **/
});

mountToolsPlugin(anno);

// ['rectangle', 'polygon', 'ellipse', 'line', 'path']
console.log(anno.listDrawingTools());

anno.setDrawingTool('path');