@yanghanhan-kidney/yanghanhan-annotorious v0.1.0
yanghanhan-annotorious
What
超大图像自由路径可编辑.
I added draggable handle points to the freehand boundary so that we can change the shape of the boundary by dragging any handle point on the boundary. This is an extension to the original great Freehand drawing tool made by Rainer Simon and his collaborators.
- Yang Hanhan (2398434365 at qq.com)
Why
A few ImageScope users (e.g., pathologists) find being able to edit the annotation boundary made by the Freehand drawing tool useful.
Below is the original README file
Additional selection tools for Annotorious and the Annotorious OpenSeadragon plugin.
Additional freehand selection tools for Annotorious and the Annotorious OpenSeadragon plugin.
Using
Include the plugin in your page directl from the CDN:
<html>
<head>
<!-- Annotorious first -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@recogito/annotorious@latest/dist/annotorious.min.css">
<script src="https://cdn.jsdelivr.net/npm/@recogito/annotorious@latest/dist/annotorious.min.js"></script>
<!-- Tilted box plugin -->
<script src="https://cdn.jsdelivr.net/npm/@recogito/annotorious-selector-pack@latest/dist/annotorious-selector-pack.min.js"></script>
</head>
<body>
<img id="hallstatt" src="640px-Hallstatt.jpg">
<script>
window.onload = function() {
// Init Annotorious
var anno = Annotorious.init({
image: 'hallstatt'
});
// Init the plugin
Annotorious.SelectorPack(anno);
// [ 'rect', 'polygon', 'circle', 'ellipse', 'freehand' ]
console.log(anno.listDrawingTools());
anno.setDrawingTool('ellipse');
}
</script>
</body>
</html>If you only want to include some tools
You can set the tools to include when initializing the plugin.
// Will only include ellipse and freehand, but not circle
Annotorious.SelectorPack(anno, {
tools: ['ellipse', 'freehand']
});New feature
-Add draggable handle points to the freehand boundary, so that we can change the shape of the boundary by dragging any handle point.
Development
To run in development mode:
$ npm install
$ npm start