From dde669fe1820dc472b5b546ba2dbafc93f5146b6 Mon Sep 17 00:00:00 2001 From: kamei Date: Tue, 23 Jun 2020 23:17:59 +0900 Subject: [PATCH] update document (#199) --- README.md | 185 +++++++++++++++++++++++++++++++++++--------- assets/color.svg | 1 + assets/draw.svg | 1 + assets/origin.svg | 1 + assets/shake.svg | 1 + example/index.html | 70 +++++++++-------- src/animation.ts | 16 ++-- src/example/app.tsx | 115 +++++++++++++++++---------- 8 files changed, 276 insertions(+), 114 deletions(-) create mode 100644 assets/color.svg create mode 100644 assets/draw.svg create mode 100644 assets/origin.svg create mode 100644 assets/shake.svg diff --git a/README.md b/README.md index 110e38c66..d4d88abc3 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,8 @@ # svg-drawing -[![npm version](https://badge.fury.io/js/svg-drawing.svg)](https://www.npmjs.com/package/svg-drawing) [![npm download](https://img.shields.io/npm/dt/svg-drawing.svg)](https://www.npmjs.com/package/svg-drawing)[![codecov](https://codecov.io/gh/kmkzt/svg-drawing/branch/master/graph/badge.svg)](https://codecov.io/gh/kmkzt/svg-drawing) +[![npm version](https://badge.fury.io/js/svg-drawing.svg)](https://www.npmjs.com/package/svg-drawing) [![npm download](https://img.shields.io/npm/dt/svg-drawing.svg)](https://www.npmjs.com/package/svg-drawing) [![codecov](https://codecov.io/gh/kmkzt/svg-drawing/branch/master/graph/badge.svg)](https://codecov.io/gh/kmkzt/svg-drawing) + +![svg animation image](./assets/draw.svg) `svg-drawing` is svg based drawing library with lightweight, no dependencies. @@ -38,7 +40,7 @@ Example code is [here](src/example/) ## How to use -### Drawing Example +### SvgDrawing This example renders the drawing area. @@ -65,6 +67,10 @@ SvgDrawing methods. ```javascript const draw = new SvgDrawing(el) +// change parameter.　There are other changeable parameters like fill, close, curve, etc. +draw.penColor = '#00b' +draw.penWidth = 10 + // drawing deactivate draw.off() // drawing reactivate @@ -75,10 +81,6 @@ draw.clear() // undo drawing draw.undo() -// change parameter.　There are other changeable parameters like fill, close, curve, etc. -draw.penColor = '#00b' -draw.penWidth = 10 - // Download image. Also available in SvgAnimation, Renderer draw.download('svg') draw.download('jpg') @@ -87,12 +89,12 @@ draw.download('png') // Load svg data. Only the path element. // SVG exported by this library can be read. draw.parseSVGString( - 'svg width="200" height="200">' + '' ) draw.parseSVGElement(document.getElementByID('loadSVG')) ``` -### Animation Example +### SvgAnimation This example is to animate what you drew with Svg Drawing @@ -111,49 +113,81 @@ const anim = new SvgAnimation(animEl, { // Example drawing animation. // Callback function to set SvgAnimation // Since the Path Object before animation is passed as an argument, it is converted and returned. -let cur = 0 -const drawingAnimation = paths => { - const total = paths.reduce((l, p) => l + p.commands.length, 0) - if (cur > total) cur = 0 - else cur += 1 - const update = [] - let count = cur - for (let i = 0; i < paths.length; i += 1) { - if (count < paths[i].commands.length) { - paths[i].commands = paths[i].commands.slice(0, count) - update.push(paths[i]) - break + +const setupAnimation = () => { + // Copy drawwing data. + // You can also use `parseSVGElement` or `parseSVGString`. + // anim.parseSVGElement(document.getElementByID('targetSvg')) + // draw.parseSVGString('') + anim.copy(draw) + + // Sets the animation callback function. `fid` is number of frame index. + // It repeat times number of total commands. You can change the number of repeats as an option. + anim.setAnimation( + (paths, fid) => { + let dispNum = fid + const update = [] + for (let i = 0; i < paths.length; i += 1) { + if (count < paths[i].commands.length) { + paths[i].commands = paths[i].commands.slice(0, dispNum) + update.push(paths[i]) + break + } + dispNum -= paths[i].commands.length + update.push(paths[i]) + } + return update } - count -= paths[i].commands.length - update.push(paths[i]) - } - return update + + // The default value for the option. It works the same without writing. + // This option cannot be used before version 2. When setting the number of frames, you need to have a global variable used in the animation function + { + frames: anim.paths.reduce((l, p) => l + p.commands.length, 0), // The number of frames in the animation. + repeatCount: 'indefinete' // Set repeatCount attribute to animate element + ms: 20 // Set seconds per frame + } + ) } + +// Animation Start const start = document.getElementById('start') start.onclick = () => { - // Sets the animation callback function - anim.setAnimation(drawingAnimation) - // Copy drawwing data - anim.copy(draw) - // Start Animation + // load draw data + loadSvgAnimation() + + // Method to animate Svg with JavaScript anim.start() + + // Or use SVGAnimateElement. + anim.el.replaceChild(anim.toAnimationElement(), anim.el.childNodes[0]) + console.log(anim.toAnimationElement()) // } +// Animation Stop const stop = document.getElementById('stop') stop.onclick = () => { - // Stop Animation + // Stop Animation. anim.stop() - // Put it back before animating + // Restore Svg before animation. anim.resotre() } -``` -SvgAnimation methods. +// Download animtaion svg. +const download = document.getElementById('download') +download.onclick = () => { + loadAnimation() + anim.downloadAnimation() +} +``` ```javascript const anim = new SvgAnimation(el) +// Property `ms` can be changed to set seconds per frame. `ms` is mili seconds. +// Can be changed during animation +anim.ms = 50 + // Animation Start anim.start() // Animation Stop @@ -161,7 +195,86 @@ anim.stop() // Return to Svg before animation anim.restore() -// Parameter `ms` can be changed to set Animation frame. `ms` is mili seconds. -// Can be changed during animation -anim.ms = 50 +/** + * Only version 3 or later is supported + */ +// Creata animation svg element. +anim.toAnimationElement() +// Download animation svg element. +anim.downloadAnimation() +``` + +#### Animation example + +First load any SVG into SvgAnimation. + +```js +const anim = new SvgAnimation(el, { ms: 200 }) + +anim.parseSVGString( + `` +) +``` + +#### Shaking animation. + +![shake animation svg](./assets/shake.svg) + +```js +anim.setAnimation( + paths => { + const range = 5 + const randomShaking = () => Math.random() * range - range / 2 + for (let i = 0; i < paths.length; i += 1) { + paths[i].commands = paths[i].commands.map((c) => { + c.point = c.point?.add(new Point(randomShaking(), randomShaking())) + c.cl = c.cl?.add(new Point(randomShaking(), randomShaking())) + c.cr = c.cr?.add(new Point(randomShaking(), randomShaking())) + return c + }) + } + return paths + } + { + frames: 3 + } +) +``` + +#### Colorful animation + +![shake animation svg](./assets/color.svg) + +```js +const colorfulList = [ + '#F44336', + '#E91E63', + '#9C27B0', + '#673AB7', + '#3F51B5', + '#2196F3', + '#00BCD4', + '#009688', + '#4CAF50', + '#8BC34A', + '#CDDC39', + '#FFEB3B', + '#FFC107', + '#FF9800', + '#FF5722' +] + +anim.setAnimation( + (paths, fid) => { + for (let i = 0; i < paths.length; i += 1) { + paths[i].stroke = colorfulList[fid % colorfulList.length] + paths[i].fill = colorfulList[(fid + 4) % colorfulList.length] + } + return paths + } + { + frames: colorfulList.length + } +) + ``` diff --git a/assets/color.svg b/assets/color.svg new file mode 100644 index 000000000..34d0fac38 --- /dev/null +++ b/assets/color.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/draw.svg b/assets/draw.svg new file mode 100644 index 000000000..e18ead8f3 --- /dev/null +++ b/assets/draw.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/origin.svg b/assets/origin.svg new file mode 100644 index 000000000..0700ae84c --- /dev/null +++ b/assets/origin.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/shake.svg b/assets/shake.svg new file mode 100644 index 000000000..43ff98d55 --- /dev/null +++ b/assets/shake.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/example/index.html b/example/index.html index a7cdf04a5..2dd74e734 100644 --- a/example/index.html +++ b/example/index.html @@ -5,9 +5,10 @@
- - - + + + +