Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
canvas-drawboard
Advanced tools
This is a drawboard tool based on vue2.x and canvas. Through this tool you can mark the information you want on a picture and get the corresponding data. In addition, you can also use it as an ordinary drawboard, where you can freely draw graphics on it. The currently supported types are polyline, rectangle, polygon, point, etc. Can support zoom in, zoom out, rotation, translation and other operations.Besides, you can flexibly configure your drawing information.
npm install canvas-drawboard -S
import DrawBoard from 'canvas-drawboard'
import 'canvas-drawboard/lib/drawboard.css'
Vue.use(DrawBoard);
<template>
<div id="app">
<drawboard
:url="url"
:height="400"
:width="500"
@updateData="updateData"
:labelDataOrigin="labelDataOrigin"
@drawEventDone="drawEventDone" />
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
labelDataOrigin: [
{
type: "rectangle",
points: [
{ x: 228, y: 240 },
{ x: 287, y: 240 },
{ x: 287, y: 286 },
{ x: 228, y: 286 },
],
options: {
path_lineWidth: "4",
path_strokeStyle: "#f00",
point_radis: "5", // Judge whether to select the point when clicking
point_lineWidth: "2",
point_strokeStyle: "#999", // The color of the point when selected
},
},
{
type: "rectangle",
points: [
{ x: 402, y: 214 },
{ x: 438, y: 214 },
{ x: 438, y: 249 },
{ x: 402, y: 249 },
],
options: {
path_lineWidth: 4,
path_strokeStyle: "#f00",
point_radis: 5, // Judge whether to select the point when clicking
point_lineWidth: 2,
point_strokeStyle: "#999", // The color of the point when selected
},
},
],
url:'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
}
},
methods:{
updateData(data){
console.log(data);
},
drawEventDone() {
console.log("well done!");
}
}
}
</script>
The URL of the image to be edited.
Render graphics based on input data.The format of the data is as follows
[
{
"type":"rectangle",
"points":[
{"x":228,"y":240},
{"x":287,"y":240},
{"x":287,"y":286},
{"x":228,"y":286}
],
"options":{
"path_lineWidth":5,
"path_strokeStyle":"#f00",
"point_radis":5, // Judge whether to select the point when clicking
"point_lineWidth":2,
"point_strokeStyle":"#999" // The color of the point when selected
}
},
{
"type":"rectangle",
"points":[
{"x":402,"y":214},
{"x":438,"y":214},
{"x":438,"y":249},
{"x":402,"y":249}
],
"options":{
"path_lineWidth":4,
"path_strokeStyle":"#f00",
"point_radis":5, // Judge whether to select the point when clicking
"point_lineWidth":2,
"point_strokeStyle":"#999" // The color of the point when selected
}
}
]
you can set the height of the canvas container
you can set the width of the canvas container
You can configure the drawing parameters by this variable.The parameter form is the same as the options in labelDataOrigin above.
You can control whether to display the image loading animation.
Through this method you can get the labeled data.
Through this method you can do what you want when finish drawing.
This is a callback function after deleting an item, and parameter is the index value of the deleted item
This is a callback function after clear the drawboard.
This is a callback function after changing active index.
hot key | Feature |
---|---|
ctrl+scroll | zoomIn/zoomOut |
Right click | move |
Drawboard canvas Vue2.x Data-labeling
FAQs
a drawboard based on vue2.x
The npm package canvas-drawboard receives a total of 0 weekly downloads. As such, canvas-drawboard popularity was classified as not popular.
We found that canvas-drawboard demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.