├── .babelrc
├── .es6.babelrc
├── .eslintignore
├── .gitignore
├── .prettierrc
├── README.md
├── dist
    ├── sprite-extend-shapes.esm.js
    ├── sprite-extend-shapes.js
    └── sprite-extend-shapes.nobrowser.js
├── docs
    ├── .babelrc
    ├── build
    │   ├── vue-md-loader.js
    │   ├── webpack.conf.common.js
    │   ├── webpack.conf.dev.js
    │   └── webpack.conf.prod.js
    ├── index.html
    ├── package.json
    ├── src
    │   ├── App.vue
    │   ├── assets
    │   │   └── computer.svg
    │   ├── components
    │   │   ├── BlockDemo.vue
    │   │   └── Header.vue
    │   ├── index.js
    │   ├── router
    │   │   └── index.js
    │   ├── styles
    │   │   ├── index.scss
    │   │   ├── markdown.scss
    │   │   └── normalize.scss
    │   └── views
    │   │   ├── api
    │   │       ├── docs
    │   │       │   ├── arc.md
    │   │       │   ├── circle.md
    │   │       │   ├── ellipse.md
    │   │       │   ├── ellipseArc.md
    │   │       │   ├── ellipseSector.md
    │   │       │   ├── polycurve.md
    │   │       │   ├── polygon.md
    │   │       │   ├── polyline.md
    │   │       │   ├── rect.md
    │   │       │   ├── ring.md
    │   │       │   ├── sector.md
    │   │       │   ├── star.md
    │   │       │   ├── triangle.md
    │   │       │   └── wave.md
    │   │       ├── index.vue
    │   │       └── routes.js
    │   │   └── home
    │   │       └── index.md
    └── website
    │   ├── 1.71b3875.js
    │   ├── 10.71b3875.js
    │   ├── 11.71b3875.js
    │   ├── 12.71b3875.js
    │   ├── 13.71b3875.js
    │   ├── 14.71b3875.js
    │   ├── 15.71b3875.js
    │   ├── 16.71b3875.js
    │   ├── 2.71b3875.js
    │   ├── 3.71b3875.js
    │   ├── 4.71b3875.js
    │   ├── 5.71b3875.js
    │   ├── 6.71b3875.js
    │   ├── 7.71b3875.js
    │   ├── 8.71b3875.js
    │   ├── 9.71b3875.js
    │   ├── index.html
    │   └── main.71b387523f94f0b6c478.js
├── example
    ├── drag-drop.html
    ├── ellipse.demo.js
    ├── polygon.demo.js
    ├── polyline.demo.js
    ├── test-shape.html
    └── wave.demo.js
├── lib
    ├── arc.js
    ├── circle.js
    ├── ellipse.js
    ├── ellipseArc.js
    ├── ellipseSector.js
    ├── index.js
    ├── polycurve.js
    ├── polygon.js
    ├── polyline.js
    ├── rect.js
    ├── ring.js
    ├── sector.js
    ├── shape.js
    ├── star.js
    ├── triangle.js
    ├── util.js
    └── wave.js
├── package.json
├── pictures
    ├── arc.png
    ├── circle.png
    ├── ellipse.png
    ├── ellipseArc.png
    ├── ellipseSector.png
    ├── polycurve.png
    ├── polygon.png
    ├── polyline.png
    ├── rectangle.png
    ├── ring.png
    ├── sector.png
    ├── star.png
    └── triangle.png
├── script
    └── qcdn.js
├── src
    ├── arc.js
    ├── circle.js
    ├── ellipse.js
    ├── ellipseArc.js
    ├── ellipseSector.js
    ├── index.js
    ├── polycurve.js
    ├── polygon.js
    ├── polyline.js
    ├── rect.js
    ├── ring.js
    ├── sector.js
    ├── shape.js
    ├── star.js
    ├── triangle.js
    ├── util.js
    └── wave.js
├── test
    ├── cases
    │   ├── arc.js
    │   ├── circle.js
    │   ├── ellipse.js
    │   ├── ellipseArc.js
    │   ├── ellipseSector.js
    │   ├── polycurve.js
    │   ├── polygon.js
    │   ├── polyline.js
    │   ├── rect.js
    │   ├── ring.js
    │   ├── sector.js
    │   ├── star.js
    │   └── triangle.js
    ├── helpers
    │   ├── drawcase.js
    │   ├── drawsprites.js
    │   ├── index.js
    │   └── output.js
    ├── img
    │   ├── arc-default.png
    │   ├── circle-default.png
    │   ├── circle-noellipse.png
    │   ├── ellipse-default.png
    │   ├── ellipseArc-default.png
    │   ├── ellipseSector-default.png
    │   ├── ellipseSector-noellipse.png
    │   ├── polycurve-default.png
    │   ├── polygon-default.png
    │   ├── polygon-nopoints.png
    │   ├── polyline-default.png
    │   ├── rect-default.png
    │   ├── ring-default.png
    │   ├── ring-sector.png
    │   ├── sector-default.png
    │   ├── star-default.png
    │   ├── star-innerRadius.png
    │   └── triangle-default.png
    └── run.test.js
├── tsconfig.json
└── webpack.config.js


/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     [
 4 |       "@babel/preset-env",
 5 |       {
 6 |         "targets": {
 7 |           "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
 8 |         }
 9 |       }
10 |     ]
11 |   ],
12 |   "plugins": [
13 |     [
14 |       "@babel/plugin-proposal-decorators",
15 |       {
16 |         "decoratorsBeforeExport": false
17 |       }
18 |     ],
19 |     "@babel/plugin-proposal-class-properties",
20 |     [
21 |       "@babel/plugin-transform-runtime",
22 |       {
23 |         "corejs": false,
24 |         "helpers": true,
25 |         "regenerator": false,
26 |         "useESModules": false
27 |       }
28 |     ]
29 |   ]
30 | }
31 | 


--------------------------------------------------------------------------------
/.es6.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [],
 3 |   "plugins": [
 4 |     [
 5 |       "@babel/plugin-proposal-decorators",
 6 |       {
 7 |         "decoratorsBeforeExport": false
 8 |       }
 9 |     ],
10 |     "@babel/plugin-proposal-class-properties"
11 |   ]
12 | }
13 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | .git
2 | node_modules
3 | build
4 | dist
5 | docs/js
6 | script
7 | lib
8 | example/js
9 | doc/


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | 
 5 | # Runtime data
 6 | pids
 7 | *.pid
 8 | *.seed
 9 | 
10 | # Directory for instrumented libs generated by jscoverage/JSCover
11 | lib-cov
12 | 
13 | # Coverage directory used by tools like istanbul
14 | coverage/
15 | .nyc_output/
16 | 
17 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
18 | .grunt
19 | 
20 | # node-waf configuration
21 | .lock-wscript
22 | 
23 | # Dependency directory
24 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
25 | node_modules/
26 | 
27 | # IDE config
28 | .idea
29 | 
30 | # output
31 | output/
32 | output.tar.gz
33 | 
34 | app/
35 | 
36 | runtime/
37 | 
38 | frames/
39 | ffmpeg.sh
40 | 
41 | .DS_Store
42 | 
43 | sftp-config.json
44 | package-lock.json
45 | 
46 | .vscode
47 | jsconfig.json
48 | esconfig.json


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "semi": true,
3 |   "singleQuote": true,
4 |   "bracketSpacing": false
5 | }
6 | 


--------------------------------------------------------------------------------
/docs/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     [
 4 |       "@babel/preset-env",
 5 |       {
 6 |         "modules": false
 7 |       }
 8 |     ]
 9 |   ],
10 |   "plugins": [
11 |     "@babel/plugin-syntax-dynamic-import",
12 |     [
13 |       "@babel/plugin-proposal-decorators",
14 |       {
15 |         "decoratorsBeforeExport": false
16 |       }
17 |     ],
18 |     "@babel/plugin-proposal-class-properties",
19 |     "@babel/plugin-transform-runtime"
20 |   ]
21 | }
22 | 


--------------------------------------------------------------------------------
/docs/build/vue-md-loader.js:
--------------------------------------------------------------------------------
 1 | const { escape } = require('scapegoat')
 2 | // const MarkdownIt = require('markdown-it')
 3 | // const md = new MarkdownIt()
 4 | 
 5 | module.exports = {
 6 |   loader: 'vue-md-loader',
 7 |   options: {
 8 |     plugins: [
 9 |       [
10 |         require('markdown-it-container'),
11 |         'demo',
12 |         {
13 |           validate(params) {
14 |             return new RegExp('demo').test(params.trim())
15 |           },
16 |           // 将捕获的代码块装进自定义组件block-demo中
17 |           render(tokens, idx) {
18 |             if (tokens[idx].nesting === 1) {
19 |               let tip = tokens[idx].info
20 |               tip = tip.replace('demo', '').trim()
21 | 
22 |               let source = tokens[idx + 1].content
23 | 
24 |               return `<block-demo tip="${
25 |                 /* md.render(tip) */ tip
26 |               }" source="${escape(source)}">`
27 |             }
28 |             return '</block-demo>'
29 |           }
30 |         }
31 |       ]
32 |     ],
33 |     afterProcess(vueFile) {
34 |       // 移除注释
35 |       return vueFile
36 |         .replace(/<span class="hljs-comment">([\S\s]*?)<\/span>/gi, '')
37 |         .trim()
38 |     },
39 |     afterProcessLiveTemplate(template) {
40 |       return `<div class="block-demo__live">${template}</div>`
41 |     }
42 |   }
43 | }
44 | 


--------------------------------------------------------------------------------
/docs/build/webpack.conf.common.js:
--------------------------------------------------------------------------------
  1 | const os = require('os');
  2 | const path = require('path');
  3 | const Happypack = require('happypack');
  4 | const threadPoll = Happypack.ThreadPool({size: os.cpus().length});
  5 | const ProgressBarPlugin = require('progress-bar-webpack-plugin');
  6 | const HtmlWebpackPlugin = require('html-webpack-plugin');
  7 | 
  8 | const {VueLoaderPlugin} = require('vue-loader');
  9 | const VueMdLoader = require('./vue-md-loader');
 10 | 
 11 | const isProd = process.env.NODE_ENV === 'production';
 12 | 
 13 | module.exports = {
 14 |   mode: isProd ? 'production' : 'development',
 15 |   entry: path.resolve(__dirname, '../src/'),
 16 |   module: {
 17 |     rules: [
 18 |       {
 19 |         test: /\.js$/,
 20 |         loader: 'happypack/loader?id=babel',
 21 |         include: [path.resolve(__dirname, '../src/')],
 22 |         exclude: [/node_modules/]
 23 |       },
 24 | 
 25 |       {
 26 |         test: /\.vue$/,
 27 |         use: [
 28 |           {
 29 |             loader: 'vue-loader',
 30 |             options: {
 31 |               loaders: {
 32 |                 js: 'happypack/loader?id=babel'
 33 |               }
 34 |             }
 35 |           }
 36 |         ],
 37 |         exclude: /node_modules/
 38 |       },
 39 | 
 40 |       {
 41 |         test: /\.md$/,
 42 |         use: [
 43 |           {
 44 |             loader: 'vue-loader',
 45 |             options: {
 46 |               loaders: {
 47 |                 js: 'happypack/loader?id=babel'
 48 |               }
 49 |             }
 50 |           },
 51 |           VueMdLoader
 52 |         ],
 53 |         exclude: /node_modules/
 54 |       },
 55 | 
 56 |       {
 57 |         test: /\.(s)?css$/,
 58 |         use: ['style-loader', 'css-loader', 'sass-loader']
 59 |       },
 60 | 
 61 |       {
 62 |         test: /\.(png|jpg|gif|svg)$/,
 63 |         loader: 'url-loader',
 64 |         options: {
 65 |           limit: 3000,
 66 |           name: 'static/img/[name].[ext]?[hash]'
 67 |         }
 68 |       },
 69 | 
 70 |       {
 71 |         test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
 72 |         loader: 'url-loader',
 73 |         options: {
 74 |           limit: 3000,
 75 |           name: 'static/fonts/[name].[hash].[ext]'
 76 |         }
 77 |       }
 78 |     ]
 79 |   },
 80 |   resolve: {
 81 |     extensions: ['.js', '.vue', '.json'],
 82 |     alias: {
 83 |       '@': path.resolve(__dirname, '../src/')
 84 |     }
 85 |   },
 86 |   externals: {
 87 |     spritejs: 'spritejs',
 88 |     // 'sprite-extend-shapes': 'spriteShapes',
 89 |     vue: 'Vue',
 90 |     'vue-router': 'VueRouter'
 91 |   },
 92 |   plugins: [
 93 |     new VueLoaderPlugin(),
 94 |     new Happypack({
 95 |       id: 'babel',
 96 |       loaders: [
 97 |         {
 98 |           loader: 'babel-loader'
 99 |         }
100 |       ],
101 |       threadPool: threadPoll,
102 |       verbose: false
103 |     }),
104 |     new ProgressBarPlugin({
105 |       format: 'build [:bar] :percent (:elapsed seconds)',
106 |       clear: false,
107 |       width: 60
108 |     }),
109 |     new HtmlWebpackPlugin({
110 |       template: path.resolve(__dirname, '../index.html'),
111 |       filename: 'index.html'
112 |     })
113 |   ]
114 | };
115 | 


--------------------------------------------------------------------------------
/docs/build/webpack.conf.dev.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const webpack = require('webpack');
 3 | const merge = require('webpack-merge');
 4 | 
 5 | const common = require('./webpack.conf.common');
 6 | 
 7 | module.exports = merge(common, {
 8 |   devServer: {
 9 |     contentBase: path.resolve(__dirname, '../src/'),
10 |     compress: true,
11 |     hot: false,
12 |     inline: true,
13 |     quiet: true,
14 |     open: true,
15 |     watchOptions: {
16 |       aggregateTimeout: 300,
17 |       poll: 1
18 |     }
19 |   },
20 |   devtool: 'source-map',
21 |   plugins: [
22 |     new webpack.NamedModulesPlugin(),
23 |     new webpack.HotModuleReplacementPlugin(),
24 |     new webpack.WatchIgnorePlugin([/\.d\.ts$/])
25 |   ]
26 | });
27 | 


--------------------------------------------------------------------------------
/docs/build/webpack.conf.prod.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const merge = require('webpack-merge');
 3 | 
 4 | const common = require('./webpack.conf.common');
 5 | 
 6 | module.exports = merge(common, {
 7 |   output: {
 8 |     path: path.join(__dirname, '../website'),
 9 |     filename: '[name].[hash].js',
10 |     chunkFilename: '[name].[hash:7].js'
11 |   }
12 | });
13 | 


--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>sprite-extend-shapes</title>
 8 |   </head>
 9 | 
10 |   <body>
11 |     <div id="app"></div>
12 |     <!-- vue -->
13 |     <script src="https://cdn.bootcss.com/vue/2.6.9/vue.min.js"></script>
14 |     <!-- vue-router -->
15 |     <script src="https://cdn.bootcss.com/vue-router/3.0.0/vue-router.min.js"></script>
16 |     <!-- spritejs -->
17 |     <script src="https://unpkg.com/spritejs/dist/spritejs.min.js"></script>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/docs/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "sprite-extend-shapes-docs",
 3 |   "version": "0.0.14",
 4 |   "description": "The docs for sprite-extend-shapes",
 5 |   "scripts": {
 6 |     "dev": "cross-env DEV_MODE=doc webpack-dev-server --config ./build/webpack.conf.dev.js",
 7 |     "build": "rm -rf ./website/* && cross-env NODE_ENV=production webpack --config ./build/webpack.conf.prod.js"
 8 |   },
 9 |   "author": "qwt",
10 |   "license": "MIT",
11 |   "devDependencies": {
12 |     "@babel/cli": "^7.2.3",
13 |     "@babel/core": "^7.2.2",
14 |     "@babel/plugin-external-helpers": "^7.2.0",
15 |     "@babel/plugin-proposal-class-properties": "^7.2.3",
16 |     "@babel/plugin-proposal-decorators": "^7.4.0",
17 |     "@babel/plugin-syntax-decorators": "^7.2.0",
18 |     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
19 |     "@babel/plugin-transform-runtime": "^7.2.0",
20 |     "@babel/preset-env": "^7.2.3",
21 |     "@babel/runtime": "^7.2.0",
22 |     "babel-decorators-runtime": "^0.2.0",
23 |     "babel-eslint": "^10.0.1",
24 |     "babel-loader": "^8.0.4",
25 |     "babel-plugin-external-helpers": "^6.22.0",
26 |     "codemirror": "^5.42.2",
27 |     "cross-env": "^5.2.0",
28 |     "css-loader": "^2.1.0",
29 |     "file-loader": "^3.0.1",
30 |     "happypack": "^5.0.1",
31 |     "highlight.js": "^9.13.1",
32 |     "html-webpack-plugin": "^3.2.0",
33 |     "husky": "^1.3.0",
34 |     "markdown-it": "^8.4.2",
35 |     "markdown-it-container": "^2.0.0",
36 |     "node-sass": "^4.11.0",
37 |     "progress-bar-webpack-plugin": "^1.12.1",
38 |     "rimraf": "^2.6.3",
39 |     "sass-loader": "^7.1.0",
40 |     "scapegoat": "^1.0.0",
41 |     "split.js": "^1.5.10",
42 |     "style-loader": "^0.23.1",
43 |     "uglifyjs-webpack-plugin": "^2.1.1",
44 |     "url-loader": "^1.1.2",
45 |     "vue-loader": "^15.5.1",
46 |     "vue-md-loader": "^1.1.0",
47 |     "vue-template-compiler": "^2.5.21",
48 |     "webpack": "^4.28.0",
49 |     "webpack-bundle-analyzer": "^3.0.3",
50 |     "webpack-cli": "^3.3.0",
51 |     "webpack-dev-server": "^3.1.10",
52 |     "webpack-hot-middleware": "^2.24.3",
53 |     "webpack-merge": "^4.1.5"
54 |   },
55 |   "dependencies": {}
56 | }
57 | 


--------------------------------------------------------------------------------
/docs/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <Header/>
 4 |     <router-view></router-view>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | import Header from './components/Header.vue'
10 | 
11 | export default {
12 |   name: 'app',
13 |   components: {
14 |     Header
15 |   }
16 | }
17 | </script>
18 | 
19 | <style lang="scss">
20 | @import './styles/index.scss';
21 | </style>
22 | 


--------------------------------------------------------------------------------
/docs/src/assets/computer.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1548065170864" class="icon" style="" viewBox="0 0 1547 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7284" xmlns:xlink="http://www.w3.org/1999/xlink" width="302.1484375" height="200"><defs><style type="text/css"></style></defs><path d="M1410.844444 887.466667v-819.2c0-36.408889-29.582222-68.266667-68.266666-68.266667h-1137.777778c-36.408889 0-68.266667 29.582222-68.266667 68.266667v819.2h-136.533333v91.022222h4.551111c9.102222 27.306667 34.133333 45.511111 63.715556 45.511111h1410.844444c29.582222 0 54.613333-18.204444 63.715556-45.511111h4.551111v-91.022222h-136.533334z m-1160.533333-773.688889h1046.755556v682.666666h-1046.755556v-682.666666z m637.155556 796.444444h-227.555556v-45.511111h227.555556v45.511111z" p-id="7285" fill="#dbdbdb"></path></svg>


--------------------------------------------------------------------------------
/docs/src/components/BlockDemo.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div :class="['block-demo', isFullscreen ? 'block-demo--fixed' : '']" ref="block">
  3 |     <div class="editor" ref="editor">
  4 |       <div class="bock-demo__ctrl">
  5 |         <button @click="fullscreen">{{ isFullscreen ? '还原' : '全屏' }}</button>
  6 |         <!-- <button>复制</button> -->
  7 |         <button @click="syncCode">运行</button>
  8 |       </div>
  9 |       <div class="bock-demo__code">
 10 |         <textarea ref="textarea"></textarea>
 11 |       </div>
 12 |     </div>
 13 |     <div class="preview" ref="preview">
 14 |       <div class="demo" ref="demo"></div>
 15 |     </div>
 16 |   </div>
 17 | </template>
 18 | 
 19 | <script>
 20 | import CodeMirror from 'codemirror';
 21 | import Split from 'split.js';
 22 | import {unescape} from 'scapegoat';
 23 | import 'codemirror/mode/htmlmixed/htmlmixed';
 24 | import 'codemirror/lib/codemirror.css';
 25 | 
 26 | export default {
 27 |   props: {
 28 |     tip: String,
 29 |     source: String
 30 |   },
 31 | 
 32 |   data() {
 33 |     return {
 34 |       editor: null,
 35 |       visible: true,
 36 | 
 37 |       isJSON: false,
 38 |       isFullscreen: false
 39 |     };
 40 |   },
 41 | 
 42 |   mounted() {
 43 |     let tip = this.tip.split(',');
 44 | 
 45 |     try {
 46 |       tip = JSON.parse(JSON.stringify(tip));
 47 |     } catch (e) {}
 48 | 
 49 |     this.isFullscreen = tip.indexOf('fullscreen') > -1;
 50 | 
 51 |     this.initEditor();
 52 | 
 53 |     try {
 54 |       this.$nextTick(() => {
 55 |         this.syncCode();
 56 |       });
 57 |     } catch (e) {
 58 |       throw e;
 59 |     }
 60 | 
 61 |     this.initSplit();
 62 |   },
 63 | 
 64 |   methods: {
 65 |     toggle() {
 66 |       this.visible = !this.visible;
 67 |     },
 68 | 
 69 |     unescape(html) {
 70 |       return unescape(html);
 71 |     },
 72 | 
 73 |     initSplit() {
 74 |       Split([this.$refs['editor'], this.$refs['preview']], {
 75 |         sizes: [50, 50]
 76 |       });
 77 |     },
 78 | 
 79 |     initEditor() {
 80 |       this.editor = CodeMirror.fromTextArea(this.$refs['textarea'], {
 81 |         mode: 'application/javascript',
 82 |         extraKeys: {
 83 |           'Ctrl-Space': 'autocomplete'
 84 |         },
 85 |         foldGutter: true,
 86 |         gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
 87 |         lineNumbers: true,
 88 |         lineWrapping: false
 89 |       });
 90 | 
 91 |       this.editor.getDoc().setValue(this.unescape(this.source));
 92 |     },
 93 | 
 94 |     syncCode() {
 95 |       const oDemo = this.$refs['demo'];
 96 |       oDemo.innerHTML = '';
 97 |       eval(this.editor.getValue());
 98 |     },
 99 | 
100 |     fullscreen() {
101 |       this.isFullscreen = !this.isFullscreen;
102 |     }
103 |   }
104 | };
105 | </script>
106 | 
107 | <style lang="scss" scoped>
108 | .block-demo {
109 |   position: relative;
110 |   margin-top: 1.2em;
111 |   box-sizing: border-box;
112 | 
113 |   height: 500px;
114 |   display: flex;
115 |   justify-content: space-between;
116 |   align-items: stretch;
117 |   border: 1px solid #efefef;
118 |   background: #fff;
119 | }
120 | 
121 | .block-demo--fixed {
122 |   position: fixed;
123 |   top: 0;
124 |   left: 0;
125 |   width: 100vw;
126 |   height: 100vh;
127 |   z-index: 1000;
128 |   margin-top: 0 !important;
129 | }
130 | 
131 | .block-demo + .block-demo {
132 |   margin-top: 30px;
133 | }
134 | 
135 | .block-demo > .editor,
136 | .block-demo > .preview {
137 |   box-sizing: border-box;
138 |   width: 50%;
139 |   height: 100%;
140 | }
141 | 
142 | .block-demo > .preview {
143 |   box-sizing: border-box;
144 |   max-height: 100%;
145 |   padding: 1rem;
146 |   overflow: hidden;
147 | }
148 | 
149 | .editor {
150 |   background: #f8fafe;
151 | }
152 | 
153 | .bock-demo__ctrl {
154 |   height: 45px;
155 |   padding: 0 15px;
156 |   border-bottom: 1px solid #ddd;
157 |   text-align: right;
158 | 
159 |   display: flex;
160 |   justify-content: flex-end;
161 |   align-items: center;
162 | }
163 | 
164 | .bock-demo__ctrl button + button {
165 |   margin-left: 10px;
166 | }
167 | 
168 | .bock-demo__code {
169 |   height: calc(100% - 46px);
170 | }
171 | 
172 | .block-demo .demo {
173 |   height: 100%;
174 | }
175 | </style>
176 | 


--------------------------------------------------------------------------------
/docs/src/components/Header.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <header>
 3 |     <div class="logo">
 4 |       <router-link to="/">
 5 |         <h2>
 6 |           <span>sprite-extend-shapes</span>
 7 |         </h2>
 8 |       </router-link>
 9 |     </div>
10 | 
11 |     <nav>
12 |       <ul>
13 |         <li>
14 |           <router-link to="/home">首页</router-link>
15 |         </li>
16 |         <li>
17 |           <router-link to="/api">API 文档</router-link>
18 |         </li>
19 | 
20 |         <li>
21 |           <a
22 |             href="https://github.com/spritejs/sprite-extend-shapes"
23 |             target="_blank"
24 |             ref="noopener norefer"
25 |           >Github</a>
26 |         </li>
27 | 
28 |         <!-- <li>
29 |           <router-link to="/json-editor">JSON Editor</router-link>
30 |         </li>-->
31 |         <!-- <li>
32 |           <router-link to="/">如何使用</router-link>
33 |         </li>-->
34 |       </ul>
35 |     </nav>
36 |   </header>
37 | </template>
38 | 
39 | <script>
40 | export default {};
41 | </script>
42 | 
43 | <style lang="scss" scoped>
44 | header {
45 |   position: relative;
46 |   z-index: 100;
47 |   padding: 0 40px;
48 |   height: 60px;
49 |   line-height: 1.5;
50 |   // background: #fdfdfd;
51 |   box-shadow: 0 2px 8px rgba(229, 229, 229, 0.5);
52 | 
53 |   display: flex;
54 |   justify-content: space-between;
55 |   align-items: center;
56 | 
57 |   // color: #fff;
58 | 
59 |   .logo,
60 |   nav {
61 |     display: inline-flex;
62 |   }
63 | 
64 |   ul {
65 |     display: inline-flex;
66 |     list-style: none;
67 |     padding: 0;
68 |   }
69 | 
70 |   li {
71 |     display: inline-flex;
72 | 
73 |     + li {
74 |       margin-left: 1rem;
75 |     }
76 |   }
77 | }
78 | </style>
79 | 


--------------------------------------------------------------------------------
/docs/src/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import App from './App.vue';
 3 | import router from './router';
 4 | import BlockDemo from './components/BlockDemo.vue';
 5 | import 'highlight.js/styles/xcode.css';
 6 | 
 7 | import {install} from '../../lib';
 8 | 
 9 | spritejs.use(install);
10 | 
11 | Vue.config.productionTip = false;
12 | 
13 | Vue.component('block-demo', BlockDemo);
14 | 
15 | new Vue({
16 |   render: h => h(App),
17 |   router
18 | }).$mount('#app');
19 | 


--------------------------------------------------------------------------------
/docs/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import Router from 'vue-router';
 3 | 
 4 | import docs from '../views/api/routes.js';
 5 | 
 6 | Vue.use(Router);
 7 | 
 8 | export default new Router({
 9 |   mode: 'hash',
10 |   routes: [
11 |     {
12 |       path: '/',
13 |       redirect: '/home'
14 |     },
15 | 
16 |     {
17 |       path: '/home',
18 |       component: () => import('../views/home/index.md')
19 |     },
20 | 
21 |     {
22 |       path: '/api',
23 |       component: () => import('../views/api/index.vue'),
24 |       children: docs.filter(route => 'path' in route)
25 |     }
26 |   ]
27 | });
28 | 


--------------------------------------------------------------------------------
/docs/src/styles/index.scss:
--------------------------------------------------------------------------------
  1 | // ::-webkit-scrollbar {
  2 | //   width: 6px;
  3 | //   height: 6px;
  4 | // }
  5 | 
  6 | // ::-webkit-scrollbar-track {
  7 | //   opacity: 0;
  8 | // }
  9 | 
 10 | // ::-webkit-scrollbar-thumb {
 11 | //   background-color: hsla(220, 4%, 58%, 0.3);
 12 | //   border-radius: 5px;
 13 | // }
 14 | @import './normalize.scss';
 15 | 
 16 | @import './markdown.scss';
 17 | 
 18 | *,
 19 | *::before,
 20 | *::after {
 21 |   box-sizing: border-box;
 22 | }
 23 | 
 24 | html,
 25 | body {
 26 |   height: 100%;
 27 |   margin: 0;
 28 |   padding: 0;
 29 | }
 30 | 
 31 | ul {
 32 |   padding: 0;
 33 |   margin: 0;
 34 | }
 35 | 
 36 | a {
 37 |   text-decoration: none !important;
 38 | }
 39 | 
 40 | a.router-link-active {
 41 |   color: #3273dc;
 42 | }
 43 | 
 44 | img {
 45 |   display: block;
 46 |   max-width: 100%;
 47 |   height: auto;
 48 | }
 49 | 
 50 | select,
 51 | input,
 52 | button {
 53 |   display: inline-block;
 54 |   background-color: #fff;
 55 |   background-image: none;
 56 |   border-radius: 4px;
 57 |   border: 1px solid #dcdfe6;
 58 |   box-sizing: border-box;
 59 |   line-height: 1.5;
 60 |   color: #606266;
 61 |   padding: 0.375rem 0.75rem;
 62 |   outline: none;
 63 |   cursor: pointer;
 64 | }
 65 | 
 66 | input.input-sm,
 67 | button.btn-sm {
 68 |   padding: 0.25rem 0.5rem;
 69 |   font-size: 0.875rem;
 70 | 
 71 |   border-radius: 0.2rem;
 72 | }
 73 | 
 74 | #app {
 75 |   font-family: 'Avenir', Helvetica, Arial, sans-serif;
 76 |   -webkit-font-smoothing: antialiased;
 77 |   -moz-osx-font-smoothing: grayscale;
 78 |   height: 100vh;
 79 | 
 80 |   display: flex;
 81 |   flex-direction: column;
 82 | 
 83 |   .page {
 84 |     display: flex;
 85 |     flex: 1;
 86 |   }
 87 | }
 88 | 
 89 | ul {
 90 |   padding: 0;
 91 | }
 92 | 
 93 | a {
 94 |   text-decoration: none;
 95 |   color: inherit;
 96 | }
 97 | 
 98 | .CodeMirror {
 99 |   height: 100% !important;
100 | }
101 | 
102 | .gutter {
103 |   width: 0 !important;
104 |   border-right: 2px solid #dedeeb;
105 |   background-color: transparent;
106 |   cursor: col-resize;
107 |   margin-left: -7px;
108 | }
109 | 
110 | .markdown-body {
111 |   // max-width: 1200px;
112 |   margin: 0 auto;
113 | }
114 | 
115 | iframe.chart-frame {
116 |   width: 100%;
117 |   height: 100%;
118 | }
119 | 
120 | .page {
121 |   position: relative;
122 |   padding-left: 200px;
123 | 
124 |   aside {
125 |     position: absolute;
126 |     left: 0;
127 |     top: 0;
128 |     z-index: 1000;
129 |     width: 200px;
130 |     height: 100%;
131 |     width: 200px;
132 |     border-right: 1px solid #e9e9e9;
133 |     background-color: #f8fafe;
134 |     transition: all 0.25s ease-in-out;
135 | 
136 |     nav {
137 |       color: #333;
138 |       height: 100%;
139 |       overflow: auto;
140 |     }
141 | 
142 |     button {
143 |       display: none;
144 |       position: absolute;
145 |       right: 0;
146 |       top: 50px;
147 |       transform: translateX(100%);
148 |       width: 2.5rem;
149 |     }
150 |   }
151 | 
152 |   nav li a {
153 |     display: inline-block;
154 |     width: 100%;
155 |     padding: 10px 30px;
156 |   }
157 | 
158 |   nav li h3 {
159 |     font-size: 14px;
160 |     padding-left: 20px;
161 |     color: rgba(0, 0, 0, 0.45);
162 |   }
163 | 
164 |   nav li a.router-link-active {
165 |     color: #3a8ee6;
166 |     border-right: 2px solid #3a8ee6;
167 |     background-color: rgba(58, 142, 230, 0.2);
168 |   }
169 | 
170 |   article.container {
171 |     width: 100%;
172 |     height: 100%;
173 |     padding: 24px 20px 10px 20px;
174 |     overflow: auto;
175 |   }
176 | 
177 |   @media (max-width: 768px) {
178 |     article.container {
179 |       padding: 15px;
180 |     }
181 | 
182 |     aside {
183 |       transform: translateX(-200px);
184 | 
185 |       button {
186 |         display: block;
187 |       }
188 |     }
189 | 
190 |     aside.is-show {
191 |       transform: translateX(0);
192 |     }
193 |   }
194 | }
195 | 
196 | @media (max-width: 768px) {
197 |   .page {
198 |     padding-left: 0;
199 |   }
200 | }
201 | 


--------------------------------------------------------------------------------
/docs/src/views/api/docs/arc.md:
--------------------------------------------------------------------------------
 1 | ## Arc
 2 | 
 3 | :::demo
 4 | 
 5 | ```javascript
 6 | const {Scene, Layer, Arc} = spritejs;
 7 | 
 8 | const scene = new Scene('.block-demo .demo', {
 9 |   viewport: [400, 300],
10 |   displayRatio: 'auto'
11 | });
12 | const layer = scene.layer();
13 | 
14 | const arc = new Arc();
15 | arc.attr({
16 |   radius: 50,
17 |   startAngle: Math.PI * 0.75,
18 |   endAngle: Math.PI * 2.75,
19 |   lineWidth: 5,
20 | 
21 |   strokeColor: 'red',
22 |   bgcolor: '#ccc'
23 | });
24 | 
25 | arc.on('mousemove', evt => {
26 |   arc.attr('strokeColor', 'yellow');
27 |   evt.stopDispatch();
28 | });
29 | 
30 | arc.on('mouseleave', evt => {
31 |   arc.attr('strokeColor', 'red');
32 |   evt.stopDispatch();
33 | });
34 | 
35 | layer.append(arc);
36 | ```
37 | 
38 | :::
39 | 


--------------------------------------------------------------------------------
/docs/src/views/api/docs/circle.md:
--------------------------------------------------------------------------------
 1 | ## Circle
 2 | 
 3 | :::demo
 4 | 
 5 | ```javascript
 6 | const {Scene, Layer, Circle} = spritejs;
 7 | 
 8 | const scene = new Scene('.block-demo .demo', {
 9 |   viewport: [400, 300],
10 |   displayRatio: 'auto'
11 | });
12 | const layer = scene.layer();
13 | 
14 | const circle = new Circle();
15 | circle.attr({
16 |   radius: 30,
17 |   lineWidth: 5,
18 |   strokeColor: 'red',
19 |   bgcolor: '#eee'
20 | });
21 | 
22 | circle.on('mousemove', evt => {
23 |   circle.attr('strokeColor', 'yellow');
24 |   evt.stopDispatch();
25 | });
26 | 
27 | circle.on('mouseleave', evt => {
28 |   circle.attr('strokeColor', 'red');
29 |   evt.stopDispatch();
30 | });
31 | 
32 | layer.append(circle);
33 | ```
34 | 
35 | :::
36 | 


--------------------------------------------------------------------------------
/docs/src/views/api/docs/ellipse.md:
--------------------------------------------------------------------------------
 1 | ## Ellipse
 2 | 
 3 | :::demo
 4 | 
 5 | ```javascript
 6 | const {Scene, Layer, Ellipse} = spritejs;
 7 | 
 8 | const scene = new Scene('.block-demo .demo', {
 9 |   viewport: [400, 300],
10 |   displayRatio: 'auto'
11 | });
12 | const layer = scene.layer();
13 | 
14 | const ellipse = new Ellipse();
15 | ellipse.attr({
16 |   radiusX: 30,
17 |   radiusY: 80,
18 |   fillColor: 'red',
19 |   bgcolor: '#eee',
20 |   lineWidth: 5
21 | });
22 | 
23 | ellipse.on('mousemove', evt => {
24 |   ellipse.attr('strokeColor', 'yellow');
25 |   evt.stopDispatch();
26 | });
27 | 
28 | ellipse.on('mouseleave', evt => {
29 |   ellipse.attr('strokeColor', 'red');
30 |   evt.stopDispatch();
31 | });
32 | 
33 | layer.append(ellipse);
34 | ```
35 | 
36 | :::
37 | 


--------------------------------------------------------------------------------
/docs/src/views/api/docs/ellipseArc.md:
--------------------------------------------------------------------------------
 1 | ## EllipseArc
 2 | 
 3 | :::demo
 4 | 
 5 | ```javascript
 6 | const {Scene, Layer, EllipseArc} = spritejs;
 7 | 
 8 | const scene = new Scene('.block-demo .demo', {
 9 |   viewport: [400, 300],
10 |   displayRatio: 'auto'
11 | });
12 | const layer = scene.layer();
13 | 
14 | const ellipseArc = new EllipseArc();
15 | ellipseArc.attr({
16 |   radiusX: 30,
17 |   endAngle: Math.PI * 2,
18 |   radiusY: 80,
19 |   strokeColor: 'red',
20 |   bgcolor: '#eee',
21 |   lineWidth: 5
22 | });
23 | 
24 | layer.append(ellipseArc);
25 | ```
26 | 
27 | :::
28 | 


--------------------------------------------------------------------------------
/docs/src/views/api/docs/ellipseSector.md:
--------------------------------------------------------------------------------
 1 | ## EllipseSector
 2 | 
 3 | :::demo
 4 | 
 5 | ```javascript
 6 | const {Scene, Layer, EllipseSector} = spritejs;
 7 | 
 8 | const scene = new Scene('.block-demo .demo', {
 9 |   viewport: [400, 300],
10 |   displayRatio: 'auto'
11 | });
12 | const layer = scene.layer();
13 | 
14 | const ellipseSector = new EllipseSector();
15 | ellipseSector.attr({
16 |   radiusX: 30,
17 |   radiusY: 80,
18 |   startAngle: 0,
19 |   bgcolor: '#eee',
20 |   endAngle: Math.PI * 1.3,
21 |   lineWidth: 1,
22 |   strokeColor: 'red'
23 | });
24 | 
25 | ellipseSector.on('mousemove', evt => {
26 |   ellipseSector.attr('strokeColor', 'yellow');
27 |   evt.stopDispatch();
28 | });
29 | 
30 | ellipseSector.on('mouseleave', evt => {
31 |   ellipseSector.attr('strokeColor', 'red');
32 |   evt.stopDispatch();
33 | });
34 | 
35 | layer.append(ellipseSector);
36 | ```
37 | 
38 | :::
39 | 


--------------------------------------------------------------------------------
/docs/src/views/api/docs/polycurve.md:
--------------------------------------------------------------------------------
 1 | ## Polycurve
 2 | 
 3 | :::demo
 4 | 
 5 | ```javascript
 6 | const {Scene, Layer, Polycurve} = spritejs;
 7 | 
 8 | const scene = new Scene('.block-demo .demo', {
 9 |   viewport: [400, 300],
10 |   displayRatio: 'auto'
11 | });
12 | const layer = scene.layer();
13 | 
14 | const polycurve = new Polycurve();
15 | polycurve.attr({
16 |   pos: [10, 10],
17 |   startPoint: [10, 10],
18 |   points: [
19 |     [21, 58, 221, 189.2639320225002, 165.8680339887499, 189.2639320225002],
20 |     [
21 |       165.8680339887499,
22 |       189.2639320225002,
23 |       110.73606797749979,
24 |       189.2639320225002,
25 |       110.73606797749979,
26 |       278.5278640450004
27 |     ]
28 |   ],
29 |   lineWidth: 1,
30 |   strokeColor: '#f00',
31 |   bgcolor: '#eee',
32 |   fillColor: 'green'
33 | });
34 | 
35 | polycurve.on('mouseenter', () => {
36 |   polycurve.attr('fillColor', 'yellow');
37 | });
38 | 
39 | polycurve.on('click', () => {
40 |   polycurve.attr('fillColor', 'yellow');
41 | });
42 | 
43 | polycurve.on('mouseleave', () => {
44 |   polycurve.attr('fillColor', 'blue');
45 | });
46 | 
47 | layer.append(polycurve);
48 | ```
49 | 
50 | :::
51 | 


--------------------------------------------------------------------------------
/docs/src/views/api/docs/polygon.md:
--------------------------------------------------------------------------------
 1 | ## Polygon
 2 | 
 3 | :::demo
 4 | 
 5 | ```javascript
 6 | const {Scene, Layer, Polygon} = spritejs;
 7 | 
 8 | const scene = new Scene('.block-demo .demo', {
 9 |   viewport: [400, 300],
10 |   displayRatio: 'auto'
11 | });
12 | const layer = scene.layer();
13 | 
14 | let pg = new Polygon();
15 | 
16 | pg.attr({
17 |   strokeColor: 'red',
18 |   fillColor: 'yellow',
19 |   lineWidth: 2,
20 |   points: [[10, 10], [100, 100], [200, 50]],
21 |   bgcolor: '#ccc'
22 | });
23 | 
24 | pg.on('mousemove', evt => {
25 |   pg.attr('strokeColor', 'blue');
26 |   evt.stopDispatch();
27 | });
28 | 
29 | pg.on('mouseleave', evt => {
30 |   pg.attr('strokeColor', 'red');
31 |   evt.stopDispatch();
32 | });
33 | 
34 | layer.append(pg);
35 | ```
36 | 
37 | :::
38 | 


--------------------------------------------------------------------------------
/docs/src/views/api/docs/polyline.md:
--------------------------------------------------------------------------------
 1 | ## Polyline
 2 | 
 3 | :::demo
 4 | 
 5 | ```javascript
 6 | const {Scene, Layer, Polyline} = spritejs;
 7 | 
 8 | const scene = new Scene('.block-demo .demo', {
 9 |   viewport: [400, 300],
10 |   displayRatio: 'auto'
11 | });
12 | const layer = scene.layer();
13 | 
14 | const polyline = new Polyline();
15 | polyline.attr({
16 |   pos: [10, 10],
17 |   strokeColor: {
18 |     vector: [0, 0, 150, 150],
19 |     colors: [{offset: 0, color: 'red'}, {offset: 1, color: 'green'}]
20 |   },
21 |   lineWidth: 1,
22 |   points: [
23 |     [216.44779756291575, 31.3368559404028],
24 |     [35.94034007190373, 135.81354964617464],
25 |     [245.94034007190373, 235.81354964617464]
26 |   ],
27 |   tolerance: 7,
28 |   bgcolor: '#eee',
29 |   // smooth: true,
30 |   close: true
31 | });
32 | polyline.on('click', () => alert('click'));
33 | polyline.on('mousemove', () => polyline.attr('smooth', true));
34 | polyline.on('mouseleave', () => polyline.attr('smooth', false));
35 | 
36 | layer.append(polyline);
37 | ```
38 | 
39 | :::
40 | 


--------------------------------------------------------------------------------
/docs/src/views/api/docs/rect.md:
--------------------------------------------------------------------------------
 1 | ## Rect
 2 | 
 3 | :::demo
 4 | 
 5 | ```javascript
 6 | const {Scene, Layer, Rect} = spritejs;
 7 | 
 8 | const scene = new Scene('.block-demo .demo', {
 9 |   viewport: [400, 300],
10 |   displayRatio: 'auto'
11 | });
12 | const layer = scene.layer();
13 | 
14 | const rect = new Rect();
15 | rect.attr({
16 |   pos: [10, 10],
17 |   strokeColor: 'red',
18 |   angle: 60,
19 |   lineWidth: 1,
20 |   // size: [100, 100],
21 |   width: 100,
22 |   height: 100,
23 |   fillColor: 'yellow',
24 |   bgcolor: '#eee'
25 | });
26 | 
27 | rect.on('mouseenter', evt => {
28 |   rect.attr('strokeColor', 'yellow');
29 |   evt.stopDispatch();
30 | });
31 | 
32 | rect.on('mouseleave', evt => {
33 |   rect.attr('strokeColor', 'red');
34 |   evt.stopDispatch();
35 | });
36 | 
37 | layer.append(rect);
38 | ```
39 | 
40 | :::
41 | 


--------------------------------------------------------------------------------
/docs/src/views/api/docs/ring.md:
--------------------------------------------------------------------------------
 1 | ## Ring
 2 | 
 3 | :::demo
 4 | 
 5 | ```javascript
 6 | const {Scene, Layer, Ring} = spritejs;
 7 | 
 8 | const scene = new Scene('.block-demo .demo', {
 9 |   viewport: [400, 300],
10 |   displayRatio: 'auto'
11 | });
12 | const layer = scene.layer();
13 | 
14 | const ring = new Ring();
15 | ring.attr({
16 |   pos: [60, 40],
17 |   innerRadius: 15,
18 |   outerRadius: 50,
19 |   fillColor: 'green',
20 |   startAngle: Math.PI * 0.8,
21 |   endAngle: Math.PI * 1.4,
22 |   lineWidth: 2,
23 |   bgcolor: '#eee'
24 | });
25 | 
26 | ring.on('mousemove', evt => {
27 |   ring.attr('strokeColor', 'yellow');
28 |   evt.stopDispatch();
29 | });
30 | 
31 | ring.on('mouseleave', evt => {
32 |   ring.attr('strokeColor', 'red');
33 |   evt.stopDispatch();
34 | });
35 | 
36 | layer.append(ring);
37 | ```
38 | 
39 | :::
40 | 


--------------------------------------------------------------------------------
/docs/src/views/api/docs/sector.md:
--------------------------------------------------------------------------------
 1 | ## Sector
 2 | 
 3 | :::demo
 4 | 
 5 | ```javascript
 6 | const {Scene, Layer, Sector} = spritejs;
 7 | 
 8 | const scene = new Scene('.block-demo .demo', {
 9 |   viewport: [400, 300],
10 |   displayRatio: 'auto'
11 | });
12 | const layer = scene.layer();
13 | 
14 | const sector = new Sector();
15 | sector.attr({
16 |   startAngle: 0,
17 |   endAngle: Math.PI * 0.7,
18 |   radius: 50,
19 |   lineWidth: 5,
20 |   bgcolor: '#eee',
21 |   strokeColor: 'red'
22 | });
23 | 
24 | sector.on('mousemove', evt => {
25 |   sector.attr('strokeColor', 'yellow');
26 |   evt.stopDispatch();
27 | });
28 | 
29 | sector.on('mouseleave', evt => {
30 |   sector.attr('strokeColor', 'red');
31 |   evt.stopDispatch();
32 | });
33 | 
34 | layer.append(sector);
35 | ```
36 | 
37 | :::
38 | 


--------------------------------------------------------------------------------
/docs/src/views/api/docs/star.md:
--------------------------------------------------------------------------------
 1 | ## Star
 2 | 
 3 | :::demo
 4 | 
 5 | ```javascript
 6 | const {Scene, Layer, Star} = spritejs;
 7 | 
 8 | const scene = new Scene('.block-demo .demo', {
 9 |   viewport: [400, 300],
10 |   displayRatio: 'auto'
11 | });
12 | const layer = scene.layer();
13 | 
14 | const star = new Star();
15 | star.attr({
16 |   pos: [50, 40],
17 |   radius: 40,
18 |   innerRadius: 24,
19 |   color: '#000',
20 |   lineWidth: 4,
21 |   angles: 5,
22 |   bgcolor: '#eee',
23 |   fillColor: 'red'
24 |   //anchor: [ 0.5, 0.5 ]
25 | });
26 | 
27 | star.on('mouseenter', evt => {
28 |   star.attr('fillColor', 'green');
29 |   evt.stopDispatch();
30 | });
31 | 
32 | star.on('mouseleave', evt => {
33 |   star.attr('fillColor', 'red');
34 |   evt.stopDispatch();
35 | });
36 | 
37 | layer.append(star);
38 | ```
39 | 
40 | :::
41 | 


--------------------------------------------------------------------------------
/docs/src/views/api/docs/triangle.md:
--------------------------------------------------------------------------------
 1 | ## Triangle
 2 | 
 3 | :::demo
 4 | 
 5 | ```javascript
 6 | const {Scene, Layer, Triangle} = spritejs;
 7 | 
 8 | const scene = new Scene('.block-demo .demo', {
 9 |   viewport: [400, 300],
10 |   displayRatio: 'auto'
11 | });
12 | const layer = scene.layer();
13 | 
14 | const triangle = new Triangle();
15 | triangle.attr({
16 |   pos: [70, 10],
17 |   strokeColor: 'red',
18 |   sides: [80, 80],
19 |   angle: 60,
20 |   lineWidth: 1,
21 |   fillColor: 'yellow',
22 |   bgcolor: '#eee'
23 | });
24 | 
25 | triangle.on('mouseenter', evt => {
26 |   triangle.attr('strokeColor', 'yellow');
27 |   evt.stopDispatch();
28 | });
29 | 
30 | triangle.on('mouseleave', evt => {
31 |   triangle.attr('strokeColor', 'red');
32 |   evt.stopDispatch();
33 | });
34 | 
35 | layer.append(triangle);
36 | ```
37 | 
38 | :::
39 | 


--------------------------------------------------------------------------------
/docs/src/views/api/docs/wave.md:
--------------------------------------------------------------------------------
 1 | ## Wave
 2 | 
 3 | :::demo
 4 | 
 5 | ```javascript
 6 | const {Scene, Layer, Wave} = spritejs;
 7 | 
 8 | const scene = new Scene('.block-demo .demo', {
 9 |   viewport: [400, 300],
10 |   displayRatio: 'auto'
11 | });
12 | const layer = scene.layer();
13 | 
14 | const wave = new Wave();
15 | wave.attr({
16 |   pos: [10, 10],
17 |   lineWidth: 5,
18 |   color: '#158bca',
19 |   fillColor: '#158bca',
20 |   bgcolor: '#eee',
21 | 
22 |   percent: 0.6,
23 |   amplitude: 20,
24 |   shape:
25 |     'M23.6,0c-3.4,0-6.3,2.7-7.6,5.6C14.7,2.7,11.8,0,8.4,0C3.8,0,0,3.8,0,8.4c0,9.4,9.5,11.9,16,21.2 c6.1-9.3,16-12.1,16-21.2C32,3.8,28.2,0,23.6,0z',
26 |   shapeScale: 4,
27 |   shapeColor: 'red',
28 |   shapeFillColor: 'transparent',
29 |   wavesColor: 'red',
30 | 
31 |   speed: 0
32 | });
33 | 
34 | layer.append(wave);
35 | 
36 | let speed = 0;
37 | const step = () => {
38 |   speed += 0.1;
39 |   wave.attr('speed', speed);
40 |   requestAnimationFrame(step);
41 | };
42 | step();
43 | 
44 | const wave2 = new Wave();
45 | wave2.attr({
46 |   pos: [200, 15],
47 |   radius: 50,
48 |   offset: 10,
49 |   lineWidth: 5,
50 |   bgcolor: '#eee',
51 | 
52 |   wavesColor: '#158bca',
53 |   outlineColor: '#158bca',
54 |   percent: 0.6,
55 |   amplitude: 20,
56 |   speed: 0
57 | });
58 | 
59 | layer.append(wave2);
60 | ```
61 | 
62 | :::
63 | 


--------------------------------------------------------------------------------
/docs/src/views/api/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="page">
 3 |     <aside :class="showMenu ? 'is-show' : ''">
 4 |       <nav>
 5 |         <ul>
 6 |           <template v-for="(item, i) in navItems">
 7 |             <li v-if="!item.redirect" :key="i">
 8 |               <router-link
 9 |                 v-if="item.path && item.component"
10 |                 :to="'/api/' + item.path"
11 |               >{{ item.title.replace(/^(\w)/, $1 => $1.toUpperCase()) }}</router-link>
12 |               <h3 v-else>{{ item.title.replace(/^(\w)/, $1 => $1.toUpperCase()) }}</h3>
13 |             </li>
14 |           </template>
15 |         </ul>
16 |       </nav>
17 |       <button @click="toggleShowMenu">
18 |         <svg
19 |           viewBox="0 0 1024 1024"
20 |           class
21 |           data-icon="bars"
22 |           width="1em"
23 |           height="1em"
24 |           fill="currentColor"
25 |           aria-hidden="true"
26 |         >
27 |           <path
28 |             d="M912 192H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 284H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 284H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM104 228a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm0 284a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm0 284a56 56 0 1 0 112 0 56 56 0 1 0-112 0z"
29 |           ></path>
30 |         </svg>
31 |       </button>
32 |     </aside>
33 | 
34 |     <article class="container">
35 |       <router-view class="markdown-body"></router-view>
36 |     </article>
37 |   </div>
38 | </template>
39 | 
40 | 
41 | <script>
42 | import navItems from './routes.js';
43 | 
44 | export default {
45 |   data() {
46 |     return {
47 |       navItems,
48 |       showMenu: false
49 |     };
50 |   },
51 | 
52 |   methods: {
53 |     toggleShowMenu() {
54 |       this.showMenu = !this.showMenu;
55 |     }
56 |   }
57 | };
58 | </script>
59 | 
60 | 


--------------------------------------------------------------------------------
/docs/src/views/api/routes.js:
--------------------------------------------------------------------------------
  1 | export default [
  2 |   {
  3 |     title: '',
  4 |     path: '',
  5 |     redirect: 'ellipseSector'
  6 |   },
  7 | 
  8 |   {
  9 |     title: '圆形'
 10 |   },
 11 | 
 12 |   {
 13 |     title: 'ellipseSector',
 14 |     path: 'ellipseSector',
 15 |     component: () => import('./docs/ellipseSector.md')
 16 |   },
 17 | 
 18 |   {
 19 |     title: 'ellipseArc',
 20 |     path: 'ellipseArc',
 21 |     component: () => import('./docs/ellipseArc.md')
 22 |   },
 23 | 
 24 |   {
 25 |     title: 'ellipse',
 26 |     path: 'ellipse',
 27 |     component: () => import('./docs/ellipse.md')
 28 |   },
 29 | 
 30 |   {
 31 |     title: 'circle',
 32 |     path: 'circle',
 33 |     component: () => import('./docs/circle.md')
 34 |   },
 35 | 
 36 |   {
 37 |     title: 'sector',
 38 |     path: 'sector',
 39 |     component: () => import('./docs/sector.md')
 40 |   },
 41 | 
 42 |   {
 43 |     title: '多边形'
 44 |   },
 45 | 
 46 |   {
 47 |     title: 'polygon',
 48 |     path: 'polygon',
 49 |     component: () => import('./docs/polygon.md')
 50 |   },
 51 | 
 52 |   {
 53 |     title: 'triangle',
 54 |     path: 'triangle',
 55 |     component: () => import('./docs/triangle.md')
 56 |   },
 57 | 
 58 |   {
 59 |     title: 'rect',
 60 |     path: 'rect',
 61 |     component: () => import('./docs/rect.md')
 62 |   },
 63 | 
 64 |   {
 65 |     title: 'star',
 66 |     path: 'star',
 67 |     component: () => import('./docs/star.md')
 68 |   },
 69 | 
 70 |   {
 71 |     title: '曲线'
 72 |   },
 73 | 
 74 |   {
 75 |     title: 'polycurve',
 76 |     path: 'polycurve',
 77 |     component: () => import('./docs/polycurve.md')
 78 |   },
 79 | 
 80 |   {
 81 |     title: 'polyline',
 82 |     path: 'polyline',
 83 |     component: () => import('./docs/polyline.md')
 84 |   },
 85 | 
 86 |   {
 87 |     title: '其他'
 88 |   },
 89 | 
 90 |   {
 91 |     title: 'arc',
 92 |     path: 'arc',
 93 |     component: () => import('./docs/arc.md')
 94 |   },
 95 | 
 96 |   {
 97 |     title: 'ring',
 98 |     path: 'ring',
 99 |     component: () => import('./docs/ring.md')
100 |   },
101 | 
102 |   {
103 |     title: 'wave',
104 |     path: 'wave',
105 |     component: () => import('./docs/wave.md')
106 |   }
107 | ];
108 | 


--------------------------------------------------------------------------------
/docs/src/views/home/index.md:
--------------------------------------------------------------------------------
 1 | <article style="width: 96%" class="markdown-body">
 2 | 
 3 | ## 安装
 4 | 
 5 | ### 使用 npm 或 yarn 安装
 6 | 
 7 | ```shell
 8 | npm i @spritejs/shapes
 9 | ```
10 | 
11 | ## 使用
12 | 
13 | ```javascript
14 | import * as spritejs from 'spritejs';
15 | import Shapes from '@spritejs/shapes'
16 | spritejs.use(Shapes);
17 | ```
18 | 
19 | ### 手动加载
20 | 
21 | ```javascript
22 | import * as spritejs from 'spritejs';
23 | import {Circle} from '@spritejs/shapes';
24 | 
25 | spritejs.use(Circle);
26 | ```
27 | 
28 | :::demo
29 | 
30 | ```javascript
31 | const {Scene, Layer, Polycurve} = spritejs;
32 | 
33 | const scene = new Scene('.block-demo .demo', {
34 |   resolution: [400, 300],
35 |   displayRatio: 'auto'
36 | });
37 | const layer = scene.layer();
38 | 
39 | const polycurve = new Polycurve();
40 | polycurve.attr({
41 |   pos: [10, 10],
42 |   startPoint: [10, 10],
43 |   points: [
44 |     [21, 58, 221, 189.2639320225002, 165.8680339887499, 189.2639320225002],
45 |     [
46 |       165.8680339887499,
47 |       189.2639320225002,
48 |       110.73606797749979,
49 |       189.2639320225002,
50 |       110.73606797749979,
51 |       278.5278640450004
52 |     ]
53 |   ],
54 |   lineWidth: 1,
55 |   color: '#f00',
56 |   fillColor: 'green'
57 | });
58 | 
59 | polycurve.on('mouseenter', () => {
60 |   polycurve.attr('fillColor', 'yellow');
61 | });
62 | 
63 | polycurve.on('click', () => {
64 |   polycurve.attr('fillColor', 'yellow');
65 | });
66 | 
67 | polycurve.on('mouseleave', () => {
68 |   polycurve.attr('fillColor', 'red');
69 | });
70 | 
71 | layer.append(polycurve);
72 | ```
73 | 
74 | :::
75 | 
76 | </article>
77 | 


--------------------------------------------------------------------------------
/docs/website/1.71b3875.js:
--------------------------------------------------------------------------------
1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[1],{173:function(s,t,r){"use strict";r.r(t);var a={components:{}},n=r(17),e=Object(n.a)(a,function(){var s=this,t=s.$createElement,r=s._self._c||t;return r("section",[r("h2",[s._v("Arc")]),s._v(" "),r("block-demo",{attrs:{tip:"",source:"const {Scene, Layer, Arc} = spritejs;\n\nconst scene = new Scene('.block-demo .demo', {\n  viewport: [400, 300],\n  displayRatio: 'auto'\n});\nconst layer = scene.layer();\n\nconst arc = new Arc();\narc.attr({\n  radius: 50,\n  startAngle: Math.PI * 0.75,\n  endAngle: Math.PI * 2.75,\n  lineWidth: 5,\n\n  strokeColor: 'red',\n  bgcolor: '#ccc'\n});\n\narc.on('mousemove', evt => {\n  arc.attr('strokeColor', 'yellow');\n  evt.stopDispatch();\n});\n\narc.on('mouseleave', evt => {\n  arc.attr('strokeColor', 'red');\n  evt.stopDispatch();\n});\n\nlayer.append(arc);\n"}},[r("pre",{pre:!0},[r("code",{pre:!0,attrs:{"v-pre":"",class:"language-javascript"}},[r("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" {Scene, Layer, Arc} = spritejs;\n\n"),r("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" scene = "),r("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" Scene("),r("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'.block-demo .demo'")]),s._v(", {\n  "),r("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("viewport")]),s._v(": ["),r("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("400")]),s._v(", "),r("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("300")]),s._v("],\n  "),r("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("displayRatio")]),s._v(": "),r("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'auto'")]),s._v("\n});\n"),r("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" layer = scene.layer();\n\n"),r("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" arc = "),r("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" Arc();\narc.attr({\n  "),r("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("radius")]),s._v(": "),r("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("50")]),s._v(",\n  "),r("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("startAngle")]),s._v(": "),r("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Math")]),s._v(".PI * "),r("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0.75")]),s._v(",\n  "),r("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("endAngle")]),s._v(": "),r("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Math")]),s._v(".PI * "),r("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("2.75")]),s._v(",\n  "),r("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("lineWidth")]),s._v(": "),r("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("5")]),s._v(",\n\n  "),r("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("strokeColor")]),s._v(": "),r("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'red'")]),s._v(",\n  "),r("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("bgcolor")]),s._v(": "),r("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'#ccc'")]),s._v("\n});\n\narc.on("),r("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'mousemove'")]),s._v(", evt => {\n  arc.attr("),r("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'strokeColor'")]),s._v(", "),r("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'yellow'")]),s._v(");\n  evt.stopDispatch();\n});\n\narc.on("),r("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'mouseleave'")]),s._v(", evt => {\n  arc.attr("),r("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'strokeColor'")]),s._v(", "),r("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'red'")]),s._v(");\n  evt.stopDispatch();\n});\n\nlayer.append(arc);\n")])])])],1)},[],!1,null,null,null);t.default=e.exports}}]);


--------------------------------------------------------------------------------
/docs/website/10.71b3875.js:
--------------------------------------------------------------------------------
1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[10],{172:function(s,n,t){"use strict";t.r(n);var r={components:{}},a=t(17),e=Object(a.a)(r,function(){var s=this,n=s.$createElement,t=s._self._c||n;return t("section",[t("h2",[s._v("Ring")]),s._v(" "),t("block-demo",{attrs:{tip:"",source:"const {Scene, Layer, Ring} = spritejs;\n\nconst scene = new Scene('.block-demo .demo', {\n  viewport: [400, 300],\n  displayRatio: 'auto'\n});\nconst layer = scene.layer();\n\nconst ring = new Ring();\nring.attr({\n  pos: [60, 40],\n  innerRadius: 15,\n  outerRadius: 50,\n  fillColor: 'green',\n  startAngle: Math.PI * 0.8,\n  endAngle: Math.PI * 1.4,\n  lineWidth: 2,\n  bgcolor: '#eee'\n});\n\nring.on('mousemove', evt => {\n  ring.attr('strokeColor', 'yellow');\n  evt.stopDispatch();\n});\n\nring.on('mouseleave', evt => {\n  ring.attr('strokeColor', 'red');\n  evt.stopDispatch();\n});\n\nlayer.append(ring);\n"}},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{"v-pre":"",class:"language-javascript"}},[t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" {Scene, Layer, Ring} = spritejs;\n\n"),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" scene = "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" Scene("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'.block-demo .demo'")]),s._v(", {\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("viewport")]),s._v(": ["),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("400")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("300")]),s._v("],\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("displayRatio")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'auto'")]),s._v("\n});\n"),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" layer = scene.layer();\n\n"),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" ring = "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" Ring();\nring.attr({\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("pos")]),s._v(": ["),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("60")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("40")]),s._v("],\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("innerRadius")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("15")]),s._v(",\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("outerRadius")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("50")]),s._v(",\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("fillColor")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'green'")]),s._v(",\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("startAngle")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Math")]),s._v(".PI * "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0.8")]),s._v(",\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("endAngle")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Math")]),s._v(".PI * "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1.4")]),s._v(",\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("lineWidth")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("2")]),s._v(",\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("bgcolor")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'#eee'")]),s._v("\n});\n\nring.on("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'mousemove'")]),s._v(", evt => {\n  ring.attr("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'strokeColor'")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'yellow'")]),s._v(");\n  evt.stopDispatch();\n});\n\nring.on("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'mouseleave'")]),s._v(", evt => {\n  ring.attr("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'strokeColor'")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'red'")]),s._v(");\n  evt.stopDispatch();\n});\n\nlayer.append(ring);\n")])])])],1)},[],!1,null,null,null);n.default=e.exports}}]);


--------------------------------------------------------------------------------
/docs/website/11.71b3875.js:
--------------------------------------------------------------------------------
1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[11],{170:function(s,t,r){"use strict";r.r(t);var e={components:{}},n=r(17),a=Object(n.a)(e,function(){var s=this,t=s.$createElement,r=s._self._c||t;return r("section",[r("h2",[s._v("Sector")]),s._v(" "),r("block-demo",{attrs:{tip:"",source:"const {Scene, Layer, Sector} = spritejs;\n\nconst scene = new Scene('.block-demo .demo', {\n  viewport: [400, 300],\n  displayRatio: 'auto'\n});\nconst layer = scene.layer();\n\nconst sector = new Sector();\nsector.attr({\n  startAngle: 0,\n  endAngle: Math.PI * 0.7,\n  radius: 50,\n  lineWidth: 5,\n  bgcolor: '#eee',\n  strokeColor: 'red'\n});\n\nsector.on('mousemove', evt => {\n  sector.attr('strokeColor', 'yellow');\n  evt.stopDispatch();\n});\n\nsector.on('mouseleave', evt => {\n  sector.attr('strokeColor', 'red');\n  evt.stopDispatch();\n});\n\nlayer.append(sector);\n"}},[r("pre",{pre:!0},[r("code",{pre:!0,attrs:{"v-pre":"",class:"language-javascript"}},[r("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" {Scene, Layer, Sector} = spritejs;\n\n"),r("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" scene = "),r("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" Scene("),r("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'.block-demo .demo'")]),s._v(", {\n  "),r("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("viewport")]),s._v(": ["),r("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("400")]),s._v(", "),r("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("300")]),s._v("],\n  "),r("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("displayRatio")]),s._v(": "),r("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'auto'")]),s._v("\n});\n"),r("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" layer = scene.layer();\n\n"),r("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" sector = "),r("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" Sector();\nsector.attr({\n  "),r("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("startAngle")]),s._v(": "),r("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v(",\n  "),r("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("endAngle")]),s._v(": "),r("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Math")]),s._v(".PI * "),r("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0.7")]),s._v(",\n  "),r("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("radius")]),s._v(": "),r("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("50")]),s._v(",\n  "),r("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("lineWidth")]),s._v(": "),r("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("5")]),s._v(",\n  "),r("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("bgcolor")]),s._v(": "),r("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'#eee'")]),s._v(",\n  "),r("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("strokeColor")]),s._v(": "),r("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'red'")]),s._v("\n});\n\nsector.on("),r("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'mousemove'")]),s._v(", evt => {\n  sector.attr("),r("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'strokeColor'")]),s._v(", "),r("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'yellow'")]),s._v(");\n  evt.stopDispatch();\n});\n\nsector.on("),r("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'mouseleave'")]),s._v(", evt => {\n  sector.attr("),r("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'strokeColor'")]),s._v(", "),r("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'red'")]),s._v(");\n  evt.stopDispatch();\n});\n\nlayer.append(sector);\n")])])])],1)},[],!1,null,null,null);t.default=a.exports}}]);


--------------------------------------------------------------------------------
/docs/website/12.71b3875.js:
--------------------------------------------------------------------------------
1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[12],{174:function(s,t,a){"use strict";a.r(t);var r={components:{}},n=a(17),e=Object(n.a)(r,function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",[s._v("Star")]),s._v(" "),a("block-demo",{attrs:{tip:"",source:"const {Scene, Layer, Star} = spritejs;\n\nconst scene = new Scene('.block-demo .demo', {\n  viewport: [400, 300],\n  displayRatio: 'auto'\n});\nconst layer = scene.layer();\n\nconst star = new Star();\nstar.attr({\n  pos: [50, 40],\n  radius: 40,\n  innerRadius: 24,\n  color: '#000',\n  lineWidth: 4,\n  angles: 5,\n  bgcolor: '#eee',\n  fillColor: 'red'\n  //anchor: [ 0.5, 0.5 ]\n});\n\nstar.on('mouseenter', evt => {\n  star.attr('fillColor', 'green');\n  evt.stopDispatch();\n});\n\nstar.on('mouseleave', evt => {\n  star.attr('fillColor', 'red');\n  evt.stopDispatch();\n});\n\nlayer.append(star);\n"}},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{"v-pre":"",class:"language-javascript"}},[a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" {Scene, Layer, Star} = spritejs;\n\n"),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" scene = "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" Scene("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'.block-demo .demo'")]),s._v(", {\n  "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("viewport")]),s._v(": ["),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("400")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("300")]),s._v("],\n  "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("displayRatio")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'auto'")]),s._v("\n});\n"),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" layer = scene.layer();\n\n"),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" star = "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" Star();\nstar.attr({\n  "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("pos")]),s._v(": ["),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("50")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("40")]),s._v("],\n  "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("radius")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("40")]),s._v(",\n  "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("innerRadius")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("24")]),s._v(",\n  "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("color")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'#000'")]),s._v(",\n  "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("lineWidth")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("4")]),s._v(",\n  "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("angles")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("5")]),s._v(",\n  "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("bgcolor")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'#eee'")]),s._v(",\n  "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("fillColor")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'red'")]),s._v("\n  \n});\n\nstar.on("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'mouseenter'")]),s._v(", evt => {\n  star.attr("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'fillColor'")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'green'")]),s._v(");\n  evt.stopDispatch();\n});\n\nstar.on("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'mouseleave'")]),s._v(", evt => {\n  star.attr("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'fillColor'")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'red'")]),s._v(");\n  evt.stopDispatch();\n});\n\nlayer.append(star);\n")])])])],1)},[],!1,null,null,null);t.default=e.exports}}]);


--------------------------------------------------------------------------------
/docs/website/13.71b3875.js:
--------------------------------------------------------------------------------
1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[13],{176:function(s,t,n){"use strict";n.r(t);var r={components:{}},a=n(17),e=Object(a.a)(r,function(){var s=this,t=s.$createElement,n=s._self._c||t;return n("section",[n("h2",[s._v("Triangle")]),s._v(" "),n("block-demo",{attrs:{tip:"",source:"const {Scene, Layer, Triangle} = spritejs;\n\nconst scene = new Scene('.block-demo .demo', {\n  viewport: [400, 300],\n  displayRatio: 'auto'\n});\nconst layer = scene.layer();\n\nconst triangle = new Triangle();\ntriangle.attr({\n  pos: [70, 10],\n  strokeColor: 'red',\n  sides: [80, 80],\n  angle: 60,\n  lineWidth: 1,\n  fillColor: 'yellow',\n  bgcolor: '#eee'\n});\n\ntriangle.on('mouseenter', evt => {\n  triangle.attr('strokeColor', 'yellow');\n  evt.stopDispatch();\n});\n\ntriangle.on('mouseleave', evt => {\n  triangle.attr('strokeColor', 'red');\n  evt.stopDispatch();\n});\n\nlayer.append(triangle);\n"}},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{"v-pre":"",class:"language-javascript"}},[n("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" {Scene, Layer, Triangle} = spritejs;\n\n"),n("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" scene = "),n("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" Scene("),n("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'.block-demo .demo'")]),s._v(", {\n  "),n("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("viewport")]),s._v(": ["),n("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("400")]),s._v(", "),n("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("300")]),s._v("],\n  "),n("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("displayRatio")]),s._v(": "),n("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'auto'")]),s._v("\n});\n"),n("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" layer = scene.layer();\n\n"),n("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" triangle = "),n("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" Triangle();\ntriangle.attr({\n  "),n("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("pos")]),s._v(": ["),n("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("70")]),s._v(", "),n("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("10")]),s._v("],\n  "),n("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("strokeColor")]),s._v(": "),n("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'red'")]),s._v(",\n  "),n("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("sides")]),s._v(": ["),n("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("80")]),s._v(", "),n("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("80")]),s._v("],\n  "),n("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("angle")]),s._v(": "),n("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("60")]),s._v(",\n  "),n("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("lineWidth")]),s._v(": "),n("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v(",\n  "),n("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("fillColor")]),s._v(": "),n("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'yellow'")]),s._v(",\n  "),n("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("bgcolor")]),s._v(": "),n("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'#eee'")]),s._v("\n});\n\ntriangle.on("),n("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'mouseenter'")]),s._v(", evt => {\n  triangle.attr("),n("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'strokeColor'")]),s._v(", "),n("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'yellow'")]),s._v(");\n  evt.stopDispatch();\n});\n\ntriangle.on("),n("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'mouseleave'")]),s._v(", evt => {\n  triangle.attr("),n("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'strokeColor'")]),s._v(", "),n("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'red'")]),s._v(");\n  evt.stopDispatch();\n});\n\nlayer.append(triangle);\n")])])])],1)},[],!1,null,null,null);t.default=e.exports}}]);


--------------------------------------------------------------------------------
/docs/website/14.71b3875.js:
--------------------------------------------------------------------------------
1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[14],{171:function(s,a,t){"use strict";t.r(a);var r={components:{}},n=t(17),e=Object(n.a)(r,function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[t("h2",[s._v("Wave")]),s._v(" "),t("block-demo",{attrs:{tip:"",source:"const {Scene, Layer, Wave} = spritejs;\n\nconst scene = new Scene('.block-demo .demo', {\n  viewport: [400, 300],\n  displayRatio: 'auto'\n});\nconst layer = scene.layer();\n\nconst wave = new Wave();\nwave.attr({\n  pos: [10, 10],\n  lineWidth: 5,\n  color: '#158bca',\n  fillColor: '#158bca',\n  bgcolor: '#eee',\n\n  percent: 0.6,\n  amplitude: 20,\n  shape:\n    'M23.6,0c-3.4,0-6.3,2.7-7.6,5.6C14.7,2.7,11.8,0,8.4,0C3.8,0,0,3.8,0,8.4c0,9.4,9.5,11.9,16,21.2 c6.1-9.3,16-12.1,16-21.2C32,3.8,28.2,0,23.6,0z',\n  shapeScale: 4,\n  shapeColor: 'red',\n  shapeFillColor: 'transparent',\n  wavesColor: 'red',\n\n  speed: 0\n});\n\nlayer.append(wave);\n\nlet speed = 0;\nconst step = () => {\n  speed += 0.1;\n  wave.attr('speed', speed);\n  requestAnimationFrame(step);\n};\nstep();\n\nconst wave2 = new Wave();\nwave2.attr({\n  pos: [200, 15],\n  radius: 50,\n  offset: 10,\n  lineWidth: 5,\n  bgcolor: '#eee',\n\n  wavesColor: '#158bca',\n  outlineColor: '#158bca',\n  percent: 0.6,\n  amplitude: 20,\n  speed: 0\n});\n\nlayer.append(wave2);\n"}},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{"v-pre":"",class:"language-javascript"}},[t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" {Scene, Layer, Wave} = spritejs;\n\n"),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" scene = "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" Scene("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'.block-demo .demo'")]),s._v(", {\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("viewport")]),s._v(": ["),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("400")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("300")]),s._v("],\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("displayRatio")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'auto'")]),s._v("\n});\n"),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" layer = scene.layer();\n\n"),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" wave = "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" Wave();\nwave.attr({\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("pos")]),s._v(": ["),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("10")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("10")]),s._v("],\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("lineWidth")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("5")]),s._v(",\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("color")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'#158bca'")]),s._v(",\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("fillColor")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'#158bca'")]),s._v(",\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("bgcolor")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'#eee'")]),s._v(",\n\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("percent")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0.6")]),s._v(",\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("amplitude")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("20")]),s._v(",\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("shape")]),s._v(":\n    "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'M23.6,0c-3.4,0-6.3,2.7-7.6,5.6C14.7,2.7,11.8,0,8.4,0C3.8,0,0,3.8,0,8.4c0,9.4,9.5,11.9,16,21.2 c6.1-9.3,16-12.1,16-21.2C32,3.8,28.2,0,23.6,0z'")]),s._v(",\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("shapeScale")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("4")]),s._v(",\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("shapeColor")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'red'")]),s._v(",\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("shapeFillColor")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'transparent'")]),s._v(",\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("wavesColor")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'red'")]),s._v(",\n\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("speed")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v("\n});\n\nlayer.append(wave);\n\n"),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" speed = "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v(";\n"),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" step = "),t("span",{pre:!0,attrs:{class:"hljs-function"}},[t("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n  speed += "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0.1")]),s._v(";\n  wave.attr("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'speed'")]),s._v(", speed);\n  requestAnimationFrame(step);\n};\nstep();\n\n"),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" wave2 = "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" Wave();\nwave2.attr({\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("pos")]),s._v(": ["),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("200")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("15")]),s._v("],\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("radius")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("50")]),s._v(",\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("offset")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("10")]),s._v(",\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("lineWidth")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("5")]),s._v(",\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("bgcolor")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'#eee'")]),s._v(",\n\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("wavesColor")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'#158bca'")]),s._v(",\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("outlineColor")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'#158bca'")]),s._v(",\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("percent")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0.6")]),s._v(",\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("amplitude")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("20")]),s._v(",\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("speed")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v("\n});\n\nlayer.append(wave2);\n")])])])],1)},[],!1,null,null,null);a.default=e.exports}}]);


--------------------------------------------------------------------------------
/docs/website/15.71b3875.js:
--------------------------------------------------------------------------------
1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[15],{184:function(s,r,a){"use strict";a.r(r);var n={components:{}},t=a(17),e=Object(t.a)(n,function(){var s=this,r=s.$createElement,a=s._self._c||r;return a("section",[a("article",{staticClass:"markdown-body",staticStyle:{width:"96%"}},[a("h2",[s._v("安装")]),s._v(" "),a("h3",[s._v("使用 npm 或 yarn 安装")]),s._v(" "),s._m(0),s._v(" "),a("h2",[s._v("使用")]),s._v(" "),s._m(1),s._v(" "),a("h3",[s._v("手动加载")]),s._v(" "),s._m(2),s._v(" "),a("block-demo",{attrs:{tip:"",source:"const {Scene, Layer, Polycurve} = spritejs;\n\nconst scene = new Scene('.block-demo .demo', {\n  resolution: [400, 300],\n  displayRatio: 'auto'\n});\nconst layer = scene.layer();\n\nconst polycurve = new Polycurve();\npolycurve.attr({\n  pos: [10, 10],\n  startPoint: [10, 10],\n  points: [\n    [21, 58, 221, 189.2639320225002, 165.8680339887499, 189.2639320225002],\n    [\n      165.8680339887499,\n      189.2639320225002,\n      110.73606797749979,\n      189.2639320225002,\n      110.73606797749979,\n      278.5278640450004\n    ]\n  ],\n  lineWidth: 1,\n  color: '#f00',\n  fillColor: 'green'\n});\n\npolycurve.on('mouseenter', () => {\n  polycurve.attr('fillColor', 'yellow');\n});\n\npolycurve.on('click', () => {\n  polycurve.attr('fillColor', 'yellow');\n});\n\npolycurve.on('mouseleave', () => {\n  polycurve.attr('fillColor', 'red');\n});\n\nlayer.append(polycurve);\n"}},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{"v-pre":"",class:"language-javascript"}},[a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" {Scene, Layer, Polycurve} = spritejs;\n\n"),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" scene = "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" Scene("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'.block-demo .demo'")]),s._v(", {\n  "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("resolution")]),s._v(": ["),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("400")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("300")]),s._v("],\n  "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("displayRatio")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'auto'")]),s._v("\n});\n"),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" layer = scene.layer();\n\n"),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" polycurve = "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" Polycurve();\npolycurve.attr({\n  "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("pos")]),s._v(": ["),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("10")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("10")]),s._v("],\n  "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("startPoint")]),s._v(": ["),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("10")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("10")]),s._v("],\n  "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("points")]),s._v(": [\n    ["),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("21")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("58")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("221")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("189.2639320225002")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("165.8680339887499")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("189.2639320225002")]),s._v("],\n    [\n      "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("165.8680339887499")]),s._v(",\n      "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("189.2639320225002")]),s._v(",\n      "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("110.73606797749979")]),s._v(",\n      "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("189.2639320225002")]),s._v(",\n      "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("110.73606797749979")]),s._v(",\n      "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("278.5278640450004")]),s._v("\n    ]\n  ],\n  "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("lineWidth")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v(",\n  "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("color")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'#f00'")]),s._v(",\n  "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("fillColor")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'green'")]),s._v("\n});\n\npolycurve.on("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'mouseenter'")]),s._v(", () => {\n  polycurve.attr("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'fillColor'")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'yellow'")]),s._v(");\n});\n\npolycurve.on("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'click'")]),s._v(", () => {\n  polycurve.attr("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'fillColor'")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'yellow'")]),s._v(");\n});\n\npolycurve.on("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'mouseleave'")]),s._v(", () => {\n  polycurve.attr("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'fillColor'")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'red'")]),s._v(");\n});\n\nlayer.append(polycurve);\n")])])])],1)])},[function(){var s=this.$createElement,r=this._self._c||s;return r("pre",{pre:!0},[r("code",{pre:!0,attrs:{"v-pre":"",class:"language-shell"}},[this._v("npm i @spritejs/shapes\n")])])},function(){var s=this,r=s.$createElement,a=s._self._c||r;return a("pre",{pre:!0},[a("code",{pre:!0,attrs:{"v-pre":"",class:"language-javascript"}},[a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" * "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("as")]),s._v(" spritejs "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'spritejs'")]),s._v(";\n"),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Shapes "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'@spritejs/shapes'")]),s._v("\nspritejs.use(Shapes);\n")])])},function(){var s=this,r=s.$createElement,a=s._self._c||r;return a("pre",{pre:!0},[a("code",{pre:!0,attrs:{"v-pre":"",class:"language-javascript"}},[a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" * "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("as")]),s._v(" spritejs "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'spritejs'")]),s._v(";\n"),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" {Circle} "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'@spritejs/shapes'")]),s._v(";\n\nspritejs.use(Circle);\n")])])}],!1,null,null,null);r.default=e.exports}}]);


--------------------------------------------------------------------------------
/docs/website/16.71b3875.js:
--------------------------------------------------------------------------------
1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[16],{183:function(t,e,n){"use strict";n.r(e);var a=n(59),s={data:function(){return{navItems:a.a,showMenu:!1}},methods:{toggleShowMenu:function(){this.showMenu=!this.showMenu}}},c=n(17),o=Object(c.a)(s,function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"page"},[n("aside",{class:t.showMenu?"is-show":""},[n("nav",[n("ul",[t._l(t.navItems,function(e,a){return[e.redirect?t._e():n("li",{key:a},[e.path&&e.component?n("router-link",{attrs:{to:"/api/"+e.path}},[t._v(t._s(e.title.replace(/^(\w)/,function(t){return t.toUpperCase()})))]):n("h3",[t._v(t._s(e.title.replace(/^(\w)/,function(t){return t.toUpperCase()})))])],1)]})],2)]),t._v(" "),n("button",{on:{click:t.toggleShowMenu}},[n("svg",{attrs:{viewBox:"0 0 1024 1024","data-icon":"bars",width:"1em",height:"1em",fill:"currentColor","aria-hidden":"true"}},[n("path",{attrs:{d:"M912 192H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 284H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 284H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM104 228a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm0 284a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm0 284a56 56 0 1 0 112 0 56 56 0 1 0-112 0z"}})])])]),t._v(" "),n("article",{staticClass:"container"},[n("router-view",{staticClass:"markdown-body"})],1)])},[],!1,null,null,null);e.default=o.exports}}]);


--------------------------------------------------------------------------------
/docs/website/2.71b3875.js:
--------------------------------------------------------------------------------
1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[2],{180:function(s,e,r){"use strict";r.r(e);var t={components:{}},n=r(17),a=Object(n.a)(t,function(){var s=this,e=s.$createElement,r=s._self._c||e;return r("section",[r("h2",[s._v("Circle")]),s._v(" "),r("block-demo",{attrs:{tip:"",source:"const {Scene, Layer, Circle} = spritejs;\n\nconst scene = new Scene('.block-demo .demo', {\n  viewport: [400, 300],\n  displayRatio: 'auto'\n});\nconst layer = scene.layer();\n\nconst circle = new Circle();\ncircle.attr({\n  radius: 30,\n  lineWidth: 5,\n  strokeColor: 'red',\n  bgcolor: '#eee'\n});\n\ncircle.on('mousemove', evt => {\n  circle.attr('strokeColor', 'yellow');\n  evt.stopDispatch();\n});\n\ncircle.on('mouseleave', evt => {\n  circle.attr('strokeColor', 'red');\n  evt.stopDispatch();\n});\n\nlayer.append(circle);\n"}},[r("pre",{pre:!0},[r("code",{pre:!0,attrs:{"v-pre":"",class:"language-javascript"}},[r("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" {Scene, Layer, Circle} = spritejs;\n\n"),r("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" scene = "),r("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" Scene("),r("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'.block-demo .demo'")]),s._v(", {\n  "),r("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("viewport")]),s._v(": ["),r("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("400")]),s._v(", "),r("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("300")]),s._v("],\n  "),r("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("displayRatio")]),s._v(": "),r("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'auto'")]),s._v("\n});\n"),r("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" layer = scene.layer();\n\n"),r("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" circle = "),r("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" Circle();\ncircle.attr({\n  "),r("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("radius")]),s._v(": "),r("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("30")]),s._v(",\n  "),r("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("lineWidth")]),s._v(": "),r("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("5")]),s._v(",\n  "),r("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("strokeColor")]),s._v(": "),r("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'red'")]),s._v(",\n  "),r("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("bgcolor")]),s._v(": "),r("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'#eee'")]),s._v("\n});\n\ncircle.on("),r("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'mousemove'")]),s._v(", evt => {\n  circle.attr("),r("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'strokeColor'")]),s._v(", "),r("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'yellow'")]),s._v(");\n  evt.stopDispatch();\n});\n\ncircle.on("),r("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'mouseleave'")]),s._v(", evt => {\n  circle.attr("),r("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'strokeColor'")]),s._v(", "),r("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'red'")]),s._v(");\n  evt.stopDispatch();\n});\n\nlayer.append(circle);\n")])])])],1)},[],!1,null,null,null);e.default=a.exports}}]);


--------------------------------------------------------------------------------
/docs/website/3.71b3875.js:
--------------------------------------------------------------------------------
1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[3],{181:function(s,e,t){"use strict";t.r(e);var n={components:{}},r=t(17),a=Object(r.a)(n,function(){var s=this,e=s.$createElement,t=s._self._c||e;return t("section",[t("h2",[s._v("Ellipse")]),s._v(" "),t("block-demo",{attrs:{tip:"",source:"const {Scene, Layer, Ellipse} = spritejs;\n\nconst scene = new Scene('.block-demo .demo', {\n  viewport: [400, 300],\n  displayRatio: 'auto'\n});\nconst layer = scene.layer();\n\nconst ellipse = new Ellipse();\nellipse.attr({\n  radiusX: 30,\n  radiusY: 80,\n  fillColor: 'red',\n  bgcolor: '#eee',\n  lineWidth: 5\n});\n\nellipse.on('mousemove', evt => {\n  ellipse.attr('strokeColor', 'yellow');\n  evt.stopDispatch();\n});\n\nellipse.on('mouseleave', evt => {\n  ellipse.attr('strokeColor', 'red');\n  evt.stopDispatch();\n});\n\nlayer.append(ellipse);\n"}},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{"v-pre":"",class:"language-javascript"}},[t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" {Scene, Layer, Ellipse} = spritejs;\n\n"),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" scene = "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" Scene("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'.block-demo .demo'")]),s._v(", {\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("viewport")]),s._v(": ["),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("400")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("300")]),s._v("],\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("displayRatio")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'auto'")]),s._v("\n});\n"),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" layer = scene.layer();\n\n"),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" ellipse = "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" Ellipse();\nellipse.attr({\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("radiusX")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("30")]),s._v(",\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("radiusY")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("80")]),s._v(",\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("fillColor")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'red'")]),s._v(",\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("bgcolor")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'#eee'")]),s._v(",\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("lineWidth")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("5")]),s._v("\n});\n\nellipse.on("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'mousemove'")]),s._v(", evt => {\n  ellipse.attr("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'strokeColor'")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'yellow'")]),s._v(");\n  evt.stopDispatch();\n});\n\nellipse.on("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'mouseleave'")]),s._v(", evt => {\n  ellipse.attr("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'strokeColor'")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'red'")]),s._v(");\n  evt.stopDispatch();\n});\n\nlayer.append(ellipse);\n")])])])],1)},[],!1,null,null,null);e.default=a.exports}}]);


--------------------------------------------------------------------------------
/docs/website/4.71b3875.js:
--------------------------------------------------------------------------------
1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[4],{169:function(s,e,r){"use strict";r.r(e);var a={components:{}},n=r(17),t=Object(n.a)(a,function(){var s=this,e=s.$createElement,r=s._self._c||e;return r("section",[r("h2",[s._v("EllipseArc")]),s._v(" "),r("block-demo",{attrs:{tip:"",source:"const {Scene, Layer, EllipseArc} = spritejs;\n\nconst scene = new Scene('.block-demo .demo', {\n  viewport: [400, 300],\n  displayRatio: 'auto'\n});\nconst layer = scene.layer();\n\nconst ellipseArc = new EllipseArc();\nellipseArc.attr({\n  radiusX: 30,\n  endAngle: Math.PI * 2,\n  radiusY: 80,\n  strokeColor: 'red',\n  bgcolor: '#eee',\n  lineWidth: 5\n});\n\nlayer.append(ellipseArc);\n"}},[r("pre",{pre:!0},[r("code",{pre:!0,attrs:{"v-pre":"",class:"language-javascript"}},[r("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" {Scene, Layer, EllipseArc} = spritejs;\n\n"),r("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" scene = "),r("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" Scene("),r("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'.block-demo .demo'")]),s._v(", {\n  "),r("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("viewport")]),s._v(": ["),r("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("400")]),s._v(", "),r("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("300")]),s._v("],\n  "),r("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("displayRatio")]),s._v(": "),r("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'auto'")]),s._v("\n});\n"),r("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" layer = scene.layer();\n\n"),r("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" ellipseArc = "),r("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" EllipseArc();\nellipseArc.attr({\n  "),r("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("radiusX")]),s._v(": "),r("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("30")]),s._v(",\n  "),r("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("endAngle")]),s._v(": "),r("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Math")]),s._v(".PI * "),r("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("2")]),s._v(",\n  "),r("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("radiusY")]),s._v(": "),r("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("80")]),s._v(",\n  "),r("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("strokeColor")]),s._v(": "),r("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'red'")]),s._v(",\n  "),r("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("bgcolor")]),s._v(": "),r("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'#eee'")]),s._v(",\n  "),r("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("lineWidth")]),s._v(": "),r("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("5")]),s._v("\n});\n\nlayer.append(ellipseArc);\n")])])])],1)},[],!1,null,null,null);e.default=t.exports}}]);


--------------------------------------------------------------------------------
/docs/website/5.71b3875.js:
--------------------------------------------------------------------------------
1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[5],{179:function(s,e,t){"use strict";t.r(e);var r={components:{}},n=t(17),a=Object(n.a)(r,function(){var s=this,e=s.$createElement,t=s._self._c||e;return t("section",[t("h2",[s._v("EllipseSector")]),s._v(" "),t("block-demo",{attrs:{tip:"",source:"const {Scene, Layer, EllipseSector} = spritejs;\n\nconst scene = new Scene('.block-demo .demo', {\n  viewport: [400, 300],\n  displayRatio: 'auto'\n});\nconst layer = scene.layer();\n\nconst ellipseSector = new EllipseSector();\nellipseSector.attr({\n  radiusX: 30,\n  radiusY: 80,\n  startAngle: 0,\n  bgcolor: '#eee',\n  endAngle: Math.PI * 1.3,\n  lineWidth: 1,\n  strokeColor: 'red'\n});\n\nellipseSector.on('mousemove', evt => {\n  ellipseSector.attr('strokeColor', 'yellow');\n  evt.stopDispatch();\n});\n\nellipseSector.on('mouseleave', evt => {\n  ellipseSector.attr('strokeColor', 'red');\n  evt.stopDispatch();\n});\n\nlayer.append(ellipseSector);\n"}},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{"v-pre":"",class:"language-javascript"}},[t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" {Scene, Layer, EllipseSector} = spritejs;\n\n"),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" scene = "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" Scene("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'.block-demo .demo'")]),s._v(", {\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("viewport")]),s._v(": ["),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("400")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("300")]),s._v("],\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("displayRatio")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'auto'")]),s._v("\n});\n"),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" layer = scene.layer();\n\n"),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" ellipseSector = "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" EllipseSector();\nellipseSector.attr({\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("radiusX")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("30")]),s._v(",\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("radiusY")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("80")]),s._v(",\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("startAngle")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v(",\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("bgcolor")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'#eee'")]),s._v(",\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("endAngle")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Math")]),s._v(".PI * "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1.3")]),s._v(",\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("lineWidth")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v(",\n  "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("strokeColor")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'red'")]),s._v("\n});\n\nellipseSector.on("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'mousemove'")]),s._v(", evt => {\n  ellipseSector.attr("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'strokeColor'")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'yellow'")]),s._v(");\n  evt.stopDispatch();\n});\n\nellipseSector.on("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'mouseleave'")]),s._v(", evt => {\n  ellipseSector.attr("),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'strokeColor'")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'red'")]),s._v(");\n  evt.stopDispatch();\n});\n\nlayer.append(ellipseSector);\n")])])])],1)},[],!1,null,null,null);e.default=a.exports}}]);


--------------------------------------------------------------------------------
/docs/website/6.71b3875.js:
--------------------------------------------------------------------------------
1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[6],{177:function(s,r,n){"use strict";n.r(r);var a={components:{}},t=n(17),e=Object(t.a)(a,function(){var s=this,r=s.$createElement,n=s._self._c||r;return n("section",[n("h2",[s._v("Polycurve")]),s._v(" "),n("block-demo",{attrs:{tip:"",source:"const {Scene, Layer, Polycurve} = spritejs;\n\nconst scene = new Scene('.block-demo .demo', {\n  viewport: [400, 300],\n  displayRatio: 'auto'\n});\nconst layer = scene.layer();\n\nconst polycurve = new Polycurve();\npolycurve.attr({\n  pos: [10, 10],\n  startPoint: [10, 10],\n  points: [\n    [21, 58, 221, 189.2639320225002, 165.8680339887499, 189.2639320225002],\n    [\n      165.8680339887499,\n      189.2639320225002,\n      110.73606797749979,\n      189.2639320225002,\n      110.73606797749979,\n      278.5278640450004\n    ]\n  ],\n  lineWidth: 1,\n  strokeColor: '#f00',\n  bgcolor: '#eee',\n  fillColor: 'green'\n});\n\npolycurve.on('mouseenter', () => {\n  polycurve.attr('fillColor', 'yellow');\n});\n\npolycurve.on('click', () => {\n  polycurve.attr('fillColor', 'yellow');\n});\n\npolycurve.on('mouseleave', () => {\n  polycurve.attr('fillColor', 'blue');\n});\n\nlayer.append(polycurve);\n"}},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{"v-pre":"",class:"language-javascript"}},[n("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" {Scene, Layer, Polycurve} = spritejs;\n\n"),n("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" scene = "),n("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" Scene("),n("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'.block-demo .demo'")]),s._v(", {\n  "),n("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("viewport")]),s._v(": ["),n("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("400")]),s._v(", "),n("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("300")]),s._v("],\n  "),n("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("displayRatio")]),s._v(": "),n("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'auto'")]),s._v("\n});\n"),n("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" layer = scene.layer();\n\n"),n("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" polycurve = "),n("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" Polycurve();\npolycurve.attr({\n  "),n("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("pos")]),s._v(": ["),n("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("10")]),s._v(", "),n("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("10")]),s._v("],\n  "),n("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("startPoint")]),s._v(": ["),n("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("10")]),s._v(", "),n("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("10")]),s._v("],\n  "),n("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("points")]),s._v(": [\n    ["),n("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("21")]),s._v(", "),n("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("58")]),s._v(", "),n("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("221")]),s._v(", "),n("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("189.2639320225002")]),s._v(", "),n("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("165.8680339887499")]),s._v(", "),n("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("189.2639320225002")]),s._v("],\n    [\n      "),n("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("165.8680339887499")]),s._v(",\n      "),n("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("189.2639320225002")]),s._v(",\n      "),n("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("110.73606797749979")]),s._v(",\n      "),n("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("189.2639320225002")]),s._v(",\n      "),n("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("110.73606797749979")]),s._v(",\n      "),n("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("278.5278640450004")]),s._v("\n    ]\n  ],\n  "),n("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("lineWidth")]),s._v(": "),n("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v(",\n  "),n("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("strokeColor")]),s._v(": "),n("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'#f00'")]),s._v(",\n  "),n("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("bgcolor")]),s._v(": "),n("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'#eee'")]),s._v(",\n  "),n("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("fillColor")]),s._v(": "),n("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'green'")]),s._v("\n});\n\npolycurve.on("),n("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'mouseenter'")]),s._v(", () => {\n  polycurve.attr("),n("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'fillColor'")]),s._v(", "),n("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'yellow'")]),s._v(");\n});\n\npolycurve.on("),n("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'click'")]),s._v(", () => {\n  polycurve.attr("),n("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'fillColor'")]),s._v(", "),n("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'yellow'")]),s._v(");\n});\n\npolycurve.on("),n("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'mouseleave'")]),s._v(", () => {\n  polycurve.attr("),n("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'fillColor'")]),s._v(", "),n("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'blue'")]),s._v(");\n});\n\nlayer.append(polycurve);\n")])])])],1)},[],!1,null,null,null);r.default=e.exports}}]);


--------------------------------------------------------------------------------
/docs/website/7.71b3875.js:
--------------------------------------------------------------------------------
1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[7],{178:function(s,t,n){"use strict";n.r(t);var r={components:{}},a=n(17),e=Object(a.a)(r,function(){var s=this,t=s.$createElement,n=s._self._c||t;return n("section",[n("h2",[s._v("Polygon")]),s._v(" "),n("block-demo",{attrs:{tip:"",source:"const {Scene, Layer, Polygon} = spritejs;\n\nconst scene = new Scene('.block-demo .demo', {\n  viewport: [400, 300],\n  displayRatio: 'auto'\n});\nconst layer = scene.layer();\n\nlet pg = new Polygon();\n\npg.attr({\n  strokeColor: 'red',\n  fillColor: 'yellow',\n  lineWidth: 2,\n  points: [[10, 10], [100, 100], [200, 50]],\n  bgcolor: '#ccc'\n});\n\npg.on('mousemove', evt => {\n  pg.attr('strokeColor', 'blue');\n  evt.stopDispatch();\n});\n\npg.on('mouseleave', evt => {\n  pg.attr('strokeColor', 'red');\n  evt.stopDispatch();\n});\n\nlayer.append(pg);\n"}},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{"v-pre":"",class:"language-javascript"}},[n("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" {Scene, Layer, Polygon} = spritejs;\n\n"),n("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" scene = "),n("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" Scene("),n("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'.block-demo .demo'")]),s._v(", {\n  "),n("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("viewport")]),s._v(": ["),n("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("400")]),s._v(", "),n("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("300")]),s._v("],\n  "),n("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("displayRatio")]),s._v(": "),n("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'auto'")]),s._v("\n});\n"),n("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" layer = scene.layer();\n\n"),n("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" pg = "),n("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" Polygon();\n\npg.attr({\n  "),n("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("strokeColor")]),s._v(": "),n("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'red'")]),s._v(",\n  "),n("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("fillColor")]),s._v(": "),n("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'yellow'")]),s._v(",\n  "),n("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("lineWidth")]),s._v(": "),n("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("2")]),s._v(",\n  "),n("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("points")]),s._v(": [["),n("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("10")]),s._v(", "),n("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("10")]),s._v("], ["),n("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("100")]),s._v(", "),n("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("100")]),s._v("], ["),n("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("200")]),s._v(", "),n("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("50")]),s._v("]],\n  "),n("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("bgcolor")]),s._v(": "),n("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'#ccc'")]),s._v("\n});\n\npg.on("),n("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'mousemove'")]),s._v(", evt => {\n  pg.attr("),n("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'strokeColor'")]),s._v(", "),n("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'blue'")]),s._v(");\n  evt.stopDispatch();\n});\n\npg.on("),n("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'mouseleave'")]),s._v(", evt => {\n  pg.attr("),n("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'strokeColor'")]),s._v(", "),n("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'red'")]),s._v(");\n  evt.stopDispatch();\n});\n\nlayer.append(pg);\n")])])])],1)},[],!1,null,null,null);t.default=e.exports}}]);


--------------------------------------------------------------------------------
/docs/website/8.71b3875.js:
--------------------------------------------------------------------------------
1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[8],{182:function(s,t,a){"use strict";a.r(t);var n={components:{}},r=a(17),e=Object(r.a)(n,function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",[s._v("Polyline")]),s._v(" "),a("block-demo",{attrs:{tip:"",source:"const {Scene, Layer, Polyline} = spritejs;\n\nconst scene = new Scene('.block-demo .demo', {\n  viewport: [400, 300],\n  displayRatio: 'auto'\n});\nconst layer = scene.layer();\n\nconst polyline = new Polyline();\npolyline.attr({\n  pos: [10, 10],\n  strokeColor: {\n    vector: [0, 0, 150, 150],\n    colors: [{offset: 0, color: 'red'}, {offset: 1, color: 'green'}]\n  },\n  lineWidth: 1,\n  points: [\n    [216.44779756291575, 31.3368559404028],\n    [35.94034007190373, 135.81354964617464],\n    [245.94034007190373, 235.81354964617464]\n  ],\n  tolerance: 7,\n  bgcolor: '#eee',\n  // smooth: true,\n  close: true\n});\npolyline.on('click', () => alert('click'));\npolyline.on('mousemove', () => polyline.attr('smooth', true));\npolyline.on('mouseleave', () => polyline.attr('smooth', false));\n\nlayer.append(polyline);\n"}},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{"v-pre":"",class:"language-javascript"}},[a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" {Scene, Layer, Polyline} = spritejs;\n\n"),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" scene = "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" Scene("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'.block-demo .demo'")]),s._v(", {\n  "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("viewport")]),s._v(": ["),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("400")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("300")]),s._v("],\n  "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("displayRatio")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'auto'")]),s._v("\n});\n"),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" layer = scene.layer();\n\n"),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" polyline = "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" Polyline();\npolyline.attr({\n  "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("pos")]),s._v(": ["),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("10")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("10")]),s._v("],\n  "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("strokeColor")]),s._v(": {\n    "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("vector")]),s._v(": ["),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("150")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("150")]),s._v("],\n    "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("colors")]),s._v(": [{"),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("offset")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("color")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'red'")]),s._v("}, {"),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("offset")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("color")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'green'")]),s._v("}]\n  },\n  "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("lineWidth")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v(",\n  "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("points")]),s._v(": [\n    ["),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("216.44779756291575")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("31.3368559404028")]),s._v("],\n    ["),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("35.94034007190373")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("135.81354964617464")]),s._v("],\n    ["),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("245.94034007190373")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("235.81354964617464")]),s._v("]\n  ],\n  "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("tolerance")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("7")]),s._v(",\n  "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("bgcolor")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'#eee'")]),s._v(",\n  \n  close: "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n});\npolyline.on("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'click'")]),s._v(", () => alert("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'click'")]),s._v("));\npolyline.on("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'mousemove'")]),s._v(", () => polyline.attr("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'smooth'")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("));\npolyline.on("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'mouseleave'")]),s._v(", () => polyline.attr("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'smooth'")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("false")]),s._v("));\n\nlayer.append(polyline);\n")])])])],1)},[],!1,null,null,null);t.default=e.exports}}]);


--------------------------------------------------------------------------------
/docs/website/9.71b3875.js:
--------------------------------------------------------------------------------
1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[9],{175:function(s,t,e){"use strict";e.r(t);var r={components:{}},n=e(17),a=Object(n.a)(r,function(){var s=this,t=s.$createElement,e=s._self._c||t;return e("section",[e("h2",[s._v("Rect")]),s._v(" "),e("block-demo",{attrs:{tip:"",source:"const {Scene, Layer, Rect} = spritejs;\n\nconst scene = new Scene('.block-demo .demo', {\n  viewport: [400, 300],\n  displayRatio: 'auto'\n});\nconst layer = scene.layer();\n\nconst rect = new Rect();\nrect.attr({\n  pos: [10, 10],\n  strokeColor: 'red',\n  angle: 60,\n  lineWidth: 1,\n  // size: [100, 100],\n  width: 100,\n  height: 100,\n  fillColor: 'yellow',\n  bgcolor: '#eee'\n});\n\nrect.on('mouseenter', evt => {\n  rect.attr('strokeColor', 'yellow');\n  evt.stopDispatch();\n});\n\nrect.on('mouseleave', evt => {\n  rect.attr('strokeColor', 'red');\n  evt.stopDispatch();\n});\n\nlayer.append(rect);\n"}},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{"v-pre":"",class:"language-javascript"}},[e("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" {Scene, Layer, Rect} = spritejs;\n\n"),e("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" scene = "),e("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" Scene("),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'.block-demo .demo'")]),s._v(", {\n  "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("viewport")]),s._v(": ["),e("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("400")]),s._v(", "),e("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("300")]),s._v("],\n  "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("displayRatio")]),s._v(": "),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'auto'")]),s._v("\n});\n"),e("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" layer = scene.layer();\n\n"),e("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" rect = "),e("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" Rect();\nrect.attr({\n  "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("pos")]),s._v(": ["),e("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("10")]),s._v(", "),e("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("10")]),s._v("],\n  "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("strokeColor")]),s._v(": "),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'red'")]),s._v(",\n  "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("angle")]),s._v(": "),e("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("60")]),s._v(",\n  "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("lineWidth")]),s._v(": "),e("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v(",\n  \n  width: "),e("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("100")]),s._v(",\n  "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("height")]),s._v(": "),e("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("100")]),s._v(",\n  "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("fillColor")]),s._v(": "),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'yellow'")]),s._v(",\n  "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("bgcolor")]),s._v(": "),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'#eee'")]),s._v("\n});\n\nrect.on("),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'mouseenter'")]),s._v(", evt => {\n  rect.attr("),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'strokeColor'")]),s._v(", "),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'yellow'")]),s._v(");\n  evt.stopDispatch();\n});\n\nrect.on("),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'mouseleave'")]),s._v(", evt => {\n  rect.attr("),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'strokeColor'")]),s._v(", "),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'red'")]),s._v(");\n  evt.stopDispatch();\n});\n\nlayer.append(rect);\n")])])])],1)},[],!1,null,null,null);t.default=a.exports}}]);


--------------------------------------------------------------------------------
/docs/website/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>sprite-extend-shapes</title>
 8 |   </head>
 9 | 
10 |   <body>
11 |     <div id="app"></div>
12 |     <!-- vue -->
13 |     <script src="https://cdn.bootcss.com/vue/2.6.9/vue.min.js"></script>
14 |     <!-- vue-router -->
15 |     <script src="https://cdn.bootcss.com/vue-router/3.0.0/vue-router.min.js"></script>
16 |     <!-- spritejs -->
17 |     <script src="https://unpkg.com/spritejs/dist/spritejs.min.js"></script>
18 |   <script type="text/javascript" src="main.71b387523f94f0b6c478.js"></script></body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/example/drag-drop.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8" />
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  8 |   <title>draggable-extend-shape</title>
  9 |   <style>
 10 |     #container {
 11 |       width: 1200px;
 12 |       height: 600px;
 13 |       background: #aaa;
 14 |     }
 15 |   </style>
 16 | </head>
 17 | 
 18 | <body>
 19 |   红色可以拖动，双击两次不能拖动，蓝色不能拖动，双击变可以拖动
 20 |   <div id="container">
 21 |     <!-- <canvas width="1200" height="600"></canvas> -->
 22 |   </div>
 23 | 
 24 |   <script src="https://unpkg.com/spritejs/dist/spritejs.min.js"></script>
 25 | 
 26 |   <!-- <script src="/js/spritejs.js"></script> -->
 27 |   <script src="/js/sprite-extend-shapes.js"></script>
 28 |   <script>
 29 |     // spritejs.use(spriteShapes.install)
 30 |     let i = 0;
 31 |     const {
 32 |       Scene,
 33 |       Rect,
 34 | 
 35 |     } = spritejs;
 36 | 
 37 |     const scene = new Scene('#container', {
 38 |       resolution: [ 1200, 600 ],
 39 |     });
 40 |     const layer = scene.layer();
 41 | 
 42 |     const rectRed = new Rect();
 43 |     const rectBlue = new Rect();
 44 | 
 45 |     rectBlue.on('dblclick', (evt) => {
 46 |       rectBlue.attr('draggable', { destroy: true });
 47 |     });
 48 |     rectRed.on('dblclick', (evt) => {
 49 |       rectRed.attr('draggable', { destroy: true });
 50 |     });
 51 | 
 52 |     rectBlue.on('mousedown', (evt) => {
 53 |       if (evt.target === rectBlue) {
 54 |         rectBlue.attr('zIndex', ++i);
 55 |       }
 56 | 
 57 |     });
 58 |     rectRed.on('mousedown', (evt) => {
 59 |       if (evt.target === rectRed) {
 60 |         rectRed.attr('zIndex', ++i);
 61 |       }
 62 | 
 63 |     });
 64 | 
 65 |     rectRed.attr({
 66 |       pos: [ 100, 100 ],
 67 |       width: 50,
 68 |       height: 50,
 69 |       fillColor: 'red',
 70 |       draggable: true,
 71 |       droppable: true
 72 |     });
 73 |     rectRed.on('dragover', (evt) => {
 74 |       console.log('red-dragover');
 75 |     });
 76 |     rectRed.on('drop', (evt) => {
 77 |       console.log('red-drop');
 78 |     });
 79 |     rectRed.on('dragleave', (evt) => {
 80 |       console.log('red-dragleave');
 81 |     });
 82 |     rectRed.on('dragenter', (evt) => {
 83 |       console.log('red-dragenter');
 84 |     });
 85 | 
 86 |     rectBlue.on('dragover', (evt) => {
 87 |       console.log('blue-dragover');
 88 |     });
 89 |     rectBlue.on('drop', (evt) => {
 90 |       console.log('blue-drop');
 91 |     });
 92 |     rectBlue.on('dragleave', (evt) => {
 93 |       console.log('blue-dragleave');
 94 |     });
 95 |     rectBlue.on('dragenter', (evt) => {
 96 |       console.log('blue-dragenter');
 97 |     })
 98 | 
 99 |     rectBlue.attr({
100 |       pos: [ 200, 100 ],
101 |       width: 50,
102 |       height: 50,
103 |       fillColor: 'blue',
104 |       draggable: true,
105 |       droppable: true
106 |     });
107 |     rectBlue.on('drag', (evt) => {
108 |       console.log('blue-drag');
109 |     })
110 |     rectBlue.on('dragend', (evt) => {
111 |       console.log('blue-end');
112 |     })
113 |     rectBlue.on('dragstart', (evt) => {
114 |       console.log('blue-dragstart');
115 |     })
116 |     layer.append(rectRed);
117 |     layer.append(rectBlue);
118 |   </script>
119 | </body>
120 | 
121 | </html>


--------------------------------------------------------------------------------
/example/ellipse.demo.js:
--------------------------------------------------------------------------------
  1 | function renderEllipseShapes() {
  2 |   const group = new Group({
  3 |     boxSizing: 'content-box',
  4 |     pos: [500, 0],
  5 |     size: [240, 800],
  6 |     bgcolor: 'green'
  7 |   });
  8 |   layer.append(group);
  9 | 
 10 |   const arc = new Arc();
 11 |   arc.attr({
 12 |     pos: [10, 220],
 13 |     radius: 50,
 14 |     startAngle: Math.PI * 0.75,
 15 |     endAngle: Math.PI * 2.75,
 16 |     lineWidth: 20,
 17 |     strokeColor: 'red',
 18 |     startAngle: Math.PI * 0,
 19 |     endAngle: Math.PI * 1.6,
 20 |     lineCap: 'round',
 21 |     bgcolor: '#eee'
 22 |   });
 23 |   arc.on('mousemove', evt => {
 24 |     arc.attr('strokeColor', 'yellow');
 25 |     evt.stopDispatch();
 26 |   });
 27 |   arc.on('mouseleave', evt => {
 28 |     arc.attr('strokeColor', 'red');
 29 |     evt.stopDispatch();
 30 |   });
 31 |   arc.on('click', () => alert('click arc'));
 32 |   group.appendChild(arc);
 33 | 
 34 |   const sector = new Sector();
 35 |   sector.attr({
 36 |     pos: [10, 340],
 37 |     startAngle: 0,
 38 |     endAngle: Math.PI * 1.8,
 39 |     radius: 50,
 40 |     maxRadius: 50,
 41 |     lineWidth: 10,
 42 |     fillColor: 'orange',
 43 |     bgcolor: '#eee',
 44 |     strokeColor: 'blue'
 45 |   });
 46 | 
 47 |   sector.on('mousemove', evt => {
 48 |     sector.attr('bgcolor', 'red');
 49 |   });
 50 | 
 51 |   sector.on('mouseleave', evt => {
 52 |     sector.attr('bgcolor', '#eee');
 53 |   });
 54 | 
 55 |   group.appendChild(sector);
 56 | 
 57 |   const circle = new Circle();
 58 |   circle.attr({
 59 |     pos: [10, 450],
 60 |     radius: 50,
 61 |     lineWidth: 20,
 62 |     strokeColor: 'red',
 63 |     bgcolor: '#eee',
 64 |     anticlockwise: true,
 65 |     lineDash: [4, 6],
 66 |     lineDashOffset: 4
 67 |   });
 68 | 
 69 |   circle.animate(
 70 |     [
 71 |       {radius: 50 + 4 + 2, strokeColor: 'transparent'},
 72 |       {radius: 50 + 2, strokeColor: 'red'}
 73 |     ],
 74 |     {
 75 |       duration: 3000,
 76 |       iterations: Infinity
 77 |     }
 78 |   );
 79 | 
 80 |   circle.on('mousemove', evt => {
 81 |     circle.attr('radius', 60);
 82 |     evt.stopDispatch();
 83 |   });
 84 | 
 85 |   circle.on('mouseleave', evt => {
 86 |     circle.attr('radius', 30);
 87 |     evt.stopDispatch();
 88 |   });
 89 | 
 90 |   group.appendChild(circle);
 91 | 
 92 |   const ring2 = new Ring();
 93 |   ring2.attr({
 94 |     pos: [10, 570],
 95 |     bgcolor: '#eee',
 96 |     innerRadius: 15,
 97 |     outerRadius: 30,
 98 |     maxRadius: 50,
 99 |     fillColor: 'blue',
100 |     startAngle: Math.PI * 0.8,
101 |     endAngle: Math.PI * 2,
102 |     lineWidth: 10
103 |   });
104 |   ring2.on('mouseenter', evt => {
105 |     ring2.attr('fillColor', 'yellow');
106 |     evt.stopDispatch();
107 |   });
108 | 
109 |   ring2.on('mouseleave', evt => {
110 |     ring2.attr('fillColor', 'blue');
111 |     evt.stopDispatch();
112 |   });
113 |   group.appendChild(ring2);
114 | 
115 |   const ring3 = new Ring();
116 |   ring3.attr({
117 |     pos: [10, 570],
118 |     innerRadius: 15,
119 |     outerRadius: 40,
120 |     maxRadius: 50,
121 |     fillColor: 'red',
122 |     endAngle: Math.PI * 0.8,
123 |     lineWidth: 10
124 |   });
125 |   ring3.on('mouseenter', evt => {
126 |     ring3.attr('fillColor', 'yellow');
127 |     evt.stopDispatch();
128 |   });
129 | 
130 |   ring3.on('mouseleave', evt => {
131 |     ring3.attr('fillColor', 'blue');
132 |     evt.stopDispatch();
133 |   });
134 |   group.appendChild(ring3);
135 | 
136 |   {
137 |     const ellipse = new EllipseSector();
138 |     ellipse.attr({
139 |       pos: [10, 680],
140 |       radiusX: 15,
141 |       radiusY: 40,
142 |       fillColor: 'red',
143 |       lineWidth: 1,
144 |       bgcolor: '#eee',
145 | 
146 |       startAngle: Math.PI * 0.9,
147 |       endAngle: Math.PI * 2.1
148 |     });
149 |     ellipse.on('mouseenter', evt => {
150 |       ellipse.attr('fillColor', 'yellow');
151 |       evt.stopDispatch();
152 |     });
153 | 
154 |     ellipse.on('mouseleave', evt => {
155 |       ellipse.attr('fillColor', 'blue');
156 |       evt.stopDispatch();
157 |     });
158 |     group.appendChild(ellipse);
159 |   }
160 | 
161 |   {
162 |     const ellipse = new EllipseSector();
163 |     ellipse.attr({
164 |       pos: [50, 680],
165 |       radiusX: 15,
166 |       radiusY: 40,
167 |       fillColor: 'red',
168 |       lineWidth: 1,
169 |       bgcolor: '#eee',
170 | 
171 |       startAngle: -Math.PI * 2.8,
172 |       endAngle: -Math.PI * 2.9
173 |     });
174 |     ellipse.on('mouseenter', evt => {
175 |       ellipse.attr('fillColor', 'yellow');
176 |       evt.stopDispatch();
177 |     });
178 | 
179 |     ellipse.on('mouseleave', evt => {
180 |       ellipse.attr('fillColor', 'blue');
181 |       evt.stopDispatch();
182 |     });
183 |     group.appendChild(ellipse);
184 |   }
185 | 
186 |   {
187 |     const ellipse = new EllipseSector();
188 |     ellipse.attr({
189 |       pos: [100, 680],
190 |       radiusX: 15,
191 |       radiusY: 40,
192 |       fillColor: 'red',
193 |       lineWidth: 1,
194 |       bgcolor: '#eee',
195 | 
196 |       startAngle: -Math.PI * 0.8,
197 |       endAngle: Math.PI * 0.9
198 |     });
199 |     ellipse.on('mouseenter', evt => {
200 |       ellipse.attr('fillColor', 'yellow');
201 |       evt.stopDispatch();
202 |     });
203 | 
204 |     ellipse.on('mouseleave', evt => {
205 |       ellipse.attr('fillColor', 'blue');
206 |       evt.stopDispatch();
207 |     });
208 |     group.appendChild(ellipse);
209 |   }
210 | 
211 |   {
212 |     const ellipse = new EllipseSector();
213 |     ellipse.attr({
214 |       pos: [150, 680],
215 |       radiusX: 15,
216 |       radiusY: 40,
217 |       fillColor: 'red',
218 |       lineWidth: 1,
219 |       bgcolor: '#eee',
220 | 
221 |       startAngle: Math.PI * 0.8,
222 |       endAngle: -Math.PI * 0.9
223 |     });
224 |     ellipse.on('mouseenter', evt => {
225 |       ellipse.attr('fillColor', 'yellow');
226 |       evt.stopDispatch();
227 |     });
228 | 
229 |     ellipse.on('mouseleave', evt => {
230 |       ellipse.attr('fillColor', 'blue');
231 |       evt.stopDispatch();
232 |     });
233 |     group.appendChild(ellipse);
234 |   }
235 | 
236 |   {
237 |     const ellipse = new EllipseSector();
238 |     ellipse.attr({
239 |       pos: [190, 680],
240 |       radiusX: 15,
241 |       radiusY: 40,
242 |       fillColor: 'red',
243 |       lineWidth: 1,
244 |       bgcolor: '#eee',
245 | 
246 |       startAngle: Math.PI * 0.8,
247 |       endAngle: Math.PI * 1.9
248 |     });
249 |     ellipse.on('mouseenter', evt => {
250 |       ellipse.attr('fillColor', 'yellow');
251 |       evt.stopDispatch();
252 |     });
253 | 
254 |     ellipse.on('mouseleave', evt => {
255 |       ellipse.attr('fillColor', 'blue');
256 |       evt.stopDispatch();
257 |     });
258 |     group.appendChild(ellipse);
259 |   }
260 | }
261 | 


--------------------------------------------------------------------------------
/example/polygon.demo.js:
--------------------------------------------------------------------------------
  1 | function renderPolygonShapes() {
  2 |   const group = new Group({
  3 |     boxSizing: 'content-box',
  4 |     pos: [0, 0],
  5 |     size: [240, 800],
  6 |     bgcolor: 'green'
  7 |   });
  8 |   layer.append(group);
  9 | 
 10 |   const rect = new Rect();
 11 |   rect.attr({
 12 |     pos: [10, 10],
 13 |     strokeColor: 'red',
 14 |     lineCap: 'square',
 15 |     width: 100,
 16 |     height: 100,
 17 |     lineWidth: 20,
 18 |     fillColor: 'yellow',
 19 |     bgcolor: 'blue'
 20 |   });
 21 | 
 22 |   rect.on('mouseenter', evt => {
 23 |     rect.attr('strokeColor', 'yellow');
 24 |     evt.stopDispatch();
 25 |   });
 26 | 
 27 |   rect.on('mouseleave', evt => {
 28 |     rect.attr('strokeColor', 'red');
 29 |     evt.stopDispatch();
 30 |   });
 31 | 
 32 |   window.rect = rect;
 33 | 
 34 |   group.appendChild(rect);
 35 | 
 36 |   const triangle = new Triangle();
 37 |   triangle.attr({
 38 |     pos: [10, 120],
 39 |     strokeColor: 'red',
 40 |     sides: [100, 100],
 41 |     angle: 90,
 42 |     lineWidth: 1,
 43 |     fillColor: 'yellow',
 44 |     bgcolor: '#eee'
 45 |   });
 46 | 
 47 |   triangle.on('mouseenter', evt => {
 48 |     triangle.attr('strokeColor', 'yellow');
 49 |     evt.stopDispatch();
 50 |   });
 51 | 
 52 |   triangle.on('mouseleave', evt => {
 53 |     triangle.attr('strokeColor', 'red');
 54 |     evt.stopDispatch();
 55 |   });
 56 | 
 57 |   group.appendChild(triangle);
 58 | 
 59 |   const star = new Star();
 60 |   star.attr({
 61 |     pos: [10, 230],
 62 |     radius: 50,
 63 |     strokeColor: 'red',
 64 |     lineWidth: 5,
 65 |     angles: 5,
 66 |     bgcolor: 'blue',
 67 |     fillColor: 'yellow'
 68 |     //anchor: [ 0.5, 0.5 ]
 69 |   });
 70 |   star.on('mouseenter', evt => {
 71 |     star.attr('fillColor', 'green');
 72 |     evt.stopDispatch();
 73 |   });
 74 | 
 75 |   star.on('mouseleave', evt => {
 76 |     star.attr('fillColor', 'red');
 77 |     evt.stopDispatch();
 78 |   });
 79 | 
 80 |   group.appendChild(star);
 81 | 
 82 |   const polygon = new Polygon();
 83 |   polygon.attr({
 84 |     pos: [10, 340],
 85 |     fillColor: 'red',
 86 |     points: [
 87 |       [0, 140],
 88 |       [0, 70],
 89 |       [50, 60],
 90 |       [100, 20],
 91 |       [150, 80],
 92 |       [200, 100],
 93 |       [200, 140],
 94 |       [150, 110],
 95 |       [100, 90],
 96 |       [50, 130]
 97 |     ],
 98 |     strokeColor: 'blue',
 99 |     lineWidth: 10,
100 |     bgcolor: '#eee',
101 |     smooth: [1, 5]
102 |   });
103 |   polygon.on('mousemove', evt => {
104 |     polygon.attr('strokeColor', {
105 |       vector: [0, 0, 150, 150],
106 |       colors: [{offset: 0, color: 'red'}, {offset: 1, color: 'green'}]
107 |     });
108 |     evt.stopDispatch();
109 |   });
110 |   polygon.on('mouseleave', evt => {
111 |     polygon.attr('strokeColor', null);
112 |     evt.stopDispatch();
113 |   });
114 |   group.appendChild(polygon);
115 | 
116 |   let points = [
117 |     [60.86761704288983, 32.58359213500126],
118 |     [61.55367074350507, 72.36067977499789],
119 |     [23.935414596786792, 59.41640786499874],
120 |     [0, 27.63932022500211],
121 |     [38.04226065180614, 16],
122 |     [76.08452130361229, 27.639320225002095],
123 |     [52.149106706825506, 59.41640786499873],
124 |     [14.530850560107229, 72.3606797749979],
125 |     [15.216904260722458, 32.58359213500127],
126 |     [38.04226065180613, 0]
127 |   ];
128 |   let pg = new Polygon();
129 |   pg.attr({
130 |     points: points,
131 |     pos: [10, 510],
132 |     fillColor: '#0ff',
133 |     strokeColor: 'red',
134 |     bgcolor: '#eee',
135 |     lineWidth: 10
136 |   });
137 |   group.appendChild(pg);
138 | }
139 | 


--------------------------------------------------------------------------------
/example/polyline.demo.js:
--------------------------------------------------------------------------------
 1 | function renderPolylineShapes() {
 2 |   const group = new Group({
 3 |     boxSizing: 'content-box',
 4 |     pos: [250, 0],
 5 |     size: [240, 800],
 6 |     bgcolor: 'green'
 7 |   });
 8 |   layer.append(group);
 9 | 
10 |   const polyline2 = new Polyline();
11 |   polyline2.attr({
12 |     pos: [10, 10],
13 |     strokeColor: {
14 |       vector: [0, 0, 150, 150],
15 |       colors: [{offset: 0, color: 'red'}, {offset: 1, color: 'blue'}]
16 |     },
17 |     lineWidth: 1,
18 |     points: [
19 |       [-1, 140],
20 |       [0, 70],
21 |       [50, 44],
22 |       [100, 20],
23 |       [150, 80],
24 |       [200, 100],
25 |       [200, 141]
26 |     ],
27 |     tolerance: 7,
28 |     lineWidth: 20,
29 |     bgcolor: '#eee',
30 |     fillColor: 'red',
31 |     smooth: true,
32 |     close: true
33 |   });
34 |   polyline2.on('click', () => alert('click2'));
35 |   polyline2.on('mousemove', evt => console.log('move: ', evt));
36 |   group.appendChild(polyline2);
37 | 
38 |   const polycurve = new Polycurve();
39 |   polycurve.attr({
40 |     pos: [10, 200],
41 |     startPoint: [20, 20],
42 |     points: [
43 |       [221, 158, 221, 189.2639320225002, 165.8680339887499, 189.2639320225002],
44 |       [
45 |         165.8680339887499,
46 |         189.2639320225002,
47 |         110.73606797749979,
48 |         189.2639320225002,
49 |         110.73606797749979,
50 |         378.5278640450004
51 |       ]
52 |     ],
53 |     lineWidth: 10,
54 |     bgcolor: '#eee',
55 |     strokeColor: '#f00'
56 |     //fillColor: 'green'
57 |   });
58 | 
59 |   polycurve.on('mouseenter', () => {
60 |     polycurve.attr('fillColor', 'yellow');
61 |   });
62 | 
63 |   polycurve.on('click', () => {
64 |     polycurve.attr('fillColor', 'yellow');
65 |   });
66 | 
67 |   polycurve.on('mouseleave', () => {
68 |     polycurve.attr('fillColor', 'blue');
69 |   });
70 | 
71 |   group.appendChild(polycurve);
72 | }
73 | 


--------------------------------------------------------------------------------
/example/test-shape.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Document</title>
 8 |     <style>
 9 |       #container {
10 |         width: 1000px;
11 |         height: 800px;
12 |         background: #aaa;
13 |       }
14 |     </style>
15 |   </head>
16 | 
17 |   <body>
18 |     <div id="container"></div>
19 | 
20 |     <script src="https://unpkg.com/spritejs/dist/spritejs.min.js"></script>
21 |     <script src="/js/sprite-extend-shapes.js"></script>
22 |     <script src="./ellipse.demo.js"></script>
23 |     <script src="./polygon.demo.js"></script>
24 |     <script src="./polyline.demo.js"></script>
25 |     <script src="./wave.demo.js"></script>
26 |     <script>
27 |       spritejs.use(spriteShapes.install);
28 | 
29 |       const {
30 |         Sprite,
31 |         Group,
32 |         Polygon,
33 |         Polyline,
34 |         Triangle,
35 |         Rect,
36 |         Star,
37 |         Arc,
38 |         Sector,
39 |         Circle,
40 |         Ring,
41 |         Ellipse,
42 |         EllipseArc,
43 |         EllipseSector,
44 |         Polycurve,
45 |         Wave
46 |       } = spritejs;
47 | 
48 |       const {Scene, Layer} = spritejs;
49 | 
50 |       const scene = new Scene('#container', {
51 |         resolution: [1000, 800],
52 |         displayRatio: 'auto'
53 |       });
54 |       const layer = scene.layer();
55 | 
56 |       renderEllipseShapes();
57 |       renderPolygonShapes();
58 |       renderPolylineShapes();
59 |       renderWaveShapes();
60 |     </script>
61 |   </body>
62 | </html>
63 | 


--------------------------------------------------------------------------------
/example/wave.demo.js:
--------------------------------------------------------------------------------
 1 | function renderWaveShapes() {
 2 |   const group = new Group({
 3 |     boxSizing: 'content-box',
 4 |     pos: [750, 0],
 5 |     size: [240, 800],
 6 |     bgcolor: 'green'
 7 |   });
 8 |   layer.append(group);
 9 | 
10 |   const wave = new Wave();
11 |   wave.attr({
12 |     pos: [10, 10],
13 |     radius: 80,
14 |     offset: 10,
15 |     lineWidth: 10,
16 |     bgcolor: 'red',
17 |     color: '#158bca',
18 |     fillColor: '#158bca',
19 |     percent: [0.8, 0.7, 0.4],
20 |     wavesColor: ['#3488da', '#2c65c6'],
21 |     amplitude: 20,
22 |     shapeColor: '#58b8fe',
23 |     shapeFillColor: '#e5f7ff',
24 |     shapeScale: 0.5,
25 |     shape:
26 |       'M367.855,428.202c-3.674-1.385-7.452-1.966-11.146-1.794c0.659-2.922,0.844-5.85,0.58-8.719 c-0.937-10.407-7.663-19.864-18.063-23.834c-10.697-4.043-22.298-1.168-29.902,6.403c3.015,0.026,6.074,0.594,9.035,1.728 c13.626,5.151,20.465,20.379,15.32,34.004c-1.905,5.02-5.177,9.115-9.22,12.05c-6.951,4.992-16.19,6.536-24.777,3.271 c-13.625-5.137-20.471-20.371-15.32-34.004c0.673-1.768,1.523-3.423,2.526-4.992h-0.014c0,0,0,0,0,0.014 c4.386-6.853,8.145-14.279,11.146-22.187c23.294-61.505-7.689-130.278-69.215-153.579c-61.532-23.293-130.279,7.69-153.579,69.202 c-6.371,16.785-8.679,34.097-7.426,50.901c0.026,0.554,0.079,1.121,0.132,1.688c4.973,57.107,41.767,109.148,98.945,130.793 c58.162,22.008,121.303,6.529,162.839-34.465c7.103-6.893,17.826-9.444,27.679-5.719c11.858,4.491,18.565,16.6,16.719,28.643 c4.438-3.126,8.033-7.564,10.117-13.045C389.751,449.992,382.411,433.709,367.855,428.202z',
27 |     speed: 0
28 |   });
29 | 
30 |   group.appendChild(wave);
31 | 
32 |   let speed = 0;
33 |   const step = () => {
34 |     speed += 0.1;
35 |     wave.attr('speed', speed);
36 |     requestAnimationFrame(step);
37 |   };
38 |   step();
39 | 
40 |   const wave2 = new Wave();
41 |   wave2.attr({
42 |     pos: [10, 190],
43 |     radius: 80,
44 |     offset: 10,
45 |     lineWidth: 5,
46 |     color: '#158bca',
47 |     fillColor: '#158bca',
48 |     bgcolor: 'red',
49 | 
50 |     percent: 0.6,
51 |     amplitude: 20,
52 |     shapeScale: 5,
53 |     trim: true,
54 |     shape:
55 |       'M23.6,0c-3.4,0-6.3,2.7-7.6,5.6C14.7,2.7,11.8,0,8.4,0C3.8,0,0,3.8,0,8.4c0,9.4,9.5,11.9,16,21.2 c6.1-9.3,16-12.1,16-21.2C32,3.8,28.2,0,23.6,0z',
56 |     speed: 0
57 |   });
58 | 
59 |   group.appendChild(wave2);
60 | 
61 |   let speed2 = 0;
62 |   const step2 = () => {
63 |     speed2 += 0.1;
64 |     wave2.attr('speed', speed2);
65 |     requestAnimationFrame(step2);
66 |   };
67 |   step2();
68 | 
69 |   const wave3 = new Wave();
70 |   wave3.attr({
71 |     pos: [10, 370],
72 |     radius: 60,
73 |     offset: 10,
74 |     lineWidth: 10,
75 |     bgcolor: 'red',
76 | 
77 |     wavesColor: '#158bca',
78 |     outlineColor: '#158bca',
79 |     percent: 1.9,
80 |     amplitude: 20,
81 |     speed: 0
82 |   });
83 | 
84 |   group.appendChild(wave3);
85 | }
86 | 


--------------------------------------------------------------------------------
/lib/ellipse.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 4 | 
 5 | Object.defineProperty(exports, "__esModule", {
 6 |   value: true
 7 | });
 8 | exports.default = install;
 9 | 
10 | var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
11 | 
12 | var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
13 | 
14 | var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
15 | 
16 | var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
17 | 
18 | var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
19 | 
20 | var _ellipseSector = _interopRequireDefault(require("./ellipseSector"));
21 | 
22 | function install(_ref) {
23 |   var use = _ref.use,
24 |       utils = _ref.utils,
25 |       registerNodeType = _ref.registerNodeType;
26 | 
27 |   var _use = use(_ellipseSector.default, null, false),
28 |       EllipseSector = _use.EllipseSector;
29 | 
30 |   var Ellipse =
31 |   /*#__PURE__*/
32 |   function (_EllipseSector) {
33 |     (0, _inherits2.default)(Ellipse, _EllipseSector);
34 | 
35 |     function Ellipse() {
36 |       (0, _classCallCheck2.default)(this, Ellipse);
37 |       return (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(Ellipse).apply(this, arguments));
38 |     }
39 | 
40 |     (0, _createClass2.default)(Ellipse, [{
41 |       key: "startAngle",
42 |       get: function get() {
43 |         return 0;
44 |       }
45 |     }, {
46 |       key: "endAngle",
47 |       get: function get() {
48 |         return 2 * Math.PI;
49 |       }
50 |     }]);
51 |     return Ellipse;
52 |   }(EllipseSector);
53 | 
54 |   registerNodeType('ellipse', Ellipse, false);
55 |   return {
56 |     Ellipse: Ellipse
57 |   };
58 | }


--------------------------------------------------------------------------------
/lib/index.js:
--------------------------------------------------------------------------------
  1 | "use strict";
  2 | 
  3 | var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  4 | 
  5 | Object.defineProperty(exports, "__esModule", {
  6 |   value: true
  7 | });
  8 | exports.install = install;
  9 | Object.defineProperty(exports, "Shape", {
 10 |   enumerable: true,
 11 |   get: function get() {
 12 |     return _shape.default;
 13 |   }
 14 | });
 15 | Object.defineProperty(exports, "Arc", {
 16 |   enumerable: true,
 17 |   get: function get() {
 18 |     return _arc.default;
 19 |   }
 20 | });
 21 | Object.defineProperty(exports, "Polyline", {
 22 |   enumerable: true,
 23 |   get: function get() {
 24 |     return _polyline.default;
 25 |   }
 26 | });
 27 | Object.defineProperty(exports, "Polycurve", {
 28 |   enumerable: true,
 29 |   get: function get() {
 30 |     return _polycurve.default;
 31 |   }
 32 | });
 33 | Object.defineProperty(exports, "Wave", {
 34 |   enumerable: true,
 35 |   get: function get() {
 36 |     return _wave.default;
 37 |   }
 38 | });
 39 | Object.defineProperty(exports, "Ring", {
 40 |   enumerable: true,
 41 |   get: function get() {
 42 |     return _ring.default;
 43 |   }
 44 | });
 45 | Object.defineProperty(exports, "Polygon", {
 46 |   enumerable: true,
 47 |   get: function get() {
 48 |     return _polygon.default;
 49 |   }
 50 | });
 51 | Object.defineProperty(exports, "Triangle", {
 52 |   enumerable: true,
 53 |   get: function get() {
 54 |     return _triangle.default;
 55 |   }
 56 | });
 57 | Object.defineProperty(exports, "Rect", {
 58 |   enumerable: true,
 59 |   get: function get() {
 60 |     return _rect.default;
 61 |   }
 62 | });
 63 | Object.defineProperty(exports, "Star", {
 64 |   enumerable: true,
 65 |   get: function get() {
 66 |     return _star.default;
 67 |   }
 68 | });
 69 | Object.defineProperty(exports, "EllipseSector", {
 70 |   enumerable: true,
 71 |   get: function get() {
 72 |     return _ellipseSector.default;
 73 |   }
 74 | });
 75 | Object.defineProperty(exports, "EllipseArc", {
 76 |   enumerable: true,
 77 |   get: function get() {
 78 |     return _ellipseArc.default;
 79 |   }
 80 | });
 81 | Object.defineProperty(exports, "Sector", {
 82 |   enumerable: true,
 83 |   get: function get() {
 84 |     return _sector.default;
 85 |   }
 86 | });
 87 | Object.defineProperty(exports, "Ellipse", {
 88 |   enumerable: true,
 89 |   get: function get() {
 90 |     return _ellipse.default;
 91 |   }
 92 | });
 93 | Object.defineProperty(exports, "Circle", {
 94 |   enumerable: true,
 95 |   get: function get() {
 96 |     return _circle.default;
 97 |   }
 98 | });
 99 | exports.default = exports.version = exports.Shapes = void 0;
100 | 
101 | var _shape = _interopRequireDefault(require("./shape"));
102 | 
103 | var _arc = _interopRequireDefault(require("./arc"));
104 | 
105 | var _polyline = _interopRequireDefault(require("./polyline"));
106 | 
107 | var _polycurve = _interopRequireDefault(require("./polycurve"));
108 | 
109 | var _wave = _interopRequireDefault(require("./wave"));
110 | 
111 | var _ring = _interopRequireDefault(require("./ring"));
112 | 
113 | var _polygon = _interopRequireDefault(require("./polygon"));
114 | 
115 | var _triangle = _interopRequireDefault(require("./triangle"));
116 | 
117 | var _rect = _interopRequireDefault(require("./rect"));
118 | 
119 | var _star = _interopRequireDefault(require("./star"));
120 | 
121 | var _ellipseSector = _interopRequireDefault(require("./ellipseSector"));
122 | 
123 | var _ellipseArc = _interopRequireDefault(require("./ellipseArc"));
124 | 
125 | var _sector = _interopRequireDefault(require("./sector"));
126 | 
127 | var _ellipse = _interopRequireDefault(require("./ellipse"));
128 | 
129 | var _circle = _interopRequireDefault(require("./circle"));
130 | 
131 | var version = require('../package.json').version;
132 | 
133 | exports.version = version;
134 | var Shapes = {
135 |   version: version,
136 |   install: install,
137 |   Shape: _shape.default,
138 |   Polyline: _polyline.default,
139 |   Polycurve: _polycurve.default,
140 |   Wave: _wave.default,
141 |   Polygon: _polygon.default,
142 |   Triangle: _triangle.default,
143 |   Rect: _rect.default,
144 |   Star: _star.default,
145 |   Arc: _arc.default,
146 |   Sector: _sector.default,
147 |   Ellipse: _ellipse.default,
148 |   EllipseSector: _ellipseSector.default,
149 |   EllipseArc: _ellipseArc.default,
150 |   Circle: _circle.default,
151 |   Ring: _ring.default
152 | };
153 | exports.Shapes = Shapes;
154 | 
155 | function install(spritejs) {
156 |   return Object.keys(Shapes).reduce(function (pkg, key) {
157 |     if (key === 'version' || key === 'install') {
158 |       return pkg;
159 |     }
160 | 
161 |     return Object.assign(pkg, spritejs.use(Shapes[key], null, false));
162 |   }, {});
163 | } // auto use
164 | // if (typeof window !== 'undefined' && window.spritejs) {
165 | //   window.spritejs.use(Shapes);
166 | // }
167 | 
168 | 
169 | var _default = Shapes;
170 | exports.default = _default;


--------------------------------------------------------------------------------
/lib/sector.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 4 | 
 5 | Object.defineProperty(exports, "__esModule", {
 6 |   value: true
 7 | });
 8 | exports.default = install;
 9 | 
10 | var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
11 | 
12 | var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
13 | 
14 | var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
15 | 
16 | var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
17 | 
18 | var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
19 | 
20 | var _ellipseSector = _interopRequireDefault(require("./ellipseSector"));
21 | 
22 | function install(_ref) {
23 |   var use = _ref.use,
24 |       utils = _ref.utils,
25 |       registerNodeType = _ref.registerNodeType;
26 | 
27 |   var _use = use(_ellipseSector.default, null, false),
28 |       EllipseSector = _use.EllipseSector;
29 | 
30 |   var Sector =
31 |   /*#__PURE__*/
32 |   function (_EllipseSector) {
33 |     (0, _inherits2.default)(Sector, _EllipseSector);
34 | 
35 |     function Sector() {
36 |       (0, _classCallCheck2.default)(this, Sector);
37 |       return (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(Sector).apply(this, arguments));
38 |     }
39 | 
40 |     (0, _createClass2.default)(Sector, [{
41 |       key: "radiuses",
42 |       get: function get() {
43 |         return [this.attr('radius'), this.attr('radius')];
44 |       }
45 |     }]);
46 |     return Sector;
47 |   }(EllipseSector);
48 | 
49 |   Sector.defineAttributes({
50 |     radius: function radius(attr, val) {
51 |       attr.clearFlow();
52 |       attr.set('radius', val);
53 |     }
54 |   });
55 |   registerNodeType('sector', Sector, false);
56 |   return {
57 |     Sector: Sector
58 |   };
59 | }


--------------------------------------------------------------------------------
/lib/triangle.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 4 | 
 5 | Object.defineProperty(exports, "__esModule", {
 6 |   value: true
 7 | });
 8 | exports.default = install;
 9 | 
10 | var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
11 | 
12 | var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
13 | 
14 | var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
15 | 
16 | var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
17 | 
18 | var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
19 | 
20 | var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
21 | 
22 | var _polygon = _interopRequireDefault(require("./polygon"));
23 | 
24 | function install(_ref) {
25 |   var use = _ref.use,
26 |       utils = _ref.utils,
27 |       registerNodeType = _ref.registerNodeType;
28 | 
29 |   var _use = use(_polygon.default, null, false),
30 |       Polygon = _use.Polygon;
31 | 
32 |   var Triangle =
33 |   /*#__PURE__*/
34 |   function (_Polygon) {
35 |     (0, _inherits2.default)(Triangle, _Polygon);
36 | 
37 |     function Triangle() {
38 |       (0, _classCallCheck2.default)(this, Triangle);
39 |       return (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(Triangle).apply(this, arguments));
40 |     }
41 | 
42 |     (0, _createClass2.default)(Triangle, [{
43 |       key: "contentSize",
44 |       get: function get() {
45 |         var _this$attr = this.attr('sides'),
46 |             _this$attr2 = (0, _slicedToArray2.default)(_this$attr, 2),
47 |             s1 = _this$attr2[0],
48 |             s2 = _this$attr2[1];
49 | 
50 |         return [s1, s2];
51 |       }
52 |     }, {
53 |       key: "points",
54 |       get: function get() {
55 |         var _this$attr3 = this.attr('sides'),
56 |             _this$attr4 = (0, _slicedToArray2.default)(_this$attr3, 2),
57 |             s1 = _this$attr4[0],
58 |             s2 = _this$attr4[1];
59 | 
60 |         var lw = this.attr('lineWidth');
61 |         s1 -= lw * 2;
62 |         s2 -= lw * 2;
63 |         var angle = Math.PI / 180 * this.attr('angle');
64 |         var p0 = [0, 0];
65 |         var p1 = [s1, 0];
66 |         var p2 = [s2 * Math.cos(angle), s2 * Math.sin(angle)];
67 |         return [p0, p1, p2];
68 |       }
69 |     }]);
70 |     return Triangle;
71 |   }(Polygon);
72 | 
73 |   registerNodeType('triangle', Triangle, false);
74 |   return {
75 |     Triangle: Triangle
76 |   };
77 | }


--------------------------------------------------------------------------------
/lib/util.js:
--------------------------------------------------------------------------------
  1 | "use strict";
  2 | 
  3 | var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  4 | 
  5 | Object.defineProperty(exports, "__esModule", {
  6 |   value: true
  7 | });
  8 | exports.makeSmoothCurveLine = makeSmoothCurveLine;
  9 | exports.drawSmoothCurveLine = drawSmoothCurveLine;
 10 | exports.angleOf = angleOf;
 11 | exports.pointsEqual = pointsEqual;
 12 | exports.round = exports.sin = exports.cos = void 0;
 13 | 
 14 | var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 15 | 
 16 | var cos = function cos(angle) {
 17 |   return Number(Math.cos(angle).toFixed(15));
 18 | };
 19 | 
 20 | exports.cos = cos;
 21 | 
 22 | var sin = function sin(angle) {
 23 |   return Number(Math.sin(angle).toFixed(15));
 24 | };
 25 | 
 26 | exports.sin = sin;
 27 | 
 28 | var round = function round(v) {
 29 |   return Math.round(v);
 30 | };
 31 | /**
 32 |  * 使用 贝塞尔曲线 模拟绘制平滑曲线
 33 |  * @param {*} points 绘制点
 34 |  */
 35 | 
 36 | 
 37 | exports.round = round;
 38 | 
 39 | function makeSmoothCurveLine(points, smoothStart) {
 40 |   /**
 41 |    * 获取 模拟贝塞尔曲线关键控制点
 42 |    * @param {*} i
 43 |    * @param {*} a
 44 |    * @param {*} b
 45 |    */
 46 |   function getCtrlPoint(i) {
 47 |     var a = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.1;
 48 |     var b = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0.1;
 49 |     var x0;
 50 |     var y0;
 51 |     var x1;
 52 |     var y1;
 53 | 
 54 |     if (points[i].x === points[i + 1].x || points[i].y === points[i + 1].y) {
 55 |       a = 0;
 56 |       b = 0;
 57 |     }
 58 | 
 59 |     if (i < 1) {
 60 |       x0 = points[0].x + (points[1].x - points[0].x) * a;
 61 |       y0 = points[0].y + (points[1].y - points[0].y) * a;
 62 |     } else {
 63 |       x0 = points[i].x + (points[i + 1].x - points[i - 1].x) * a;
 64 |       y0 = points[i].y + (points[i + 1].y - points[i - 1].y) * a;
 65 |     }
 66 | 
 67 |     if (i > points.length - 3) {
 68 |       var last = points.length - 1;
 69 |       x1 = points[last].x - (points[last].x - points[last - 1].x) * b;
 70 |       y1 = points[last].y - (points[last].y - points[last - 1].y) * b;
 71 |     } else {
 72 |       x1 = points[i + 1].x - (points[i + 2].x - points[i].x) * b;
 73 |       y1 = points[i + 1].y - (points[i + 2].y - points[i].y) * b;
 74 |     }
 75 | 
 76 |     return [{
 77 |       x: x0,
 78 |       y: y0
 79 |     }, {
 80 |       x: x1,
 81 |       y: y1
 82 |     }];
 83 |   }
 84 | 
 85 |   points = points.map(function (_ref) {
 86 |     var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
 87 |         x = _ref2[0],
 88 |         y = _ref2[1];
 89 | 
 90 |     return {
 91 |       x: x,
 92 |       y: y
 93 |     };
 94 |   });
 95 |   var d = '';
 96 |   points.forEach(function (point, i) {
 97 |     if (i === 0 && smoothStart === 0) {
 98 |       // 从第0个点开始绘制曲线
 99 |       d += "M".concat(point.x, " ").concat(point.y);
100 |     } else if (i === 0 && smoothStart !== 0) {
101 |       // 不是从第一个开始曲线
102 |       d += "L".concat(point.x, " ").concat(point.y);
103 |     } else {
104 |       var _getCtrlPoint = getCtrlPoint(i - 1),
105 |           _getCtrlPoint2 = (0, _slicedToArray2.default)(_getCtrlPoint, 2),
106 |           A = _getCtrlPoint2[0],
107 |           B = _getCtrlPoint2[1];
108 | 
109 |       d += "C".concat([A.x, A.y, B.x, B.y, point.x, point.y].join(' '));
110 |     }
111 |   });
112 |   return d;
113 | }
114 | /**
115 |  * 使用 贝塞尔曲线 模拟绘制平滑曲线
116 |  * @param {*} ctx 绘制上下文,如:Context2D
117 |  * @param {*} points 绘制点
118 |  */
119 | 
120 | 
121 | function drawSmoothCurveLine(ctx, points, smoothStart) {
122 |   /**
123 |    * 获取 模拟贝塞尔曲线关键控制点
124 |    * @param {*} i
125 |    * @param {*} a
126 |    * @param {*} b
127 |    */
128 |   function getCtrlPoint(i) {
129 |     var a = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.1;
130 |     var b = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0.1;
131 |     var x0;
132 |     var y0;
133 |     var x1;
134 |     var y1;
135 | 
136 |     if (points[i].x === points[i + 1].x || points[i].y === points[i + 1].y) {
137 |       a = 0;
138 |       b = 0;
139 |     }
140 | 
141 |     if (i < 1) {
142 |       x0 = points[0].x + (points[1].x - points[0].x) * a;
143 |       y0 = points[0].y + (points[1].y - points[0].y) * a;
144 |     } else {
145 |       x0 = points[i].x + (points[i + 1].x - points[i - 1].x) * a;
146 |       y0 = points[i].y + (points[i + 1].y - points[i - 1].y) * a;
147 |     }
148 | 
149 |     if (i > points.length - 3) {
150 |       var last = points.length - 1;
151 |       x1 = points[last].x - (points[last].x - points[last - 1].x) * b;
152 |       y1 = points[last].y - (points[last].y - points[last - 1].y) * b;
153 |     } else {
154 |       x1 = points[i + 1].x - (points[i + 2].x - points[i].x) * b;
155 |       y1 = points[i + 1].y - (points[i + 2].y - points[i].y) * b;
156 |     }
157 | 
158 |     return [{
159 |       x: x0,
160 |       y: y0
161 |     }, {
162 |       x: x1,
163 |       y: y1
164 |     }];
165 |   }
166 | 
167 |   points = points.map(function (_ref3) {
168 |     var _ref4 = (0, _slicedToArray2.default)(_ref3, 2),
169 |         x = _ref4[0],
170 |         y = _ref4[1];
171 | 
172 |     return {
173 |       x: x,
174 |       y: y
175 |     };
176 |   });
177 |   points.forEach(function (point, i) {
178 |     if (i === 0 && smoothStart === 0) {
179 |       // 从第0个点开始绘制曲线
180 |       ctx.moveTo(point.x, point.y);
181 |     } else if (i === 0 && smoothStart !== 0) {
182 |       // 不是从第一个开始曲线
183 |       ctx.lineTo(point.x, point.y);
184 |     } else {
185 |       var _getCtrlPoint3 = getCtrlPoint(i - 1),
186 |           _getCtrlPoint4 = (0, _slicedToArray2.default)(_getCtrlPoint3, 2),
187 |           A = _getCtrlPoint4[0],
188 |           B = _getCtrlPoint4[1];
189 | 
190 |       ctx.bezierCurveTo(A.x, A.y, B.x, B.y, point.x, point.y);
191 |     }
192 |   });
193 | }
194 | 
195 | function angleOf(v1) {
196 |   var v2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [1, 0];
197 |   var ang = Math.atan2(v1[1], v1[0]) - Math.atan2(v2[1], v2[0]);
198 |   if (ang < 0.0) ang += 2.0 * Math.PI;
199 |   return ang;
200 | }
201 | 
202 | function pointsEqual(p1, p2) {
203 |   if (p1.length !== p2.length) return false;
204 | 
205 |   for (var i = 0; i < p1.length; i++) {
206 |     if (p1[i][0] !== p2[i][0] || p1[i][1] !== p2[i][1]) return false;
207 |   }
208 | 
209 |   return true;
210 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@spritejs/shapes",
 3 |   "version": "1.1.7",
 4 |   "description": "",
 5 |   "main": "dist/sprite-extend-shapes.js",
 6 |   "module": "dist/sprite-extend-shapes.esm.js",
 7 |   "directories": {
 8 |     "example": "examples",
 9 |     "lib": "lib",
10 |     "test": "test"
11 |   },
12 |   "scripts": {
13 |     "build": "npm run build:es6 && npm run build:prod && npm run build:nobrowser",
14 |     "build:prod": "babel src -d lib && webpack --env.production",
15 |     "build:es6": "babel src -d lib && webpack --env.esnext",
16 |     "build:nobrowser": "babel src -d lib && webpack --env.nobrowser",
17 |     "standalone": "babel src -d lib && webpack --env.standalone",
18 |     "start": "webpack-dev-server --watch-poll",
19 |     "prepublishOnly": "npm run build",
20 |     "test": "nyc ava --serial && rimraf ./coverage && mkdir coverage && nyc report --reporter=html > ./coverage/lcov.info",
21 |     "lint": "eslint ./ --fix"
22 |   },
23 |   "author": "akira-cn",
24 |   "license": "MIT",
25 |   "devDependencies": {
26 |     "@babel/cli": "^7.2.0",
27 |     "@babel/core": "^7.2.0",
28 |     "@babel/plugin-external-helpers": "^7.2.0",
29 |     "@babel/plugin-proposal-class-properties": "^7.2.1",
30 |     "@babel/plugin-proposal-decorators": "^7.2.0",
31 |     "@babel/plugin-transform-runtime": "^7.2.0",
32 |     "@babel/preset-env": "^7.2.0",
33 |     "@purtuga/esm-webpack-plugin": "^1.1.1",
34 |     "@babel/register": "^7.0.0",
35 |     "ava": "^1.4.1",
36 |     "babel-eslint": "^10.0.1",
37 |     "babel-loader": "^8.0.5",
38 |     "canvas": "^2.0.0-alpha.16",
39 |     "canvas-5-polyfill": "^0.1.5",
40 |     "colors": "^1.3.1",
41 |     "coveralls": "^3.0.2",
42 |     "css-loader": "^2.0.0",
43 |     "eslint": "^5.0.1",
44 |     "eslint-config-sprite": "^1.0.4",
45 |     "eslint-plugin-html": "^4.0.5",
46 |     "hamming-distance": "^1.0.0",
47 |     "html-webpack-plugin": "^3.2.0",
48 |     "imghash": "^0.0.3",
49 |     "nyc": "^12.0.2",
50 |     "pixelmatch": "^4.0.2",
51 |     "rimraf": "^2.6.2",
52 |     "spritejs": "^2.29.2",
53 |     "style-loader": "^0.23.1",
54 |     "webpack": "^4.35.0",
55 |     "webpack-bundle-analyzer": "^3.0.3",
56 |     "webpack-cli": "^3.3.5",
57 |     "webpack-dev-server": "^3.7.2",
58 |     "webpack-hot-middleware": "^2.24.3",
59 |     "webpack-merge": "^4.1.5"
60 |   },
61 |   "ava": {
62 |     "files": [
63 |       "**/test/*.test.js"
64 |     ],
65 |     "require": [
66 |       "@babel/register"
67 |     ],
68 |     "babel": {
69 |       "testOptions": {
70 |         "babelrc": true
71 |       }
72 |     }
73 |   },
74 |   "nyc": {
75 |     "exclude": [
76 |       "**/test/**/*.js"
77 |     ]
78 |   },
79 |   "dependencies": {
80 |     "@babel/runtime": "^7.2.0",
81 |     "sprite-draggable": "0.1.15",
82 |     "svg-path-to-canvas": "^1.11.3"
83 |   }
84 | }
85 | 


--------------------------------------------------------------------------------
/pictures/arc.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spritejs/sprite-extend-shapes/0f5d72f9e2a007b96f6355937d89540bacfb2eb2/pictures/arc.png


--------------------------------------------------------------------------------
/pictures/circle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spritejs/sprite-extend-shapes/0f5d72f9e2a007b96f6355937d89540bacfb2eb2/pictures/circle.png


--------------------------------------------------------------------------------
/pictures/ellipse.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spritejs/sprite-extend-shapes/0f5d72f9e2a007b96f6355937d89540bacfb2eb2/pictures/ellipse.png


--------------------------------------------------------------------------------
/pictures/ellipseArc.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spritejs/sprite-extend-shapes/0f5d72f9e2a007b96f6355937d89540bacfb2eb2/pictures/ellipseArc.png


--------------------------------------------------------------------------------
/pictures/ellipseSector.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spritejs/sprite-extend-shapes/0f5d72f9e2a007b96f6355937d89540bacfb2eb2/pictures/ellipseSector.png


--------------------------------------------------------------------------------
/pictures/polycurve.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spritejs/sprite-extend-shapes/0f5d72f9e2a007b96f6355937d89540bacfb2eb2/pictures/polycurve.png


--------------------------------------------------------------------------------
/pictures/polygon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spritejs/sprite-extend-shapes/0f5d72f9e2a007b96f6355937d89540bacfb2eb2/pictures/polygon.png


--------------------------------------------------------------------------------
/pictures/polyline.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spritejs/sprite-extend-shapes/0f5d72f9e2a007b96f6355937d89540bacfb2eb2/pictures/polyline.png


--------------------------------------------------------------------------------
/pictures/rectangle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spritejs/sprite-extend-shapes/0f5d72f9e2a007b96f6355937d89540bacfb2eb2/pictures/rectangle.png


--------------------------------------------------------------------------------
/pictures/ring.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spritejs/sprite-extend-shapes/0f5d72f9e2a007b96f6355937d89540bacfb2eb2/pictures/ring.png


--------------------------------------------------------------------------------
/pictures/sector.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spritejs/sprite-extend-shapes/0f5d72f9e2a007b96f6355937d89540bacfb2eb2/pictures/sector.png


--------------------------------------------------------------------------------
/pictures/star.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spritejs/sprite-extend-shapes/0f5d72f9e2a007b96f6355937d89540bacfb2eb2/pictures/star.png


--------------------------------------------------------------------------------
/pictures/triangle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spritejs/sprite-extend-shapes/0f5d72f9e2a007b96f6355937d89540bacfb2eb2/pictures/triangle.png


--------------------------------------------------------------------------------
/script/qcdn.js:
--------------------------------------------------------------------------------
 1 | const file = './dist/sprite-extend-shapes.js'
 2 | const fs = require('fs'),
 3 |   path = require('path')
 4 | 
 5 | try {
 6 |   const qcdn = require('@q/qcdn')
 7 |   return qcdn.upload(file, {
 8 |     https: true,
 9 |     keepName: true,
10 |   }).then((res) => {
11 |     console.log('file uploaded, CDN URL: %s', res[file])
12 |     let readmeFile = path.resolve(__dirname, '..', 'README.md')
13 |     let content = fs.readFileSync(readmeFile, 'utf-8')
14 |     content = content.replace(/script src="(.*)"/igm, `script src="${res[file]}"`)
15 |     fs.writeFileSync(readmeFile, content)
16 |   })
17 | } catch (ex) {
18 |   return Promise.reject(new Error('no cdn uploader specified!'))
19 | }


--------------------------------------------------------------------------------
/src/arc.js:
--------------------------------------------------------------------------------
 1 | import ShapePlugin from './shape';
 2 | import EllipseArcPlugin from './ellipseArc';
 3 | 
 4 | export default function install({use, utils, registerNodeType}) {
 5 |   const {attr} = utils;
 6 |   const {EllipseArc} = use(EllipseArcPlugin, null, false);
 7 | 
 8 |   const reflow = true;
 9 | 
10 |   class ArcAttr extends EllipseArc.Attr {
11 |     constructor(subject) {
12 |       super(subject);
13 |       this.setDefault({
14 |         radius: 10,
15 |       });
16 |     }
17 | 
18 |     // 圆弧起始点
19 |     @attr({reflow})
20 |     set radius(val) {
21 |       this.set('radius', val);
22 |     }
23 |   }
24 | 
25 |   class Arc extends EllipseArc {
26 |     static Attr = ArcAttr;
27 | 
28 |     get radiuses() {
29 |       const radius = this.attr('radius');
30 |       return [radius, radius];
31 |     }
32 |   }
33 | 
34 |   registerNodeType('arc', Arc, false);
35 | 
36 |   return {Arc};
37 | }
38 | 


--------------------------------------------------------------------------------
/src/circle.js:
--------------------------------------------------------------------------------
 1 | import EllipsePlugin from './ellipse';
 2 | 
 3 | export default function install({use, utils, registerNodeType}) {
 4 |   const {attr} = utils;
 5 |   const {Ellipse} = use(EllipsePlugin, null, false);
 6 | 
 7 |   const reflow = true;
 8 | 
 9 |   class CircleAttr extends Ellipse.Attr {
10 |     constructor(subject) {
11 |       super(subject);
12 |       this.setDefault({
13 |         radius: 10
14 |       });
15 |     }
16 | 
17 |     @attr({reflow})
18 |     set radius(val) {
19 |       this.set('radius', val);
20 |     }
21 |   }
22 | 
23 |   class Circle extends Ellipse {
24 |     static Attr = CircleAttr;
25 | 
26 |     get radiuses() {
27 |       const radius = this.attr('radius');
28 |       return [radius, radius];
29 |     }
30 |   }
31 | 
32 |   registerNodeType('circle', Circle, false);
33 | 
34 |   return {Circle};
35 | }
36 | 


--------------------------------------------------------------------------------
/src/ellipse.js:
--------------------------------------------------------------------------------
 1 | import EllipseSectorPlugin from './ellipseSector';
 2 | 
 3 | export default function install({use, utils, registerNodeType}) {
 4 |   const {EllipseSector} = use(EllipseSectorPlugin, null, false);
 5 |   class Ellipse extends EllipseSector {
 6 |     get startAngle() {
 7 |       return 0;
 8 |     }
 9 | 
10 |     get endAngle() {
11 |       return 2 * Math.PI;
12 |     }
13 |   }
14 | 
15 |   registerNodeType('ellipse', Ellipse, false);
16 | 
17 |   return {Ellipse};
18 | }
19 | 


--------------------------------------------------------------------------------
/src/ellipseArc.js:
--------------------------------------------------------------------------------
  1 | import ShapePlugin from './shape';
  2 | import SectorPlugin from './sector';
  3 | import {angleOf} from './util';
  4 | 
  5 | export default function install({use, utils, registerNodeType}) {
  6 |   const {findColor, flow} = utils;
  7 |   const {Shape} = use(ShapePlugin, null, false);
  8 |   const {Sector} = use(SectorPlugin, null, false);
  9 | 
 10 |   class EllipseArcAttr extends Sector.Attr {
 11 |     /* eslint-disable no-useless-constructor */
 12 |     constructor(subject) {
 13 |       super(subject);
 14 |     }
 15 |   }
 16 | 
 17 |   class EllipseArc extends Shape {
 18 |     static Attr = EllipseArcAttr;
 19 | 
 20 |     get isVirtual() {
 21 |       return false;
 22 |     }
 23 | 
 24 |     @flow
 25 |     get lineBoundings() {
 26 |       const [rx, ry] = this.radiuses;
 27 |       return [0, 0, 2 * rx, 2 * ry];
 28 |     }
 29 | 
 30 |     @flow
 31 |     get contentSize() {
 32 |       const bounds = this.lineBoundings;
 33 |       let [width, height] = [...this.attrSize];
 34 |       width = bounds[2] - Math.min(0, bounds[0]);
 35 |       height = bounds[3] - Math.min(0, bounds[1]);
 36 | 
 37 |       return [width, height].map(Math.ceil);
 38 |     }
 39 | 
 40 |     get radiuses() {
 41 |       return [this.attr('radiusX'), this.attr('radiusY')];
 42 |     }
 43 | 
 44 |     get center() {
 45 |       const [rx, ry] = this.radiuses;
 46 |       return [rx, ry];
 47 |     }    
 48 | 
 49 |     pointCollision(evt) {
 50 |       if (super.pointCollision(evt)) {
 51 |         let {offsetX, offsetY} = evt;
 52 |         const [anchorX, anchorY] = this.attr('anchor');
 53 |         const [width, height] = this.contentSize;
 54 | 
 55 |         offsetX += width * anchorX;
 56 |         offsetY += height * anchorY;
 57 | 
 58 |         const lw = this.attr('lineWidth');
 59 |         const rx = this.radiuses[0] - lw / 2;
 60 |         const ry = this.radiuses[1] - lw / 2;
 61 |         const [cx, cy] = this.center;
 62 | 
 63 |         const dx = offsetX - cx;
 64 |         const dy = offsetY - cy;
 65 | 
 66 |         if(Math.abs(dx ** 2 / rx ** 2 + dy ** 2 / ry ** 2 - 1) <= 2 * lw / (rx + ry)) {
 67 |           const PI2 = 2 * Math.PI;
 68 |           let startAngle = this.attr('startAngle') % (2 * PI2);
 69 |           let endAngle = this.attr('endAngle') % (2 * PI2);
 70 |           if(startAngle < 0) startAngle += PI2;
 71 |           if(endAngle < 0) endAngle += PI2;
 72 |           const angle = angleOf([dx, dy]);
 73 |           if(angle >= startAngle && angle <= endAngle) {
 74 |             return true;
 75 |           }
 76 |         }
 77 |       }
 78 |     }
 79 | 
 80 |     render(t, drawingContext) {
 81 |       super.render(t, drawingContext);
 82 | 
 83 |       const [radiusX, radiusY] = this.radiuses;
 84 |       const [cx, cy] = this.center;
 85 |       const startAngle = this.attr('startAngle');
 86 |       const endAngle = this.attr('endAngle');
 87 |       const anticlockwise = this.attr('anticlockwise');
 88 | 
 89 |       const lw = this.attr('lineWidth');
 90 | 
 91 |       drawingContext.lineCap = this.attr('lineCap');
 92 |       drawingContext.lineJoin = this.attr('lineJoin');
 93 |       drawingContext.lineWidth = lw;
 94 |       drawingContext.strokeStyle = findColor(drawingContext, this, 'color');
 95 |       drawingContext.setLineDash(this.attr('lineDash'));
 96 |       drawingContext.lineDashOffset = this.attr('lineDashOffset');
 97 | 
 98 |       drawingContext.strokeStyle = findColor(
 99 |         drawingContext,
100 |         this,
101 |         'strokeColor'
102 |       );
103 |       drawingContext.fillStyle = findColor(drawingContext, this, 'fillColor');
104 | 
105 |       drawingContext.beginPath();
106 |       if (drawingContext.ellipse) {
107 |         drawingContext.ellipse(
108 |           cx,
109 |           cy,
110 |           Math.max(0, radiusX - lw / 2),
111 |           Math.max(0, radiusY - lw / 2),
112 |           0,
113 |           startAngle,
114 |           endAngle,
115 |           anticlockwise
116 |         );
117 |       } else if(radiusX === radiusY) {
118 |         drawingContext.arc(
119 |           cx,
120 |           cy,
121 |           Math.max(0, radiusX - lw / 2),
122 |           startAngle,
123 |           endAngle,
124 |           anticlockwise
125 |         )
126 |       } else {
127 |         throw new Error("Your browser does'n support canvas ellipse");
128 |       }
129 | 
130 |       drawingContext.fill();
131 |       drawingContext.stroke();
132 |       return drawingContext;
133 |     }
134 |   }
135 |   registerNodeType('ellipsearc', EllipseArc, false);
136 |   return {EllipseArc};
137 | }
138 | 


--------------------------------------------------------------------------------
/src/ellipseSector.js:
--------------------------------------------------------------------------------
  1 | import ShapePlugin from './shape';
  2 | import {angleOf} from './util';
  3 | 
  4 | export default function install({use, utils, registerNodeType}) {
  5 |   const {attr, flow, parseColorString, findColor} = utils;
  6 |   const {Shape} = use(ShapePlugin, null, false);
  7 |   const reflow = true;
  8 | 
  9 |   class EllipseSectorAttr extends Shape.Attr {
 10 |     constructor(subject) {
 11 |       super(subject);
 12 |       this.setDefault({
 13 |         radiusX: 10,
 14 |         radiusY: 20,
 15 |         startAngle: 0,
 16 |         endAngle: 0,
 17 |         lineWidth: 1,
 18 |         anticlockwise: false
 19 |       });
 20 |     }
 21 | 
 22 |     // 短轴半径
 23 |     @attr({reflow})
 24 |     set radiusX(val) {
 25 |       this.set('radiusX', val);
 26 |     }
 27 | 
 28 |     // 长轴半径
 29 |     @attr({reflow})
 30 |     set radiusY(val) {
 31 |       this.set('radiusY', val);
 32 |     }
 33 | 
 34 |     @attr({reflow})
 35 |     set startAngle(val) {
 36 |       this.set('startAngle', val);
 37 |     }
 38 | 
 39 |     @attr({reflow})
 40 |     set endAngle(val) {
 41 |       this.set('endAngle', val);
 42 |     }
 43 | 
 44 |     @attr({reflow})
 45 |     set lineWidth(val) {
 46 |       this.set('lineWidth', val);
 47 |     }
 48 | 
 49 |     @attr
 50 |     set fillColor(val) {
 51 |       val = parseColorString(val);
 52 |       this.set('fillColor', val);
 53 |     }
 54 | 
 55 |     @attr
 56 |     set anticlockwise(val) {
 57 |       this.set('anticlockwise', val);
 58 |     }
 59 | 
 60 |     @attr({reflow})
 61 |     set center(val) {
 62 |       this.set('center', val);
 63 |     }
 64 |   }
 65 | 
 66 |   class EllipseSector extends Shape {
 67 |     static Attr = EllipseSectorAttr;
 68 | 
 69 |     get radiuses() {
 70 |       return [this.attr('radiusX'), this.attr('radiusY')];
 71 |     }
 72 | 
 73 |     get startAngle() {
 74 |       return this.attr('startAngle');
 75 |     }
 76 | 
 77 |     get endAngle() {
 78 |       return this.attr('endAngle');
 79 |     }
 80 | 
 81 |     get center() {
 82 |       const lw = this.attr('lineWidth');
 83 |       return this.radiuses.map(v => v);
 84 |     }
 85 | 
 86 |     get lineBoundings() {
 87 |       return [0, 0, 2 * this.radiuses[0], 2 * this.radiuses[1]];
 88 |     }
 89 | 
 90 |     @flow
 91 |     get contentSize() {
 92 |       const bounds = this.lineBoundings;
 93 |       const lw = this.attr('lineWidth');
 94 |       let [width, height] = [...this.attrSize];
 95 |       width = bounds[2] - Math.min(0, bounds[0]);
 96 |       height = bounds[3] - Math.min(0, bounds[1]);
 97 |       return [width, height].map(Math.ceil);
 98 |     }
 99 | 
100 |     // @flow
101 |     // get originalRect() {
102 |     //   const lineBoundings = this.lineBoundings;
103 |     //   const [x, y, w, h] = super.originalRect;
104 |     //   const rect = [x - lineBoundings[0] / 2, y - lineBoundings[1] / 2, w, h];
105 |     //   return rect;
106 |     // }
107 | 
108 |     pointCollision(evt) {
109 |       if (super.pointCollision(evt)) {
110 |         let {offsetX, offsetY} = evt;
111 |         // FIXME: 如果事件是改变半径大小，会导致contentSize变化，如何避免？
112 |         const [anchorX, anchorY] = this.attr('anchor');
113 |         const [width, height] = this.contentSize;
114 |         offsetX += width * anchorX;
115 |         offsetY += height * anchorY;
116 | 
117 |         const [x, y] = this.center;
118 |         let [rx, ry] = this.radiuses;
119 |         const dx = offsetX - x;
120 |         const dy = offsetY - y;
121 | 
122 |         if (dx ** 2 / rx ** 2 + dy ** 2 / ry ** 2 <= 1.0) {
123 |           const PI2 = 2 * Math.PI;
124 |           let startAngle = this.startAngle;
125 |           let endAngle = this.endAngle;
126 | 
127 |           if (endAngle - startAngle >= PI2) {
128 |             startAngle = 0;
129 |             endAngle = PI2;
130 |           } else {
131 |             if (startAngle >= 0 && endAngle >= 0) {
132 |               let offsetAngle = endAngle - startAngle;
133 |               startAngle %= PI2;
134 |               endAngle = startAngle + offsetAngle;
135 |             } else {
136 |               const nTPositive = angle => {
137 |                 // 使其落入 [0, PI2]区间
138 |                 const PI2 = 2 * Math.PI;
139 |                 let isNegative = angle < 0;
140 |                 let T = isNegative
141 |                   ? -Math.floor(angle / PI2)
142 |                   : Math.ceil(angle / PI2);
143 |                 return (angle + T * PI2) % PI2;
144 |               };
145 | 
146 |               endAngle =
147 |                 nTPositive(endAngle) +
148 |                 (startAngle <= 0 && startAngle >= endAngle
149 |                   ? PI2
150 |                   : endAngle > 0
151 |                   ? PI2
152 |                   : 0);
153 |               startAngle = nTPositive(startAngle);
154 |             }
155 |           }
156 | 
157 |           let angle = angleOf([dx, dy]);
158 | 
159 |           if (endAngle > PI2) {
160 |             let m = endAngle - PI2;
161 |             if (0 <= angle && angle <= m) {
162 |               angle += PI2;
163 |             }
164 |           }
165 |           return angle >= startAngle && angle <= endAngle;
166 |         }
167 |         // TODO: 处理 lineCap?
168 |       }
169 |     }
170 | 
171 |     render(t, ctx) {
172 |       super.render(t, ctx);
173 | 
174 |       const [x, y] = this.center;
175 |       const [rx, ry] = this.radiuses;
176 | 
177 |       const startAngle = this.startAngle;
178 |       const endAngle = this.endAngle;
179 |       const lw = this.attr('lineWidth');
180 |       ctx.miterLimit = 3;
181 |       ctx.miterLimit = 3;
182 |       ctx.lineCap = this.attr('lineCap');
183 |       ctx.lineJoin = this.attr('lineJoin');
184 |       ctx.lineWidth = lw;
185 |       ctx.strokeStyle = findColor(ctx, this, 'strokeColor');
186 |       ctx.setLineDash(this.attr('lineDash'));
187 |       ctx.lineDashOffset = this.attr('lineDashOffset');
188 |       ctx.strokeStyle = findColor(ctx, this, 'strokeColor');
189 |       ctx.fillStyle = findColor(ctx, this, 'fillColor');
190 | 
191 |       ctx.beginPath();
192 |       if (this.endAngle - this.startAngle < Math.PI * 2) {
193 |         ctx.moveTo(x, y);
194 |       }
195 | 
196 |       if (ctx.ellipse) {
197 |         ctx.ellipse(
198 |           x,
199 |           y,
200 |           Math.max(0, rx - lw / 2),
201 |           Math.max(0, ry - lw / 2),
202 |           0,
203 |           startAngle,
204 |           endAngle,
205 |           this.attr('anticlockwise')
206 |         );
207 |         ctx.closePath();
208 |       } else if (rx === ry) {
209 |         ctx.arc(
210 |           x,
211 |           y,
212 |           Math.max(0, rx - lw / 2),
213 |           startAngle,
214 |           endAngle,
215 |           this.attr('anticlockwise')
216 |         );
217 |         ctx.closePath();
218 |       } else {
219 |         throw new Error("Your browser does'n support canvas ellipse");
220 |       }
221 | 
222 |       ctx.fill();
223 |       ctx.stroke();
224 | 
225 |       return ctx;
226 |     }
227 |   }
228 | 
229 |   registerNodeType('ellipsesector', EllipseSector, false);
230 |   return {EllipseSector};
231 | }
232 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import Shape from './shape';
 2 | 
 3 | import Arc from './arc';
 4 | import Polyline from './polyline';
 5 | import Polycurve from './polycurve';
 6 | import Wave from './wave';
 7 | import Ring from './ring';
 8 | 
 9 | import Polygon from './polygon';
10 | import Triangle from './triangle';
11 | import Rect from './rect';
12 | import Star from './star';
13 | 
14 | import EllipseSector from './ellipseSector';
15 | import EllipseArc from './ellipseArc';
16 | import Sector from './sector';
17 | import Ellipse from './ellipse';
18 | import Circle from './circle';
19 | 
20 | const version = require('../package.json').version;
21 | 
22 | export const Shapes = {
23 |   version,
24 |   install,
25 |   Shape,
26 |   Polyline,
27 |   Polycurve,
28 |   Wave,
29 |   Polygon,
30 |   Triangle,
31 |   Rect,
32 |   Star,
33 |   Arc,
34 |   Sector,
35 |   Ellipse,
36 |   EllipseSector,
37 |   EllipseArc,
38 |   Circle,
39 |   Ring
40 | };
41 | 
42 | function install(spritejs) {
43 |   return Object.keys(Shapes).reduce((pkg, key) => {
44 |     if (key === 'version' || key === 'install') {
45 |       return pkg;
46 |     }
47 | 
48 |     return Object.assign(pkg, spritejs.use(Shapes[key], null, false));
49 |   }, {});
50 | }
51 | 
52 | // auto use
53 | // if (typeof window !== 'undefined' && window.spritejs) {
54 | //   window.spritejs.use(Shapes);
55 | // }
56 | 
57 | export {
58 |   version,
59 |   install,
60 |   Shape,
61 |   Polyline,
62 |   Polycurve,
63 |   Wave,
64 |   Polygon,
65 |   Triangle,
66 |   Rect,
67 |   Star,
68 |   Arc,
69 |   Sector,
70 |   Ellipse,
71 |   EllipseSector,
72 |   EllipseArc,
73 |   Circle,
74 |   Ring
75 | };
76 | 
77 | export default Shapes;
78 | 


--------------------------------------------------------------------------------
/src/polycurve.js:
--------------------------------------------------------------------------------
  1 | import ShapePlugin from './shape';
  2 | import SvgPath from 'svg-path-to-canvas';
  3 | import {pointsEqual} from './util';
  4 | 
  5 | export default function install({use, utils, registerNodeType}) {
  6 |   const {attr, findColor, flow} = utils;
  7 |   const {Shape} = use(ShapePlugin, null, false);
  8 |   const reflow = true;
  9 | 
 10 |   class PolycurveAttr extends Shape.Attr {
 11 |     constructor(subject) {
 12 |       super(subject);
 13 |       this.setDefault({
 14 |         points: [],
 15 |         startPoint: null
 16 |       });
 17 |     }
 18 | 
 19 |     @attr({reflow})
 20 |     set points(val) {
 21 |       this.set('points', val);
 22 |       this.subject.path = null;
 23 |     }
 24 | 
 25 |     @attr({reflow})
 26 |     set startPoint(val) {
 27 |       this.set('startPoint', val);
 28 |       this.subject.path = null;
 29 |     }
 30 |   }
 31 | 
 32 |   class Polycurve extends Shape {
 33 |     static Attr = PolycurveAttr;
 34 | 
 35 |     get points() {
 36 |       return this.attr('points');
 37 |     }
 38 | 
 39 |     get lineBoundings() {
 40 |       const startPoint = this.attr('startPoint');
 41 | 
 42 |       let points = startPoint && startPoint.length === 2 ? [...startPoint] : [];
 43 |       const ps = this.points;
 44 |       ps.forEach(p => points.push.apply(points, p));
 45 | 
 46 |       let minX = 0;
 47 |       let maxX = 0;
 48 |       let minY = 0;
 49 |       let maxY = 0;
 50 | 
 51 |       points.forEach((point, i) => {
 52 |         if (i % 2 === 0) {
 53 |           if (point < minX) {
 54 |             minX = point;
 55 |           } else if (point > maxX) {
 56 |             maxX = point;
 57 |           }
 58 |         } else {
 59 |           if (point < minY) {
 60 |             minY = point;
 61 |           } else if (point > maxY) {
 62 |             maxY = point;
 63 |           }
 64 |         }
 65 |       });
 66 | 
 67 |       return [minX, minY, maxX, maxY];
 68 |     }
 69 | 
 70 |     @flow
 71 |     get contentSize() {
 72 |       const bounds = this.lineBoundings;
 73 |       const lw = this.attr('lineWidth');
 74 |       let [width, height] = this.attrSize;
 75 | 
 76 |       if (width === '') {
 77 |         width = bounds[2] - Math.min(0, bounds[0]) + lw * 2;
 78 |       }
 79 |       if (height === '') {
 80 |         height = bounds[3] - Math.min(0, bounds[1]) + lw * 2;
 81 |       }
 82 | 
 83 |       return [width, height].map(Math.ceil);
 84 |     }
 85 | 
 86 |     @flow
 87 |     get originalRect() {
 88 |       const lineBoundings = this.lineBoundings;
 89 | 
 90 |       const [x, y, w, h] = super.originalRect;
 91 |       const rect = [x - lineBoundings[0], y - lineBoundings[1], w, h];
 92 | 
 93 |       return rect;
 94 |     }
 95 | 
 96 |     get isVirtual() {
 97 |       return false;
 98 |     }
 99 | 
100 |     updatePath() {
101 |       const startPoint = this.attr('startPoint');
102 |       const points = this.points;
103 |       let d = '';
104 | 
105 |       if (startPoint && startPoint.length === 2) {
106 |         d += `M${startPoint.join(' ')}`;
107 |       }
108 |       points.forEach(point => {
109 |         const [cp1x, cp1y, cp2x, cp2y, x, y] = point;
110 |         d += `C${[cp1x, cp1y, cp2x, cp2y, x, y].join(' ')}`;
111 |       });
112 |       const svgpath = new SvgPath(d);
113 |       this.path = svgpath;
114 |       this.path.points = [...points];
115 |     }
116 | 
117 |     pointCollision(evt) {
118 |       if (super.pointCollision(evt)) {
119 |         let {offsetX, offsetY} = evt;
120 | 
121 |         const [anchorX, anchorY] = this.attr('anchor');
122 |         const [width, height] = this.contentSize;
123 | 
124 |         offsetX += width * anchorX;
125 |         offsetY += height * anchorY;
126 |         
127 |         const path = this.path;
128 |         if(path) {
129 |           const lineWidth = this.attr('lineWidth'),
130 |             lineCap = this.attr('lineCap'),
131 |             lineJoin = this.attr('lineJoin');
132 |           return path.isPointInPath(offsetX, offsetY) ||
133 |             path.isPointInStroke(offsetX, offsetY, {lineWidth, lineCap, lineJoin});
134 |         }
135 |         return false;
136 |       }
137 |     }
138 | 
139 |     render(t, ctx) {
140 |       super.render(t, ctx);
141 |       const points = this.points;
142 |       const startPoint = this.attr('startPoint');
143 |       const lw = this.attr('lineWidth');
144 | 
145 |       ctx.lineCap = this.attr('lineCap');
146 |       ctx.lineJoin = this.attr('lineJoin');
147 |       ctx.lineWidth = lw;
148 |       ctx.setLineDash(this.attr('lineDash'));
149 |       ctx.lineDashOffset = this.attr('lineDashOffset');
150 |       ctx.fillStyle = this.attr('fillColor');
151 |       ctx.strokeStyle = findColor(ctx, this, 'strokeColor');
152 | 
153 |       if(!this.path || !pointsEqual(this.path.points, points)) this.updatePath();
154 |       if(this.path) {
155 |         this.path.beginPath().to(ctx);
156 |         ctx.fill();
157 |         ctx.stroke();
158 |       }
159 | 
160 |       return ctx;
161 |     }
162 |   }
163 |   registerNodeType('polycurve', Polycurve, false);
164 |   return {Polycurve};
165 | }
166 | 


--------------------------------------------------------------------------------
/src/polygon.js:
--------------------------------------------------------------------------------
  1 | import ShapePlugin from './shape';
  2 | import SvgPath from 'svg-path-to-canvas';
  3 | import {makeSmoothCurveLine, pointsEqual} from './util';
  4 | 
  5 | export default function install({use, utils, registerNodeType}) {
  6 |   const {attr, flow, parseColorString, findColor} = utils;
  7 |   const {Shape} = use(ShapePlugin, null, false);
  8 |   const reflow = true;
  9 | 
 10 |   class PolygonAttr extends Shape.Attr {
 11 |     constructor(subject) {
 12 |       super(subject);
 13 |       this.setDefault({
 14 |         points: [],
 15 |         smooth: null
 16 |       });
 17 |     }
 18 | 
 19 |     @attr({reflow})
 20 |     set smooth(val) {
 21 |       this.set('smooth', val);
 22 |       this.subject.path = null;
 23 |     }
 24 | 
 25 |     @attr({reflow})
 26 |     set points(val) {
 27 |       this.set('points', val);
 28 |       this.subject.path = null;
 29 |     }
 30 | 
 31 |     @attr({reflow})
 32 |     set lineWidth(val) {
 33 |       this.set('lineWidth', val);
 34 |       this.subject.path = null;
 35 |     }
 36 | 
 37 |     @attr
 38 |     set fillColor(val) {
 39 |       val = parseColorString(val);
 40 |       this.set('fillColor', val);
 41 |     }
 42 |   }
 43 | 
 44 |   class Polygon extends Shape {
 45 |     static Attr = PolygonAttr;
 46 | 
 47 |     get lineBoundings() {
 48 |       const bounds = [0, 0, 0, 0];
 49 |       const points = this.attr('points');
 50 | 
 51 |       points.forEach(([x, y]) => {
 52 |         bounds[0] = Math.min(x, bounds[0]);
 53 |         bounds[1] = Math.min(y, bounds[1]);
 54 |         bounds[2] = Math.max(x, bounds[2]);
 55 |         bounds[3] = Math.max(y, bounds[3]);
 56 |       });
 57 |       return bounds;
 58 |     }
 59 | 
 60 |     @flow
 61 |     get contentSize() {
 62 |       const lw = this.attr('lineWidth');
 63 |       const bounds = this.lineBoundings;
 64 |       let [width, height] = this.attrSize;
 65 |       width = bounds[2] - bounds[0] + lw;
 66 |       height = bounds[3] - bounds[1] + lw;
 67 |       return [width, height].map(Math.ceil);
 68 |     }
 69 | 
 70 |     get translate() {
 71 |       const lw = this.attr('lineWidth');
 72 |       return [lw / 2, lw / 2];
 73 |     }
 74 | 
 75 |     get points() {
 76 |       return this.attr('points');
 77 |     }
 78 | 
 79 |     pointCollision(evt) {
 80 |       if (super.pointCollision(evt)) {
 81 |         let {offsetX = 0, offsetY = 0} = evt;
 82 |         const [anchorX, anchorY] = this.attr('anchor');
 83 |         const [width, height] = this.contentSize;
 84 | 
 85 |         offsetX += width * anchorX;
 86 |         offsetY += height * anchorY;
 87 | 
 88 |         const path = this.path;
 89 |         if(path) {
 90 |           const lineWidth = this.attr('lineWidth'),
 91 |             lineCap = this.attr('lineCap'),
 92 |             lineJoin = this.attr('lineJoin');
 93 |           return path.isPointInPath(offsetX, offsetY) ||
 94 |             path.isPointInStroke(offsetX, offsetY, {lineWidth, lineCap, lineJoin});
 95 |         }
 96 |       }
 97 |     }
 98 | 
 99 |     render(t, drawingContext) {
100 |       super.render(t, drawingContext);
101 |       if (this.points.length) {
102 |         const translate = this.translate;
103 |         drawingContext.translate(translate[0], translate[1]);
104 | 
105 |         drawingContext.strokeStyle = findColor(
106 |           drawingContext,
107 |           this,
108 |           'strokeColor'
109 |         );
110 |         drawingContext.fillStyle = findColor(drawingContext, this, 'fillColor');
111 |         drawingContext.miterLimit = 3;
112 |         drawingContext.lineCap = this.attr('lineCap');
113 |         drawingContext.lineJoin = this.attr('lineJoin');
114 |         drawingContext.lineWidth = this.attr('lineWidth');
115 |         drawingContext.setLineDash(this.attr('lineDash'));
116 |         drawingContext.lineDashOffset = this.attr('lineDashOffset');
117 | 
118 |         if(!this.path || !pointsEqual(this.path.points, this.points)) {
119 |           let smooth = this.attr('smooth');
120 |           const points = this.points.slice(0, this.points.length);
121 | 
122 |           if (smooth && !smooth.length) {
123 |             smooth = [0, points.length - 1];
124 |           }
125 |           let d = '';
126 |           // 绘制光滑曲线（直线）
127 |           if (!smooth) {
128 |             points.forEach((point, i) => {
129 |               if (i === 0) {
130 |                 d += `M${point.join(' ')}`;
131 |               } else {
132 |                 d += `L${point.join(' ')}`;
133 |               }
134 |             });
135 |           } else {
136 |             if (Object.prototype.toString.call(smooth[0]) !== '[object Array]') {
137 |               // 如果不是多维数组，转成多维
138 |               smooth = [smooth];
139 |             }
140 |             const startPos = points[0];
141 |             const endPos = points[points.length - 1];
142 |             if (startPos[0] !== endPos[0] || startPos[1] !== endPos[1]) {
143 |               points.push(points[0]);
144 |             }
145 |             let subIndex = 0;
146 |             smooth.forEach((arr, iind) => {
147 |               const smoothStart = arr[0];
148 |               const smoothEnd = arr[1];
149 |               for (let i = subIndex; i < smoothStart; i++) {
150 |                 if (i === 0) {
151 |                   // 如果是所有线条的起始点
152 |                   d += `M${points[0].join(' ')}`;
153 |                 } else {
154 |                   // 如果是转换点
155 |                   d += `L${points[i].join(' ')}`;
156 |                 }
157 |               }
158 |               const smoothPoints = points.slice(smoothStart, smoothEnd + 1);
159 |               d += makeSmoothCurveLine(smoothPoints, smoothStart);
160 |               subIndex = smoothEnd;
161 |             });
162 |             for (let i = subIndex; i < points.length - 1; i++) {
163 |               // 如果绘图未绘制到最后一个点
164 |               d += `L${points[i].join(' ')}`;
165 |             }
166 |           }
167 |           d += 'Z';
168 |           this.path = new SvgPath(d);
169 |           this.path.points = [...this.points];
170 |         }
171 |         if(this.path) {
172 |           this.path.beginPath().to(drawingContext);
173 |           drawingContext.fill();
174 |           drawingContext.stroke();
175 |         }
176 |       }
177 |       return drawingContext;
178 |     }
179 |   }
180 |   registerNodeType('polygon', Polygon, false);
181 |   return {Polygon};
182 | }
183 | 


--------------------------------------------------------------------------------
/src/polyline.js:
--------------------------------------------------------------------------------
  1 | import ShapePlugin from './shape';
  2 | import SvgPath from 'svg-path-to-canvas';
  3 | import {makeSmoothCurveLine, pointsEqual} from './util';
  4 | 
  5 | export default function install({use, utils, registerNodeType}) {
  6 |   const {attr, findColor} = utils;
  7 |   const {Shape} = use(ShapePlugin, null, false);
  8 |   const reflow = true;
  9 | 
 10 |   class PolylineAttr extends Shape.Attr {
 11 |     constructor(subject) {
 12 |       super(subject);
 13 |       this.setDefault({
 14 |         points: null,
 15 |         close: false,
 16 |         smooth: false,
 17 |         tolerance: 6
 18 |       });
 19 |     }
 20 | 
 21 |     @attr
 22 |     set tolerance(val) {
 23 |       this.set('tolerance', val);
 24 |     }
 25 | 
 26 |     @attr({reflow})
 27 |     set points(val) {
 28 |       this.set('points', val);
 29 |       this.subject.path = null;
 30 |     }
 31 | 
 32 |     @attr({reflow})
 33 |     set smooth(val) {
 34 |       this.set('smooth', val);
 35 |       this.subject.path = null;
 36 |     }
 37 | 
 38 |     @attr
 39 |     set close(val) {
 40 |       this.set('close', val);
 41 |       this.subject.path = null;
 42 |     }
 43 |   }
 44 | 
 45 |   class Polyline extends Shape {
 46 |     static Attr = PolylineAttr;
 47 | 
 48 |     get points() {
 49 |       return this.attr('points');
 50 |     }
 51 | 
 52 |     get isVirtual() {
 53 |       return true;
 54 |     }
 55 | 
 56 |     pointCollision(evt) {
 57 |       super.pointCollision(evt);
 58 |       const {offsetX, offsetY} = evt;
 59 |       const cacheLineWidth = this.context.lineWidth; // 获取当前画布的lineWidth宽度
 60 |       const tolerance = this.attr('tolerance'); // 线条点击的容差像素值，默认6px
 61 |       let res = false;
 62 |       const path = this.path;
 63 |       if (path) {
 64 |         const lineWidth = this.attr('lineWidth') + tolerance,
 65 |           lineCap = this.attr('lineCap'),
 66 |           lineJoin = this.attr('lineJoin');
 67 | 
 68 |         if (this.attr('close')) {
 69 |           res = path.isPointInPath(offsetX, offsetY);
 70 |         }
 71 | 
 72 |         res |= path.isPointInStroke(offsetX, offsetY, {
 73 |           lineWidth,
 74 |           lineCap,
 75 |           lineJoin
 76 |         });
 77 |       }
 78 |       return res;
 79 |     }
 80 | 
 81 |     render(t, drawingContext) {
 82 |       super.render(t, drawingContext);
 83 | 
 84 |       if (this.points) {
 85 |         const lw = this.attr('lineWidth');
 86 |         drawingContext.fillStyle = this.attr('fillColor');
 87 |         drawingContext.strokeStyle = findColor(
 88 |           drawingContext,
 89 |           this,
 90 |           'strokeColor'
 91 |         );
 92 |         drawingContext.lineJoin = this.attr('lineJoin');
 93 |         drawingContext.lineCap = this.attr('lineCap');
 94 |         drawingContext.lineWidth = lw;
 95 |         drawingContext.setLineDash(this.attr('lineDash'));
 96 |         drawingContext.lineDashOffset = this.attr('lineDashOffset');
 97 | 
 98 |         // drawingContext.translate(lw / 2, lw / 2);
 99 | 
100 |         if (!this.path || !pointsEqual(this.path.points, this.points)) {
101 |           const smooth = this.attr('smooth');
102 | 
103 |           let d = '';
104 |           if (smooth) {
105 |             d += makeSmoothCurveLine(this.points, 0);
106 |           } else {
107 |             this.points.forEach((point, i) => {
108 |               if (i === 0) {
109 |                 d += `M${point.join(' ')}`;
110 |               } else {
111 |                 d += `L${point.join(' ')}`;
112 |               }
113 |             });
114 |           }
115 | 
116 |           if (this.attr('close')) {
117 |             d += 'Z';
118 |           }
119 | 
120 |           this.path = new SvgPath(d);
121 |           this.path.points = [...this.points];
122 |         }
123 | 
124 |         if (this.path) {
125 |           this.path.beginPath().to(drawingContext);
126 |           drawingContext.fill();
127 |           drawingContext.stroke();
128 |         }
129 |       }
130 |       return drawingContext;
131 |     }
132 |   }
133 |   registerNodeType('polyline', Polyline, false);
134 |   return {Polyline};
135 | }
136 | 


--------------------------------------------------------------------------------
/src/rect.js:
--------------------------------------------------------------------------------
 1 | import PolygonPlugin from './polygon';
 2 | 
 3 | export default function install({use, utils, registerNodeType}) {
 4 |   const {attr, flow} = utils;
 5 |   const {Polygon} = use(PolygonPlugin, null, false);
 6 |   const reflow = true;
 7 | 
 8 |   class rectAttr extends Polygon.Attr {
 9 |     constructor(subject) {
10 |       super(subject);
11 |       this.setDefault({
12 |         angle: 90,
13 |         sides: null,
14 |         size: null
15 |       });
16 |     }
17 | 
18 |     @attr({reflow})
19 |     set angle(val) {
20 |       this.set('angle', val);
21 |     }
22 | 
23 |     @attr({reflow})
24 |     set sides(val) {
25 |       this.set('sides', val);
26 |     }
27 |   }
28 | 
29 |   class Rect extends Polygon {
30 |     static Attr = rectAttr;
31 | 
32 |     get lineBoundings() {
33 |       const lw = this.attr('lineWidth');
34 |       const bounds = [0, 0, 0, 0];
35 |       const points = this.points;
36 | 
37 |       points.forEach(([x, y]) => {
38 |         x += lw;
39 |         y += lw;
40 |         bounds[0] = Math.min(x, bounds[0]);
41 |         bounds[1] = Math.min(y, bounds[1]);
42 |         bounds[2] = Math.max(x, bounds[2]);
43 |         bounds[3] = Math.max(y, bounds[3]);
44 |       });
45 |       return bounds;
46 |     }
47 | 
48 |     @flow
49 |     get contentSize() {
50 |       const lw = this.attr('lineWidth');
51 |       const bounds = this.lineBoundings;
52 |       let [width, height] = this.attrSize;
53 |       width = bounds[2] - bounds[0];
54 |       height = bounds[3] - bounds[1];
55 | 
56 |       return [width, height].map(Math.ceil);
57 |     }
58 | 
59 |     get points() {
60 |       const lw = this.attr('lineWidth');
61 |       let [s1, s2] = this.attr('sides') || this.attr('size');
62 |       s1 -= lw * 1;
63 |       s2 -= lw * 1;
64 |       const oAngle = this.attr('angle');
65 |       let cosAngle = 0;
66 |       let sinAngle = 1;
67 |       if (oAngle === 90) {
68 |         // 90默认不处理
69 |       } else {
70 |         const angle = (Math.PI * this.attr('angle')) / 180;
71 |         cosAngle = Math.cos(angle);
72 |         sinAngle = Math.sin(angle);
73 |       }
74 |       const p0 = [0, 0];
75 |       const p1 = [s1, 0];
76 |       const p2 = [s1 + s2 * cosAngle, s2 * sinAngle];
77 |       const p3 = [s2 * cosAngle, s2 * sinAngle];
78 |       return [p0, p1, p2, p3];
79 |     }
80 |   }
81 | 
82 |   registerNodeType('rect', Rect, false);
83 |   return {Rect};
84 | }
85 | 


--------------------------------------------------------------------------------
/src/ring.js:
--------------------------------------------------------------------------------
  1 | import ShapePlugin from './shape';
  2 | 
  3 | export default function install({use, utils, registerNodeType}) {
  4 |   const {attr, flow, findColor} = utils;
  5 |   const {Shape} = use(ShapePlugin, null, false);
  6 |   const reflow = true;
  7 | 
  8 |   class RingAttr extends Shape.Attr {
  9 |     constructor(subject) {
 10 |       super(subject);
 11 |       this.setDefault({
 12 |         innerRaius: 10,
 13 |         outerRadius: 20,
 14 |         startAngle: 0,
 15 |         endAngle: Math.PI * 2,
 16 |         lineWidth: 1,
 17 |         maxRadius: 0 // 当需要绘制多个环且环的半径不一致,为了统一圆心,所设属性
 18 |       });
 19 |     }
 20 | 
 21 |     // 内圆半径
 22 |     @attr({reflow})
 23 |     set innerRadius(val) {
 24 |       this.set('innerRadius', val);
 25 |     }
 26 | 
 27 |     // 外圆半径
 28 |     @attr({reflow})
 29 |     set outerRadius(val) {
 30 |       this.set('outerRadius', val);
 31 |     }
 32 | 
 33 |     @attr({reflow})
 34 |     set maxRadius(val) {
 35 |       this.set('maxRadius', val);
 36 |     }
 37 | 
 38 |     @attr({reflow})
 39 |     set startAngle(val) {
 40 |       this.set('startAngle', val);
 41 |     }
 42 | 
 43 |     @attr({reflow})
 44 |     set endAngle(val) {
 45 |       this.set('endAngle', val);
 46 |     }
 47 | 
 48 |     @attr({reflow})
 49 |     set center(val) {
 50 |       this.set('center', val);
 51 |     }
 52 |   }
 53 | 
 54 |   class Ring extends Shape {
 55 |     static Attr = RingAttr;
 56 | 
 57 |     // 边界依赖于最大圆
 58 |     get lineBoundings() {
 59 |       let maxRadius = this.attr('maxRadius');
 60 | 
 61 |       if (maxRadius <= 0) {
 62 |         const radius = Math.max(
 63 |           this.attr('innerRadius'),
 64 |           this.attr('outerRadius')
 65 |         );
 66 |         maxRadius = radius;
 67 |       }
 68 | 
 69 |       return [0, 0, 2 * maxRadius, 2 * maxRadius];
 70 |     }
 71 | 
 72 |     get startAngle() {
 73 |       return this.attr('startAngle');
 74 |     }
 75 | 
 76 |     get endAngle() {
 77 |       return this.attr('endAngle');
 78 |     }
 79 | 
 80 |     @flow
 81 |     get contentSize() {
 82 |       const bounds = this.lineBoundings;
 83 |       const lw = this.attr('lineWidth');
 84 |       let [width, height] = this.attrSize;
 85 | 
 86 |       width = bounds[2] - Math.min(0, bounds[0]);
 87 | 
 88 |       height = bounds[3] - Math.min(0, bounds[1]);
 89 | 
 90 |       return [width, height].map(Math.ceil);
 91 |     }
 92 | 
 93 |     @flow
 94 |     get originalRect() {
 95 |       const lineBoundings = this.lineBoundings;
 96 |       const lw = this.attr('lineWidth');
 97 | 
 98 |       const [x, y, w, h] = super.originalRect;
 99 |       const rect = [x - lineBoundings[0] / 2, y - lineBoundings[1] / 2, w, h];
100 | 
101 |       return rect;
102 |     }
103 | 
104 |     pointCollision(evt) {
105 |       if (super.pointCollision(evt)) {
106 |         let {offsetX, offsetY} = evt;
107 |         const [anchorX, anchorY] = this.attr('anchor');
108 |         const [width, height] = this.contentSize;
109 | 
110 |         offsetX += width * anchorX;
111 |         offsetY += height * anchorY;
112 | 
113 |         let r = this.attr('maxRadius');
114 |         let offset = this.attr('outerRadius'); // 偏移量
115 | 
116 |         if (r <= 0) {
117 |           r = offset;
118 |         }
119 | 
120 |         offset = r - offset; // 如果未设置maxRadius，偏移量应当０
121 |         const r0 = this.attr('innerRadius');
122 | 
123 |         const TAU = Math.PI * 2;
124 |         let startAngle = this.attr('startAngle');
125 |         if (startAngle > TAU) {
126 |           startAngle %= TAU;
127 |         } else {
128 |           startAngle =
129 |             (startAngle + Math.ceil(Math.abs(startAngle) / TAU) * TAU) % TAU;
130 |         }
131 |         let endAngle =
132 |           this.attr('endAngle') - this.attr('startAngle') + startAngle;
133 | 
134 |         const d = Math.sqrt((offsetX - r) ** 2 + (offsetY - r) ** 2);
135 |         let angle = Math.atan2(offsetY - r, offsetX - r);
136 | 
137 |         if (angle < 0 || endAngle > TAU) {
138 |           angle += TAU;
139 |         }
140 | 
141 |         return (
142 |           d >= r0 && d <= r - offset && angle >= startAngle && angle <= endAngle
143 |         );
144 |       }
145 |     }
146 | 
147 |     render(t, ctx) {
148 |       super.render(t, ctx);
149 |       const innerRadius = Math.min(
150 |         this.attr('innerRadius'),
151 |         this.attr('outerRadius')
152 |       );
153 |       const outerRadius = Math.max(
154 |         this.attr('innerRadius'),
155 |         this.attr('outerRadius')
156 |       );
157 | 
158 |       const lw = this.attr('lineWidth');
159 |       const startAngle = this.startAngle;
160 |       const endAngle = this.endAngle;
161 | 
162 |       ctx.miterLimit = 0;
163 |       ctx.lineWidth = lw;
164 |       ctx.lineCap = this.attr('lineCap');
165 |       ctx.lineJoin = this.attr('lineJoin');
166 |       ctx.setLineDash(this.attr('lineDash'));
167 |       ctx.lineDashOffset = this.attr('lineDashOffset');
168 |       ctx.strokeStyle = findColor(ctx, this, 'strokeColor');
169 |       ctx.fillStyle = findColor(ctx, this, 'fillColor');
170 | 
171 |       const [x, y] = [0, 0];
172 |       let maxRadius = this.attr('maxRadius');
173 | 
174 |       if (maxRadius <= 0) {
175 |         maxRadius = outerRadius;
176 |       }
177 | 
178 |       const lineBoundings = this.lineBoundings;
179 |       ctx.translate(lineBoundings[2] / 2 - x, lineBoundings[3] / 2 - y);
180 | 
181 |       ctx.beginPath();
182 |       ctx.arc(x, y, Math.max(0, outerRadius - lw / 2), startAngle, endAngle, false);
183 |       if (endAngle - startAngle === Math.PI * 2) {
184 |         ctx.moveTo(outerRadius + innerRadius, outerRadius);
185 |       }
186 |       ctx.arc(x, y, Math.max(0, innerRadius - lw / 2), endAngle, startAngle, true);
187 |       ctx.closePath();
188 | 
189 |       ctx.fill();
190 | 
191 |       if (lw > 0) {
192 |         ctx.stroke();
193 |       }
194 | 
195 |       return ctx;
196 |     }
197 |   }
198 | 
199 |   registerNodeType('ring', Ring);
200 |   return {Ring};
201 | }
202 | 


--------------------------------------------------------------------------------
/src/sector.js:
--------------------------------------------------------------------------------
 1 | import EllipseSectorPlugin from './ellipseSector';
 2 | 
 3 | export default function install({use, utils, registerNodeType}) {
 4 |   const {EllipseSector} = use(EllipseSectorPlugin, null, false);
 5 | 
 6 |   class Sector extends EllipseSector {
 7 |     get radiuses() {
 8 |       return [this.attr('radius'), this.attr('radius')];
 9 |     }
10 |   }
11 | 
12 |   Sector.defineAttributes({
13 |     radius(attr, val) {
14 |       attr.clearFlow();
15 |       attr.set('radius', val);
16 |     }
17 |   });
18 | 
19 |   registerNodeType('sector', Sector, false);
20 |   return {Sector};
21 | }
22 | 


--------------------------------------------------------------------------------
/src/shape.js:
--------------------------------------------------------------------------------
 1 | // import { draggable, droppable } from 'sprite-draggable';
 2 | export default function install({BaseSprite, utils}) {
 3 |   const {attr, parseColorString} = utils;
 4 | 
 5 |   class ShapeAttr extends BaseSprite.Attr {
 6 |     constructor(subject) {
 7 |       super(subject);
 8 |       this.setDefault({
 9 |         color: 'transparent',
10 |         fillColor: 'transparent',
11 |         lineWidth: 0,
12 |         lineCap: 'butt',
13 |         lineJoin: 'miter',
14 |         lineDash: [0, 0],
15 |         lineDashOffset: 0,
16 |         enableCache: false
17 |       });
18 |     }
19 | 
20 |     @attr
21 |     set lineWidth(val) {
22 |       this.set('lineWidth', val);
23 |     }
24 | 
25 |     @attr
26 |     set lineCap(val) {
27 |       this.set('lineCap', val);
28 |     }
29 | 
30 |     @attr
31 |     set lineJoin(val) {
32 |       this.set('lineJoin', val);
33 |     }
34 | 
35 |     @attr
36 |     set lineDash(val) {
37 |       this.set('lineDash', val);
38 |     }
39 | 
40 |     @attr
41 |     set lineDashOffset(val) {
42 |       this.set('lineDashOffset', val);
43 |     }
44 | 
45 |     @attr
46 |     set fillColor(val) {
47 |       val = parseColorString(val);
48 |       this.set('fillColor', val);
49 |     }
50 | 
51 |     @attr
52 |     set strokeColor(val) {
53 |       val = parseColorString(val);
54 |       this.set('strokeColor', val);
55 |     }
56 | 
57 |     // @attr
58 |     // set draggable(val) {
59 |     //   this.set('draggable', val);
60 |     //   draggable(this.subject, val);
61 |     // }
62 | 
63 |     // @attr
64 |     // set droppable(val) {
65 |     //   this.set('droppable', val);
66 |     //   droppable(this.subject, val);
67 |     // }
68 |   }
69 | 
70 |   class Shape extends BaseSprite {
71 |     static Attr = ShapeAttr;
72 |   }
73 | 
74 |   return {Shape};
75 | }
76 | 


--------------------------------------------------------------------------------
/src/star.js:
--------------------------------------------------------------------------------
 1 | import PolygonPlugin from './polygon';
 2 | 
 3 | function polygonPoints(outerRadius, innerRadius, number, lw) {
 4 |   let center = outerRadius;
 5 |   const radAngle = Math.PI / 2;
 6 |   const radAlpha = Math.PI / number;
 7 |   let points = [];
 8 | 
 9 |   for (let i = 1; i <= number * 2; i++) {
10 |     let r = i % 2 ? outerRadius - lw : innerRadius;
11 |     let alpha = radAlpha * i + radAngle;
12 |     let x = center + r * Math.cos(alpha);
13 |     let y = center + r * Math.sin(alpha);
14 |     points.push([x, y]);
15 |   }
16 | 
17 |   return points;
18 | }
19 | 
20 | export default function install({use, utils, registerNodeType}) {
21 |   const {attr, flow} = utils;
22 |   const {Polygon} = use(PolygonPlugin, null, false);
23 |   const reflow = true;
24 | 
25 |   class PolygonAttr extends Polygon.Attr {
26 |     constructor(subject) {
27 |       super(subject);
28 |       this.setDefault({
29 |         angles: 5
30 |       });
31 |     }
32 | 
33 |     @attr({reflow})
34 |     set angles(num) {
35 |       this.set('angles', num);
36 |     }
37 | 
38 |     @attr({reflow})
39 |     set radius(val) {
40 |       // 圆半径
41 |       this.set('radius', val);
42 |     }
43 | 
44 |     @attr({reflow})
45 |     set innerRadius(val) {
46 |       this.set('innerRadius', val);
47 |     }
48 |   }
49 | 
50 |   class Star extends Polygon {
51 |     static Attr = PolygonAttr;
52 | 
53 |     get lineBoundings() {
54 |       const radius = this.attr('radius');
55 |       return [0, 0, radius * 2, radius * 2];
56 |     }
57 | 
58 |     @flow
59 |     get contentSize() {
60 |       const lw = this.attr('lineWidth');
61 |       const bounds = this.lineBoundings;
62 |       let [width, height] = this.attrSize;
63 |       width = bounds[2] - bounds[0];
64 |       height = bounds[3] - bounds[1];
65 |       return [width, height].map(Math.ceil);
66 |     }
67 | 
68 |     get translate() {
69 |       return [0, 0];
70 |     }
71 | 
72 |     get points() {
73 |       const radius = this.attr('radius');
74 |       const lw = this.attr('lineWidth');
75 |       const innerRadius = this.attr('innerRadius') || 0.5 * radius;
76 |       return polygonPoints(radius, innerRadius, this.attr('angles'), lw);
77 |     }
78 |   }
79 | 
80 |   registerNodeType('star', Star, false);
81 |   return {Star};
82 | }
83 | 


--------------------------------------------------------------------------------
/src/triangle.js:
--------------------------------------------------------------------------------
 1 | import PolygonPlugin from './polygon';
 2 | 
 3 | export default function install({use, utils, registerNodeType}) {
 4 |   const {Polygon} = use(PolygonPlugin, null, false);
 5 | 
 6 |   class Triangle extends Polygon {
 7 |     get contentSize() {
 8 |       let [s1, s2] = this.attr('sides');
 9 |       return [s1, s2];
10 |     }
11 | 
12 |     get points() {
13 |       let [s1, s2] = this.attr('sides');
14 |       const lw = this.attr('lineWidth');
15 | 
16 |       s1 -= lw * 2;
17 |       s2 -= lw * 2;
18 |       const angle = (Math.PI / 180) * this.attr('angle');
19 |       const p0 = [0, 0];
20 |       const p1 = [s1, 0];
21 |       const p2 = [s2 * Math.cos(angle), s2 * Math.sin(angle)];
22 |       return [p0, p1, p2];
23 |     }
24 |   }
25 | 
26 |   registerNodeType('triangle', Triangle, false);
27 |   return {Triangle};
28 | }
29 | 


--------------------------------------------------------------------------------
/src/util.js:
--------------------------------------------------------------------------------
  1 | export const cos = angle => Number(Math.cos(angle).toFixed(15));
  2 | export const sin = angle => Number(Math.sin(angle).toFixed(15));
  3 | export const round = v => Math.round(v);
  4 | 
  5 | /**
  6 |  * 使用 贝塞尔曲线 模拟绘制平滑曲线
  7 |  * @param {*} points 绘制点
  8 |  */
  9 | export function makeSmoothCurveLine(points, smoothStart) {
 10 |   /**
 11 |    * 获取 模拟贝塞尔曲线关键控制点
 12 |    * @param {*} i
 13 |    * @param {*} a
 14 |    * @param {*} b
 15 |    */
 16 |   function getCtrlPoint(i, a = 0.1, b = 0.1) {
 17 |     let x0;
 18 |     let y0;
 19 |     let x1;
 20 |     let y1;
 21 | 
 22 |     if (points[i].x === points[i + 1].x || points[i].y === points[i + 1].y) {
 23 |       a = 0;
 24 |       b = 0;
 25 |     }
 26 | 
 27 |     if (i < 1) {
 28 |       x0 = points[0].x + (points[1].x - points[0].x) * a;
 29 |       y0 = points[0].y + (points[1].y - points[0].y) * a;
 30 |     } else {
 31 |       x0 = points[i].x + (points[i + 1].x - points[i - 1].x) * a;
 32 |       y0 = points[i].y + (points[i + 1].y - points[i - 1].y) * a;
 33 |     }
 34 | 
 35 |     if (i > points.length - 3) {
 36 |       const last = points.length - 1;
 37 |       x1 = points[last].x - (points[last].x - points[last - 1].x) * b;
 38 |       y1 = points[last].y - (points[last].y - points[last - 1].y) * b;
 39 |     } else {
 40 |       x1 = points[i + 1].x - (points[i + 2].x - points[i].x) * b;
 41 |       y1 = points[i + 1].y - (points[i + 2].y - points[i].y) * b;
 42 |     }
 43 | 
 44 |     return [{ x: x0, y: y0 }, { x: x1, y: y1 }];
 45 |   }
 46 | 
 47 |   points = points.map(([x, y]) => ({ x, y }));
 48 | 
 49 |   let d = '';
 50 |   points.forEach((point, i) => {
 51 |     if (i === 0 && smoothStart === 0) {
 52 |       // 从第0个点开始绘制曲线
 53 |       d += `M${point.x} ${point.y}`;
 54 |     } else if (i === 0 && smoothStart !== 0) {
 55 |       // 不是从第一个开始曲线
 56 |       d += `L${point.x} ${point.y}`;
 57 |     } else {
 58 |       const [A, B] = getCtrlPoint(i - 1);
 59 |       d += `C${[A.x, A.y, B.x, B.y, point.x, point.y].join(' ')}`;
 60 |     }
 61 |   });
 62 |   return d;
 63 | }
 64 | 
 65 | /**
 66 |  * 使用 贝塞尔曲线 模拟绘制平滑曲线
 67 |  * @param {*} ctx 绘制上下文,如:Context2D
 68 |  * @param {*} points 绘制点
 69 |  */
 70 | export function drawSmoothCurveLine(ctx, points, smoothStart) {
 71 |   /**
 72 |    * 获取 模拟贝塞尔曲线关键控制点
 73 |    * @param {*} i
 74 |    * @param {*} a
 75 |    * @param {*} b
 76 |    */
 77 |   function getCtrlPoint(i, a = 0.1, b = 0.1) {
 78 |     let x0;
 79 |     let y0;
 80 |     let x1;
 81 |     let y1;
 82 | 
 83 |     if (points[i].x === points[i + 1].x || points[i].y === points[i + 1].y) {
 84 |       a = 0;
 85 |       b = 0;
 86 |     }
 87 | 
 88 |     if (i < 1) {
 89 |       x0 = points[0].x + (points[1].x - points[0].x) * a;
 90 |       y0 = points[0].y + (points[1].y - points[0].y) * a;
 91 |     } else {
 92 |       x0 = points[i].x + (points[i + 1].x - points[i - 1].x) * a;
 93 |       y0 = points[i].y + (points[i + 1].y - points[i - 1].y) * a;
 94 |     }
 95 | 
 96 |     if (i > points.length - 3) {
 97 |       const last = points.length - 1;
 98 |       x1 = points[last].x - (points[last].x - points[last - 1].x) * b;
 99 |       y1 = points[last].y - (points[last].y - points[last - 1].y) * b;
100 |     } else {
101 |       x1 = points[i + 1].x - (points[i + 2].x - points[i].x) * b;
102 |       y1 = points[i + 1].y - (points[i + 2].y - points[i].y) * b;
103 |     }
104 | 
105 |     return [{ x: x0, y: y0 }, { x: x1, y: y1 }];
106 |   }
107 | 
108 |   points = points.map(([x, y]) => ({ x, y }));
109 | 
110 |   points.forEach((point, i) => {
111 |     if (i === 0 && smoothStart === 0) {
112 |       // 从第0个点开始绘制曲线
113 |       ctx.moveTo(point.x, point.y);
114 |     } else if (i === 0 && smoothStart !== 0) {
115 |       // 不是从第一个开始曲线
116 |       ctx.lineTo(point.x, point.y);
117 |     } else {
118 |       const [A, B] = getCtrlPoint(i - 1);
119 |       ctx.bezierCurveTo(A.x, A.y, B.x, B.y, point.x, point.y);
120 |     }
121 |   });
122 | }
123 | 
124 | export function angleOf(v1, v2 = [1, 0]) {
125 |   let ang = Math.atan2(v1[1], v1[0]) - Math.atan2(v2[1], v2[0]);
126 |   if(ang < 0.0) ang += 2.0 * Math.PI;
127 |   return ang;
128 | }
129 | 
130 | export function pointsEqual(p1, p2) {
131 |   if(p1.length !== p2.length) return false;
132 |   for(let i = 0; i < p1.length; i++) {
133 |     if(p1[i][0] !== p2[i][0] || p1[i][1] !== p2[i][1]) return false;
134 |   }
135 |   return true;
136 | }


--------------------------------------------------------------------------------
/test/cases/arc.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   arc: {
 3 |     default: {
 4 |       pos: [100, 100],
 5 |       center: [20, 0],
 6 |       startPoint: [10, 0],
 7 |       angle: Math.PI / 2,
 8 |       lineWidth: 5,
 9 |       anticlockwise: true,
10 |       color: 'red',
11 |     },
12 |   },
13 | };
14 | 


--------------------------------------------------------------------------------
/test/cases/circle.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   circle: {
 3 |     default: {
 4 |       pos: [100, 100],
 5 |       radius: 30,
 6 |       lineWidth: 5,
 7 |       color: 'red',
 8 |       bgcolor: '#eee',
 9 |       anticlockwise: true,
10 |     },
11 |     noellipse: {
12 |       pos: [100, 100],
13 |       radius: 30,
14 |       lineWidth: 5,
15 |       color: 'red',
16 |       bgcolor: '#eee',
17 |       anticlockwise: true,
18 |     },
19 |   },
20 | };
21 | 


--------------------------------------------------------------------------------
/test/cases/ellipse.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   ellipse: {
3 |     default: {},
4 |   },
5 | };
6 | 


--------------------------------------------------------------------------------
/test/cases/ellipseArc.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   ellipseArc: {
 3 |     default: {
 4 |       pos: [100, 100],
 5 |       radiusX: 15,
 6 |       radiusY: 30,
 7 |       startAngle: 0,
 8 |       endAngle: Math.PI * 0.7,
 9 |       lineWidth: 1,
10 |       color: 'red',
11 |       bgcolor: '#eee',
12 |     },
13 |   },
14 | };
15 | 


--------------------------------------------------------------------------------
/test/cases/ellipseSector.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   ellipseSector: {
 3 |     default: {
 4 |       pos: [100, 100],
 5 |       radiusX: 15,
 6 |       radiusY: 30,
 7 |       ellipseSectortAngle: 0,
 8 |       endAngle: Math.PI * 1.3,
 9 |       lineWidth: 1,
10 |       color: 'red',
11 |       bgcolor: '#eee',
12 |       fillColor: 'red',
13 |       center: [0, 0],
14 |       anticlockwise: true,
15 |     },
16 |     noellipse: {
17 |       pos: [100, 100],
18 |       radiusX: 15,
19 |       radiusY: 30,
20 |       ellipseSectortAngle: 0,
21 |       endAngle: Math.PI * 2,
22 |       lineWidth: 1,
23 |       color: 'red',
24 |       bgcolor: '#eee',
25 |       noellipse: true,
26 |     },
27 |   },
28 | };
29 | 


--------------------------------------------------------------------------------
/test/cases/polycurve.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   polycurve: {
 3 |     default: {
 4 |       pos: [100, 100],
 5 |       startPoint: [10, 10],
 6 |       points: [[20, -10, 110, 50, -20, 40], [10, -10, 20, 50, 0, 0]],
 7 |       color: 'red',
 8 |       lineCap: 'round',
 9 |       lineJoin: 'round',
10 |       lineWidth: 5,
11 |     },
12 |   },
13 | };
14 | 


--------------------------------------------------------------------------------
/test/cases/polygon.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   polygon: {
 3 |     default: {
 4 |       pos: [100, 100],
 5 |       color: {
 6 |         vector: [0, 0, 150, 150],
 7 |         colors: [{offset: 0, color: 'red'}, {offset: 1, color: 'green'}],
 8 |       },
 9 |       fillColor: 'yellow',
10 |       points: [[0, 0], [100, 100], [200, -50]],
11 |       bgcolor: '#eee',
12 |       lineWidth: 5,
13 |     },
14 |     nopoints: {
15 |       pos: [100, 100],
16 |       color: {
17 |         vector: [0, 0, 150, 150],
18 |         colors: [{offset: 0, color: 'red'}, {offset: 1, color: 'green'}],
19 |       },
20 |       fillColor: 'yellow',
21 |       bgcolor: '#eee',
22 |       lineWidth: 5,
23 |     },
24 |   },
25 | };
26 | 


--------------------------------------------------------------------------------
/test/cases/polyline.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   polyline: {
 3 |     default: {
 4 |       pos: [100, 100],
 5 |       points: [[0, 0], [100, 100], [150, -50]],
 6 |       lineWidth: 3,
 7 |       color: 'red',
 8 |       lineCap: 'round',
 9 |       lineJoin: 'round',
10 |     },
11 |   },
12 | };
13 | 


--------------------------------------------------------------------------------
/test/cases/rect.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   rect: {
 3 |     default: {
 4 |       pos: [100, 100],
 5 |       color: 'red',
 6 |       angle: 30,
 7 |       sides: [30, 40],
 8 |       fillColor: 'yellow',
 9 |       bgcolor: '#eee',
10 |     },
11 |   },
12 | };
13 | 


--------------------------------------------------------------------------------
/test/cases/ring.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   ring: {
 3 |     default: {
 4 |       pos: [100, 100],
 5 |       innerRadius: 15,
 6 |       outerRadius: 50,
 7 |       fillColor: {
 8 |         vector: [0, 0, 150, 150],
 9 |         colors: [{offset: 0, color: 'red'}, {offset: 1, color: 'green'}],
10 |       },
11 |       lineWidth: 4,
12 |       lineDash: [0, 0],
13 |       lineDashOffset: 2,
14 |       startAngle: Math.PI * 0.5,
15 |       endAngle: Math.PI * 2.6,
16 |       bgcolor: '#eee',
17 |     },
18 | 
19 |     sector: {
20 |       pos: [100, 100],
21 |       innerRadius: 15,
22 |       outerRadius: 50,
23 |       fillColor: {
24 |         vector: [0, 0, 150, 150],
25 |         colors: [{offset: 0, color: 'red'}, {offset: 1, color: 'green'}],
26 |       },
27 |       lineWidth: 4,
28 |       startAngle: Math.PI * 0.5,
29 |       endAngle: Math.PI * 2.6,
30 |       bgcolor: '#eee',
31 |       color: 'red',
32 |     },
33 |   },
34 | };
35 | 


--------------------------------------------------------------------------------
/test/cases/sector.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   sector: {
 3 |     default: {
 4 |       pos: [100, 100],
 5 |       startAngle: 0,
 6 |       endAngle: Math.PI,
 7 |       radius: 30,
 8 |       lineWidth: 5,
 9 |       bgcolor: 'yellow',
10 |       color: 'red',
11 |     },
12 |   },
13 | };
14 | 


--------------------------------------------------------------------------------
/test/cases/star.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   star: {
 3 |     default: {
 4 |       pos: [100, 100],
 5 |       radius: 30,
 6 |       color: 'red',
 7 |       angles: 5,
 8 |       bgcolor: '#eee',
 9 |       fillColor: 'yellow',
10 |     },
11 |     innerRadius: {
12 |       pos: [100, 100],
13 |       radius: 30,
14 |       innerRadius: 15,
15 |       color: 'red',
16 |       angles: 5,
17 |       bgcolor: '#eee',
18 |       fillColor: 'yellow',
19 |     },
20 |   },
21 | };
22 | 


--------------------------------------------------------------------------------
/test/cases/triangle.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   triangle: {
 3 |     default: {
 4 |       pos: [100, 100],
 5 |       color: 'red',
 6 |       sides: [20, 40],
 7 |       angle: '40',
 8 |       fillColor: 'yellow',
 9 |       bgcolor: '#eee',
10 |     },
11 |   },
12 | };
13 | 


--------------------------------------------------------------------------------
/test/helpers/drawcase.js:
--------------------------------------------------------------------------------
 1 | const fs = require('fs');
 2 | const path = require('path');
 3 | const {createCanvas} = require('canvas');
 4 | const Layer = require('sprite-core').Layer;
 5 | 
 6 | module.exports = async function (caseId, size, handler, noEllipse = false) {
 7 |   const canvas = createCanvas(...size);
 8 |   const context = canvas.getContext('2d');
 9 | 
10 |   if(noEllipse) {
11 |     context.ellipse = null;
12 |   }
13 | 
14 |   const layer = new Layer({context});
15 |   await handler(layer, size);
16 |   fs.writeFileSync(
17 |     path.resolve(__dirname, `../img/${caseId}.png`),
18 |     canvas.toBuffer()
19 |   );
20 | };
21 | 


--------------------------------------------------------------------------------
/test/helpers/drawsprites.js:
--------------------------------------------------------------------------------
 1 | 
 2 | const {createCanvas} = require('canvas');
 3 | 
 4 | module.exports = function drawSprites(sprites, width, height) {
 5 |   const canvas = createCanvas(width, height);
 6 |   const context = canvas.getContext('2d');
 7 | 
 8 |   context.clearRect(0, 0, width, height);
 9 |   for(let i = 0; i < sprites.length; i++) {
10 |     sprites[i].connect(context).draw();
11 |   }
12 |   return canvas;
13 | };


--------------------------------------------------------------------------------
/test/helpers/index.js:
--------------------------------------------------------------------------------
 1 | const {createCanvas, loadImage} = require('canvas');
 2 | 
 3 | const imghash = require('imghash');
 4 | const hamming = require('hamming-distance');
 5 | const colors = require('colors');
 6 | const pixelmatch = require('pixelmatch');
 7 | const fs = require('fs');
 8 | 
 9 | async function createCanvasFromFile(src) {
10 |   const img = await loadImage(src);
11 |   const canvas = createCanvas(img.width, img.height);
12 |   canvas.getContext('2d').drawImage(img, 0, 0);
13 |   return canvas;
14 | }
15 | 
16 | export async function compare(canvas, caseId) {
17 |   const srcData = canvas.toBuffer();
18 |   const desCanvas = await createCanvasFromFile(`./test/img/${caseId}.png`);
19 | 
20 |   const desData = desCanvas.toBuffer();
21 |   const N = 32;
22 |   const hash1 = imghash.hash(srcData, N);
23 |   const hash2 = imghash.hash(desData, N);
24 | 
25 |   const results = await Promise.all([hash1, hash2]);
26 | 
27 |   const dist = hamming(...results);
28 |   console.warn(colors.cyan(`Hamming distance between canvas and ${caseId} is: ${dist}`));
29 | 
30 |   const diffFile = `./test/img-diff/${caseId}.diff.png`;
31 |   const srcFile = `./test/img-diff/${caseId}.src.png`;
32 | 
33 |   const width = canvas.width,
34 |     height = canvas.height;
35 |   const diffCanvas = createCanvas(width, height),
36 |     srcContext = canvas.getContext('2d'),
37 |     desContext = desCanvas.getContext('2d'),
38 |     diffContext = diffCanvas.getContext('2d');
39 | 
40 |   const img1 = srcContext.getImageData(0, 0, width, height);
41 |   const img2 = desContext.getImageData(0, 0, width, height);
42 |   const diff = diffContext.createImageData(width, height);
43 | 
44 |   pixelmatch(
45 |     img1.data,
46 |     img2.data,
47 |     diff.data,
48 |     width,
49 |     height,
50 |     {threshold: 0.1}
51 |   );
52 |   diffContext.putImageData(diff, 0, 0);
53 | 
54 |   let isEqual = !dist;
55 | 
56 |   if(isEqual) { // hash equal, re-check pixels
57 |     const data = diff.data;
58 |     for(let i = 0; i < data.length; i += 4) {
59 |       const r = data[i],
60 |         g = data[i + 1],
61 |         b = data[i + 2];
62 | 
63 |       if(r === 255 && g === 0 && b === 0) {
64 |         isEqual = false;
65 |         break;
66 |       }
67 |     }
68 |   }
69 | 
70 |   if(!isEqual) {
71 |     fs.writeFileSync(diffFile, diffCanvas.toBuffer());
72 |     fs.writeFileSync(srcFile, canvas.toBuffer());
73 |   } else {
74 |     if(fs.existsSync(diffFile)) {
75 |       fs.unlinkSync(diffFile);
76 |     }
77 |     if(fs.existsSync(srcFile)) {
78 |       fs.unlinkSync(srcFile);
79 |     }
80 |   }
81 | 
82 |   return isEqual;
83 | }
84 | 
85 | const drawSprites = require('./drawsprites');
86 | export {drawSprites};
87 | 


--------------------------------------------------------------------------------
/test/img/arc-default.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spritejs/sprite-extend-shapes/0f5d72f9e2a007b96f6355937d89540bacfb2eb2/test/img/arc-default.png


--------------------------------------------------------------------------------
/test/img/circle-default.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spritejs/sprite-extend-shapes/0f5d72f9e2a007b96f6355937d89540bacfb2eb2/test/img/circle-default.png


--------------------------------------------------------------------------------
/test/img/circle-noellipse.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spritejs/sprite-extend-shapes/0f5d72f9e2a007b96f6355937d89540bacfb2eb2/test/img/circle-noellipse.png


--------------------------------------------------------------------------------
/test/img/ellipse-default.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spritejs/sprite-extend-shapes/0f5d72f9e2a007b96f6355937d89540bacfb2eb2/test/img/ellipse-default.png


--------------------------------------------------------------------------------
/test/img/ellipseArc-default.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spritejs/sprite-extend-shapes/0f5d72f9e2a007b96f6355937d89540bacfb2eb2/test/img/ellipseArc-default.png


--------------------------------------------------------------------------------
/test/img/ellipseSector-default.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spritejs/sprite-extend-shapes/0f5d72f9e2a007b96f6355937d89540bacfb2eb2/test/img/ellipseSector-default.png


--------------------------------------------------------------------------------
/test/img/ellipseSector-noellipse.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spritejs/sprite-extend-shapes/0f5d72f9e2a007b96f6355937d89540bacfb2eb2/test/img/ellipseSector-noellipse.png


--------------------------------------------------------------------------------
/test/img/polycurve-default.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spritejs/sprite-extend-shapes/0f5d72f9e2a007b96f6355937d89540bacfb2eb2/test/img/polycurve-default.png


--------------------------------------------------------------------------------
/test/img/polygon-default.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spritejs/sprite-extend-shapes/0f5d72f9e2a007b96f6355937d89540bacfb2eb2/test/img/polygon-default.png


--------------------------------------------------------------------------------
/test/img/polygon-nopoints.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spritejs/sprite-extend-shapes/0f5d72f9e2a007b96f6355937d89540bacfb2eb2/test/img/polygon-nopoints.png


--------------------------------------------------------------------------------
/test/img/polyline-default.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spritejs/sprite-extend-shapes/0f5d72f9e2a007b96f6355937d89540bacfb2eb2/test/img/polyline-default.png


--------------------------------------------------------------------------------
/test/img/rect-default.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spritejs/sprite-extend-shapes/0f5d72f9e2a007b96f6355937d89540bacfb2eb2/test/img/rect-default.png


--------------------------------------------------------------------------------
/test/img/ring-default.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spritejs/sprite-extend-shapes/0f5d72f9e2a007b96f6355937d89540bacfb2eb2/test/img/ring-default.png


--------------------------------------------------------------------------------
/test/img/ring-sector.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spritejs/sprite-extend-shapes/0f5d72f9e2a007b96f6355937d89540bacfb2eb2/test/img/ring-sector.png


--------------------------------------------------------------------------------
/test/img/sector-default.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spritejs/sprite-extend-shapes/0f5d72f9e2a007b96f6355937d89540bacfb2eb2/test/img/sector-default.png


--------------------------------------------------------------------------------
/test/img/star-default.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spritejs/sprite-extend-shapes/0f5d72f9e2a007b96f6355937d89540bacfb2eb2/test/img/star-default.png


--------------------------------------------------------------------------------
/test/img/star-innerRadius.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spritejs/sprite-extend-shapes/0f5d72f9e2a007b96f6355937d89540bacfb2eb2/test/img/star-innerRadius.png


--------------------------------------------------------------------------------
/test/img/triangle-default.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spritejs/sprite-extend-shapes/0f5d72f9e2a007b96f6355937d89540bacfb2eb2/test/img/triangle-default.png


--------------------------------------------------------------------------------
/test/run.test.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable */
 2 | import * as spritejs from 'spritejs';
 3 | import {createCanvas} from 'canvas';
 4 | import {Layer} from 'sprite-core';
 5 | import * as shapes from '../src/index';
 6 | import {compare} from './helpers';
 7 | 
 8 | require('canvas-5-polyfill'); // Path2D polyfill
 9 | 
10 | // const {Layer} = spritejs;
11 | spritejs.use(shapes);
12 | 
13 | const fs = require('fs');
14 | const path = require('path');
15 | const test = require('ava');
16 | const drawCase = require('./helpers/drawcase');
17 | 
18 | const casesDir = './cases';
19 | 
20 | fs.readdirSync(path.resolve(__dirname, casesDir))
21 |   .map(file => require(`${casesDir}/${file}`).default)
22 |   .forEach(runTest);
23 | 
24 | function runTest(obj) {
25 |   const namespace = Object.keys(obj)[0];
26 |   const Shape = spritejs[namespace.replace(/\b\w/g, m => m.toUpperCase())];
27 | 
28 |   Object.entries(obj[namespace]).forEach(([key, value]) => {
29 |     test(`draw ${namespace}: ${key}`, async t => {
30 |       await outputImg(namespace, key, Shape, value, !!value.noellipse);
31 | 
32 |       const canvas = createCanvas(300, 300);
33 |       const context = canvas.getContext('2d');
34 |       if (value.noellipse) {
35 |         context.ellipse = null;
36 | 
37 |         delete value.noellipse;
38 |       }
39 |       const layer = new Layer({context});
40 |       const shape = new Shape();
41 |       if (Object.keys(value).length) {
42 |         shape.attr(value);
43 |       }
44 | 
45 |       layer.append(shape);
46 | 
47 |       await layer.prepareRender();
48 |       const isEqual = await compare(canvas, `${namespace}-${key}`);
49 |       t.truthy(isEqual);
50 |     });
51 |   });
52 | }
53 | 
54 | async function outputImg(namespace, key, Shape, attr, noellipse = false) {
55 |   if (noellipse) {
56 |     await drawCase(
57 |       `${namespace}-${key}`,
58 |       [300, 300],
59 |       layer => {
60 |         const shape = new Shape();
61 |         shape.attr(attr);
62 |         layer.append(shape);
63 |         return layer.prepareRender();
64 |       },
65 |       true
66 |     );
67 |   } else {
68 |     await drawCase(`${namespace}-${key}`, [300, 300], layer => {
69 |       const shape = new Shape();
70 |       shape.attr(attr);
71 |       layer.append(shape);
72 |       return layer.prepareRender();
73 |     });
74 |   }
75 | }
76 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "compilerOptions": {
3 |     "experimentalDecorators": true,
4 |     "allowJs": true
5 |   }
6 | }
7 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const EsmWebpackPlugin = require('@purtuga/esm-webpack-plugin');
 2 | const path = require('path');
 3 | const fs = require('fs');
 4 | 
 5 | // let babelConf;
 6 | // if (fs.existsSync('./.babelrc')) {
 7 | //   // use babel
 8 | //   babelConf = JSON.parse(fs.readFileSync('.babelrc'));
 9 | // }
10 | 
11 | module.exports = function(env = {}) {
12 |   let babelConf;
13 |   const babelRC = env.esnext ? './.es6.babelrc' : './.babelrc';
14 | 
15 |   const alias = {};
16 | 
17 |   if (fs.existsSync(babelRC)) {
18 |     babelConf = JSON.parse(fs.readFileSync(babelRC));
19 |     babelConf.babelrc = false;
20 |   }
21 | 
22 |   const externals = {};
23 |   let filename = 'sprite-extend-shapes.standalone.js';
24 |   if (!env.standalone) {
25 |     externals['sprite-core'] = 'spritejs';
26 |     filename = env.esnext
27 |       ? 'sprite-extend-shapes.esm.js'
28 |       : 'sprite-extend-shapes.js';
29 |   }
30 | 
31 |   if(env.nobrowser) {
32 |     alias['svg-path-to-canvas'] = 'svg-path-to-canvas/dist/svg-path-to-canvas.nobrowser';
33 |     filename = 'sprite-extend-shapes.nobrowser.js'
34 |     env.production = true;
35 |   }
36 | 
37 |   const output = {
38 |     path: path.resolve(__dirname, 'dist'),
39 |     filename,
40 |     publicPath: '/js/',
41 |     library: 'spriteShapes',
42 |     libraryTarget: env.esnext ? 'var' : 'umd',
43 |   }
44 | 
45 |   const plugins = [];
46 |   if(!env.esnext) output.libraryExport = 'default';
47 |   else {
48 |     plugins.push(new EsmWebpackPlugin());
49 |   }
50 | 
51 |   return {
52 |     mode: env.production ? 'production' : 'none',
53 |     entry: './src/index',
54 |     output,
55 | 
56 |     resolve: {
57 |       alias,
58 |     },
59 | 
60 |     module: {
61 |       rules: [
62 |         {
63 |           test: /\.js$/,
64 |           exclude: /(node_modules|bower_components)/,
65 |           use: {
66 |             loader: 'babel-loader',
67 |             options: babelConf
68 |           }
69 |         }
70 |       ]
71 | 
72 |       /* Advanced module configuration (click to show) */
73 |     },
74 | 
75 |     externals,
76 |     // Don't follow/bundle these modules, but request them at runtime from the environment
77 | 
78 |     stats: 'errors-only',
79 |     // lets you precisely control what bundle information gets displayed
80 | 
81 |     devServer: {
82 |       contentBase: path.join(__dirname, 'example'),
83 |       compress: true,
84 |       port: 9090
85 |       // ...
86 |     },
87 | 
88 |     plugins,
89 |     // list of additional plugins
90 | 
91 |     /* Advanced configuration (click to show) */
92 |   };
93 | };
94 | 


--------------------------------------------------------------------------------