21 |
22 |
23 |
24 |
83 |
84 |
85 |
--------------------------------------------------------------------------------
/examples/circle-clone.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
21 |
22 |
23 |
24 |
60 |
61 |
62 |
--------------------------------------------------------------------------------
/examples/circle-composite.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
21 |
22 |
23 |
24 |
97 |
98 |
99 |
--------------------------------------------------------------------------------
/examples/circle-zoom.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
18 |
19 |
20 |
21 |
22 |
152 |
153 |
154 |
--------------------------------------------------------------------------------
/examples/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
21 |
22 |
32 |
33 |
97 |
98 |
99 |
--------------------------------------------------------------------------------
/examples/lib/weRender.min.js:
--------------------------------------------------------------------------------
1 | !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e(t.weRender=t.weRender||{})}(this,function(t){"use strict";var e=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},i=function(){function t(t,e){for(var i=0;i
23 |
31 | other examples:
24 |-
25 |
- reuse actions 26 |
- clone 27 |
- composite 28 |
- zoom 29 |
25 |
26 | 
27 | 
28 |
31 |
32 |
33 |
34 |
35 |
36 |
73 |
74 |
75 |
--------------------------------------------------------------------------------
/examples/path/money.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/weiying-shenzhen/weRender/d4302193dbd0fd016dbbb81b90cfe5b2ecb49e62/examples/path/money.png
--------------------------------------------------------------------------------
/examples/path/seat.draw.js:
--------------------------------------------------------------------------------
1 | new WeCanvas({ width: 56, height: 56 })
2 | .translate(10.000000, 10.000000)
3 | .beginPath()
4 | .fillStyle('#D8D8D8')
5 | .moveTo(33,34)
6 | .lineTo(33,34)
7 | .bezierCurveTo(35,34,36,33,36,31)
8 | .lineTo(36,18)
9 | .bezierCurveTo(36,16,35,15,33,15)
10 | .lineTo(33,15)
11 | .bezierCurveTo(33,7,26,0,18,0)
12 | .bezierCurveTo(10,0,3,7,3,15)
13 | .lineTo(3,15)
14 | .bezierCurveTo(1,15,0,16,0,18)
15 | .lineTo(0,31)
16 | .bezierCurveTo(0,33,1,34,3,34)
17 | .lineTo(3,34)
18 | .bezierCurveTo(3,35,4,36,5,36)
19 | .lineTo(31,36)
20 | .bezierCurveTo(32,36,33,35,33,34)
21 | .closePath()
22 | .fill()
--------------------------------------------------------------------------------
/examples/path/seat.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/examples/path/seatCanvas.js:
--------------------------------------------------------------------------------
1 | var cache = {}
2 |
3 | function getSeatCanvas(scale, fillStyle, type, image) {
4 | var type = type || "normal"
5 | var key = type + scale + ":" + fillStyle
6 | var canvas = cache[key]
7 |
8 | if (!canvas) {
9 | canvas = drawSeat(scale, fillStyle, type, image)
10 | cache[key] = canvas
11 | }
12 |
13 | return canvas
14 | }
15 |
16 | function drawSeat(scale, fillStyle, type, image) {
17 | var seat = new WeCanvas({
18 | width: 56 * scale,
19 | height: 56 * scale
20 | })
21 | .scale(scale, scale)
22 | .translate(10, 10)
23 | .beginPath()
24 | .fillStyle(fillStyle)
25 | .moveTo(33,34)
26 | .lineTo(33,34)
27 | .bezierCurveTo(35,34,36,33,36,31)
28 | .lineTo(36,18)
29 | .bezierCurveTo(36,16,35,15,33,15)
30 | .lineTo(33,15)
31 | .bezierCurveTo(33,7,26,0,18,0)
32 | .bezierCurveTo(10,0,3,7,3,15)
33 | .lineTo(3,15)
34 | .bezierCurveTo(1,15,0,16,0,18)
35 | .lineTo(0,31)
36 | .bezierCurveTo(0,33,1,34,3,34)
37 | .lineTo(3,34)
38 | .bezierCurveTo(3,35,4,36,5,36)
39 | .lineTo(31,36)
40 | .bezierCurveTo(32,36,33,35,33,34)
41 | .lineTo(33,34)
42 | .closePath()
43 | .fill()
44 |
45 | if (image) {
46 | if (type == "money") {
47 | seat.drawImage(image, 9, 10, 18, 18)
48 | } else {
49 | seat.drawImage(image, 11, 11, 14, 16)
50 | }
51 | }
52 |
53 | return seat.draw()
54 | }
--------------------------------------------------------------------------------
/examples/path/smile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/weiying-shenzhen/weRender/d4302193dbd0fd016dbbb81b90cfe5b2ecb49e62/examples/path/smile.png
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "we-render",
3 | "version": "1.0.2",
4 | "description": "canvas render engine",
5 | "main": "dist/weRender.js",
6 | "scripts": {
7 | "build": "rollup -c build/es5.config.js",
8 | "build:es6": "rollup -c build/es6.config.js",
9 | "pro": "NODE_ENV=production rollup -c build/es5.config.js",
10 | "watch": "rollup -c build/es5.config.js -w",
11 | "update": "npm run build:es6 && npm run build && npm run pro && cp dist/weRender.min.js examples/lib",
12 | "static": "cd examples && python -m SimpleHTTPServer 8000",
13 | "doc": "./node_modules/.bin/jsdoc2md -t build/README.template.md -f src/*.js > README.md"
14 | },
15 | "repository": {
16 | "type": "git",
17 | "url": "git+https://github.com/weiying-shenzhen/weRender.git"
18 | },
19 | "keywords": [
20 | "canvas",
21 | "2d",
22 | "render",
23 | "easy",
24 | "light-weight",
25 | "engine"
26 | ],
27 | "author": "henryluki",
28 | "license": "MIT",
29 | "bugs": {
30 | "url": "https://github.com/weiying-shenzhen/weRender/issues"
31 | },
32 | "homepage": "https://github.com/weiying-shenzhen/weRender#readme",
33 | "devDependencies": {
34 | "babel-eslint": "^7.2.2",
35 | "babel-plugin-external-helpers": "^6.22.0",
36 | "babel-plugin-transform-class-properties": "^6.24.1",
37 | "babel-preset-latest": "^6.24.1",
38 | "eslint": "^3.19.0",
39 | "eslint-config-airbnb-base": "^11.1.3",
40 | "eslint-config-react-app": "^0.6.2",
41 | "eslint-plugin-flowtype": "^2.30.4",
42 | "eslint-plugin-import": "^2.2.0",
43 | "eslint-plugin-jsx-a11y": "^4.0.0",
44 | "eslint-plugin-react": "^6.10.3",
45 | "jsdoc-to-markdown": "^3.0.0",
46 | "rollup-plugin-babel": "^2.7.1",
47 | "rollup-plugin-eslint": "^3.0.0",
48 | "rollup-plugin-node-resolve": "^3.0.0",
49 | "rollup-plugin-uglify": "^1.0.1",
50 | "rollup-watch": "^3.2.2"
51 | }
52 | }
53 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import WeCanvas from './weCanvas'
2 | import WeStage from './weStage'
3 |
4 | /**
5 | * weRender: Simple Canvas library for easy usage
6 | *
7 | * @module weRender
8 | */
9 | export {
10 | WeCanvas,
11 | WeStage
12 | }
13 |
--------------------------------------------------------------------------------
/src/weCanvas.js:
--------------------------------------------------------------------------------
1 | /**
2 | * WeCanvas: Easy canvas api for using, support useing chain
3 | *
4 | * - Directly use CanvasRenderingContext2D` methods`
5 | * - `Property` of `CanvasRenderingContext2D` here is `method`
6 | * - Won't really drawing Canvas until run `draw()`
7 | *
8 | */
9 | class WeCanvas {
10 | static hasGeneratored = false
11 | static generatorMethod() {
12 | WeCanvas.hasGeneratored = true
13 |
14 | const retangles = ["clearRect", "fillRect", "strokeRect"]
15 | const text = ["fillText", "strokeText", "measureText"]
16 | const lineStyles = ["lineWidth", "lineCap", "lineJoin"]
17 | const textStyles = ["font", "textAlgin", "textBaseline", "direction"]
18 | const fillStrokeStyles = ["fillStyle", "strokeStyle"]
19 | const paths = ["beginPath", "closePath", "moveTo", "lineTo", "bezierCurveTo", "quadraticCurveTo", "arc", "arcTo", "rect"]
20 | const pathsDrawing = ["fill", "stroke"]
21 | const transformations = ["rotate", "scale", "translate", "transform", "resetTransform"]
22 | const images = ["drawImage"]
23 | const pixel = ["createImageData", "getImageData", "putImageData"]
24 | const state = ["save", "restore"]
25 | const shadow = ['shadowColor', 'shadowBlur']
26 | const _methods = [].concat(
27 | retangles,
28 | text,
29 | lineStyles,
30 | textStyles,
31 | fillStrokeStyles,
32 | paths,
33 | pathsDrawing,
34 | transformations,
35 | images,
36 | pixel,
37 | state,
38 | shadow,
39 | )
40 | return _methods
41 | }
42 | /**
43 | * create a WeCanvas instance
44 | *
45 | * @param {Object} options - option settions for instance
46 | */
47 | constructor(options) {
48 | this._rendered = false
49 | this._init(options)
50 | this.width = this.canvas.width
51 | this.height = this.canvas.height
52 | }
53 | /**
54 | * init
55 | *
56 | * @private
57 | * @param {Canvas} options.canvas - canvas element
58 | * @param {Array} options.actions - context drawing actions
59 | * @param {Number} options.width - canvas witdh
60 | * @param {Number} options.height - canvas height
61 | * @param {Number} options.x - horizontal axis
62 | * @param {Number} options.y - vertical axis
63 | * @param {Array} options.methods - methods for context
64 | */
65 | _init({
66 | canvas,
67 | actions,
68 | width,
69 | height,
70 | x,
71 | y,
72 | methods = [],
73 | } = {}) {
74 | this.canvas = canvas || document.createElement('canvas')
75 | this._ctx = this.canvas.getContext('2d')
76 | this._initMethods(WeCanvas.hasGeneratored ? methods : WeCanvas.generatorMethod().concat(methods))
77 | this.setSize(width, height)
78 | this.setCoordinate(x, y)
79 | this.setActions(actions)
80 | }
81 | /**
82 | * reduce context methods that need to be bind
83 | *
84 | * @private
85 | * @param {Array} methods - context methods
86 | */
87 | _initMethods(methods = []) {
88 | methods.reduce((hash, method) => {
89 | if (!this[method]) {
90 | this._proxy(method)
91 | hash[method] = true
92 | }
93 | return hash
94 | }, {})
95 | }
96 | /**
97 | * bind context method or property to this instance
98 | *
99 | * @private
100 | * @param {String} method - context method or property
101 | */
102 | _proxy(method) {
103 | const prop = this._ctx[method]
104 | if (prop === undefined) return
105 | WeCanvas.prototype[method] = function(...args) {
106 | this._actions.push([
107 | Object.prototype.toString.call(prop) === "[object Function]" ? "method" : "property",
108 | method,
109 | args
110 | ])
111 | return this
112 | }
113 | }
114 | /**
115 | * set canvas size
116 | *
117 | * @param {Number} width - canvas width
118 | * @param {Number} height - canvas height
119 | */
120 | setSize(width, height) {
121 | if (width && width !== this.width) {
122 | this.canvas.width = width
123 | this.width = width
124 | }
125 | if (height && height !== this.height) {
126 | this.canvas.height = height
127 | this.height = height
128 | }
129 | return this
130 | }
131 | /**
132 | * set canvas style, only width and height
133 | *
134 | * @param {String} width - canvas style width
135 | * @param {String} height - canvas style height
136 | */
137 | setStyle(width, height) {
138 | if (width) {
139 | this.canvas.style.width = width
140 | }
141 | if (height) {
142 | this.canvas.style.height = height
143 | }
144 | return this
145 | }
146 | /**
147 | * set coordinate of stage
148 | *
149 | * @param {Number} x - horizontal axis
150 | * @param {Number} y - vertical axis
151 | */
152 | setCoordinate(x = 0, y = 0) {
153 | this.x = x
154 | this.y = y
155 | return this
156 | }
157 | /**
158 | * set init scale
159 | *
160 | * @param {Number} scale - scale ratio
161 | */
162 | setScale(scale) {
163 | this._ctx.scale(scale, scale)
164 | }
165 | /**
166 | * clear canvas
167 | */
168 | clear() {
169 | this._ctx.clearRect(0, 0, this.width, this.height)
170 | this.setActions([])
171 | }
172 | /**
173 | * get actions for context drawing
174 | */
175 | getActions() {
176 | return this._actions
177 | }
178 | /**
179 | * set actions
180 | *
181 | * @param {Array} actions - actions for context drawing
182 | */
183 | setActions(actions = []) {
184 | if (Array.isArray(actions)) {
185 | this._actions = actions
186 | }
187 | }
188 | /**
189 | * run actions, draw canvas
190 | */
191 | draw() {
192 | const shouldRender = ((!this._rendered ? true : !this._cache) && !!this._actions.length)
193 | if (!shouldRender) return
194 |
195 | this._actions.forEach(([
196 | type,
197 | method,
198 | args
199 | ]) => {
200 | const params = Array.prototype.slice.call(args)
201 |
202 | if (type === "method") {
203 | this._ctx[method].apply(this._ctx, params)
204 | } else {
205 | this._ctx[method] = params[0]
206 | }
207 | })
208 | if (!this._rendered) {
209 | this._rendered = true
210 | }
211 | return this
212 | }
213 | /**
214 | * set cache, default: true
215 | *
216 | * @param {Boolean} ifCache - if set cache
217 | */
218 | cache(ifCache = true) {
219 | if (typeof ifCache === "boolean") {
220 | this._cache = ifCache
221 | }
222 | return this
223 | }
224 | }
225 |
226 | export default WeCanvas
227 |
--------------------------------------------------------------------------------
/src/weStage.js:
--------------------------------------------------------------------------------
1 | import WeCanvas from './weCanvas'
2 | /**
3 | * WeStage: Canvas manager for WeCanvas
4 | *
5 | */
6 | class WeStage {
7 | /**
8 | * create a WeStage instance
9 | *
10 | * @param {Canvas} canvas - a Canvas element related to the dom
11 | * @param {Object} options - stage settings
12 | */
13 | constructor(canvas, options = {}) {
14 | this._canvas = new WeCanvas({
15 | canvas
16 | }).cache(false)
17 | this._children = []
18 | this._updating = false
19 | this._initOptions(options)
20 | }
21 | /**
22 | * init options for settings
23 | *
24 | * @private
25 | * @param {Boolean} options.clear - auto clear stage
26 | * @param {Number} options.ratio - zoom down level when draw child Canvas
27 | */
28 | _initOptions({
29 | clear = true,
30 | ratio = 1
31 | }) {
32 | if (typeof clear === "boolean") {
33 | this._clear = clear
34 | }
35 | if (typeof ratio === "number") {
36 | this._ratio = ratio
37 | }
38 | }
39 | /**
40 | * set stage size
41 | *
42 | * @param {Number} width - stage width
43 | * @param {Number} height - stage height
44 | */
45 | setSize(width, height) {
46 | this._canvas.setSize(width, height)
47 | this._canvas.setScale(this._ratio)
48 | }
49 | /**
50 | * set stage style
51 | *
52 | * @param {String} width - stage style width
53 | * @param {String} height - stage style height
54 | */
55 | setStyle(width, height) {
56 | this._canvas.setStyle(width, height)
57 | }
58 | /**
59 | * destrory stage
60 | */
61 | destory() {
62 | this._canvas = null
63 | this._children.length = 0
64 | }
65 | /**
66 | * clear canvas
67 | */
68 | clear() {
69 | this._canvas.clear()
70 | }
71 |
72 | /**
73 | * add child to the stage
74 | *
75 | * @param {WeCanvas|Object} child - WeCanvas instance or Object cotains Canvas
76 | */
77 | addChild(child) {
78 | if (child instanceof WeCanvas || child.canvas.getContext('2d')) {
79 | this._children.push(child)
80 | }
81 | }
82 | /**
83 | * translate stage, move coordinate
84 | *
85 | * @param {Number} x - offset x
86 | * @param {Number} y - offset y
87 | * @param {Boolean} reset - should reset after update
88 | */
89 | translate(x = 0, y = 0, reset = false) {
90 | if (typeof x === "number" && typeof y === "number") {
91 | this._coordinate = {
92 | x,
93 | y
94 | }
95 | }
96 | if (typeof reset === "boolean") {
97 | this._translateReset = reset
98 | }
99 | }
100 | /**
101 | * update stage, draw child on canvas
102 | * **run this method, all child canvas will draw**
103 | */
104 | update() {
105 | if (!this._children.length || this._updating) return
106 | this._updating = true
107 | if (this._clear) {
108 | this.clear()
109 | }
110 | this._translateStage()
111 | this._drawChildren()
112 | this._resetCoordinate()
113 | this._updateStage()
114 | this._updating = false
115 | this._children = []
116 | }
117 | /**
118 | * translate stage
119 | * @private
120 | */
121 | _translateStage() {
122 | if (this._coordinate) {
123 | const {
124 | x,
125 | y
126 | } = this._coordinate
127 | this._canvas.translate(x, y)
128 | }
129 | }
130 | /**
131 | * reset coordinate
132 | * @private
133 | */
134 | _resetCoordinate() {
135 | if (this._translateReset) {
136 | const {
137 | x,
138 | y
139 | } = this._coordinate
140 | this._canvas.translate(-x, -y)
141 | this._coordinate = null
142 | }
143 | }
144 | /**
145 | * draw children
146 | * @private
147 | */
148 | _drawChildren() {
149 | this._children.forEach((child) => {
150 | if (child instanceof WeCanvas) {
151 | this._drawChild(child)
152 | } else {
153 | this._drawChildCanvas(child)
154 | }
155 | })
156 | }
157 | /**
158 | * draw child, which is a instance of WeCanvas
159 | *
160 | * @private
161 | * @param {WeCanvas} child - a WeCanvas instance
162 | */
163 | _drawChild(child) {
164 | const {
165 | canvas,
166 | x,
167 | y,
168 | width,
169 | height
170 | } = child
171 | child.draw()
172 | this._canvas.drawImage(canvas, x, y, width / this._ratio, height / this._ratio)
173 | }
174 | /**
175 | * draw child, which is a raw Canvas element
176 | *
177 | * @private
178 | * @param {Number} options.x - horizontal axis
179 | * @param {Number} options.y - vertical axis
180 | * @param {Canvas} options.canvas - Canvas
181 | */
182 | _drawChildCanvas({
183 | x = 0,
184 | y = 0,
185 | canvas
186 | }) {
187 | this._canvas.drawImage(canvas, x, y, canvas.width / this._ratio, canvas.height / this._ratio)
188 | }
189 | /**
190 | * draw dom canvas
191 | * @private
192 | */
193 | _updateStage() {
194 | this._canvas.draw()
195 | }
196 | }
197 |
198 | export default WeStage
--------------------------------------------------------------------------------
27 |
28 |
31 |
32 |