canvas-rect
canvas rect drawing on element
install
npm install canvas-rect --saveusage
- using in vue:
<template>
<div ref="el">
</div>
</template>
<script>
import { ref, onMounted } from 'vue'
import DrawRect from 'canvas-rect'
export default {
setup() {
const el = ref(null)
function finish({accords,size}) {
// ...
}
onMounted(()=>{
new DrawRect({
// must be 'div' element
el: el.value,
onFinish: finish,
preserve: false,
}).init()
})
return {
el
}
}
}
</script>- using in React:
<script>
import React,{ useRef,useEffect } from 'React'
import DrawRect from 'canvas-rect'
export default function Comp() {
const el = useRef(null)
function finish({accords,size}) {
// ...
}
useEffect(()=>{
new DrawRect({
// must be 'div' element
el: el.current,
onFinish: finish,
preserve: false,
}).init()
},[])
return <div ref="el">
</div>
}
</script>- or just using with
scripttag
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,body {
box-sizing: border-box;
background-color: pink;
width: 100%;
}
#container {
display: block;
background-color: white;
margin: 20px auto;
width: 800px;
height: 600px;
}
</style>
</head>
<body>
<div id="container">
</div>
<script src="/path/to/canvas-rect/src/drawRect.js"></script>
<script>
function finish(data) {
console.log(data)
}
new DrawRect({
el: document.querySelector('#container'),
onFinish: finish,
preserve: true,
bgColor: 'yellow'
}).init()
</script>
</body>
</html>Api
new DrawRect(options: DrawRectOptions).init()
/* interface DrawRectOptions {
// element to draw on,must be `div` element
el: Element;
// canvas background color,default `transparent`
bgColor?: string;
// line width,default `1`
lineWidth?: number;
// line color,default `'#000'`
lineColor?: string;
// if set to `true`,will Keep last drawing on the canvas
preserve?: boolean;
// will be called when mouseup event is emitted
onFinish?: (result: DrawFinishResult)=>any;
} */License
MIT