canvas-rect - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

package.json

		{
		"name": "canvas-rect",
		"version": "0.0.2",
		"version": "0.0.3",
		"description": "canvas rect drawing on element",
		@@ -5,0 +5,0 @@ "main": "index.js",

README.md

		@@ -9,7 +9,7 @@ # canvas-rect
		# usage
		using in vue:
		- using in vue:

		```vue
		<template>
		<div :ref="ref">
		<div ref="el">
		</div>
		@@ -24,3 +24,3 @@ </template>
		setup() {
		const ref = ref(null)
		const el = ref(null)
		function finish({accords,size}) {
		@@ -32,3 +32,3 @@ // ...
		// must be 'div' element
		el: ref.current,
		el: el.value,
		onFinish: finish,
		@@ -39,3 +39,3 @@ preserve: false,
		return {
		ref
		el
		}
		@@ -46,3 +46,92 @@ }
		```
		- using in React:

		```ts
		<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 `script` tag

		```html
		<!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
		```ts
		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

canvas-rect - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics