Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 65f66b7

Browse files
yubyyuby
committed
Edit : multi canvas support
1 parent a8fa3bc commit 65f66b7

File tree

1 file changed

+133
-63
lines changed

1 file changed

+133
-63
lines changed

‎Brush.js‎

Lines changed: 133 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ var Group = {
3232
option['width'] = canvas.width;
3333
option['height'] = canvas.height;
3434
this.layers[layerName] = {
35+
group : canvas.group,
3536
canvas : canvas,
3637
type: type,
3738
props : option,
@@ -55,6 +56,17 @@ var Group = {
5556
},
5657
get : function(name){
5758
return Group._get(name)
59+
},
60+
destroy: function(name){
61+
return Group._destroy(name)
62+
},
63+
_destroy: function(name){
64+
if(this.layers[name]){
65+
return delete this.layers[name]
66+
}else{
67+
return false;
68+
}
69+
5870
}
5971
};
6072

@@ -64,22 +76,17 @@ function _generateLayerName(){
6476

6577
// Brush
6678
var Brush = function(canvas) {
79+
this.group = canvas;
6780
this.canvasElem = document.getElementById(canvas);
6881
this.width = this.canvasElem.width;
6982
this.height = this.canvasElem.height;
7083
this.context = this.canvasElem.getContext('2d');
7184
}
7285
var brushProto = Brush.prototype = {};
7386

74-
brushProto.Clear = function(layer){
75-
var cavnas = layer['canvas'];
76-
var context = cavnas['context'];
77-
context.clearRect(0,0, canvas.width, canvas.height)
78-
}
79-
8087
brushProto.init = function(cavnas,option, type){
8188
Group.set( cavnas, option, type , false);
82-
drawing();
89+
drawing(cavnas.group);
8390
}
8491

8592
brushProto.Text = function(option){
@@ -162,7 +169,6 @@ brushProto.drawingFn = {
162169
_context = _canvas.context,
163170
option = layer['props'],
164171
points = option['points'];
165-
166172
this.commonDrawing(_context , option);
167173
points.forEach(function(elem){
168174
_context.beginPath();
@@ -307,12 +313,18 @@ brushProto.drawingFn = {
307313
_context.stroke();
308314
},
309315
stroke: function(layer){
310-
var _canvas = layer['canvas'], _context = _canvas.context, option = layer['props'], points = option['drawPoints'], pointsLen = points.length, index = 0;
316+
var _canvas = layer['canvas'],
317+
_context = _canvas.context,
318+
option = layer['props'],
319+
points = option['drawPoints'],
320+
pointsLen = points.length,
321+
index = 0,
322+
layerID = option['id'];
323+
311324
if(option['index']){
312325
index = option['index'];
313326
}else{
314327
option['index'] = 0;
315-
316328
}
317329

318330
var startX = option['points'][0][0];
@@ -324,14 +336,49 @@ brushProto.drawingFn = {
324336
for(var step =0; step <= index; step++){
325337
_context.lineTo(points[step][0] , Helper.fixCoordinate(_canvas.height, points[step][1]) );
326338
}
327-
//
328339
option['index'] = option['index'] + 1;
329340

330341
_context.stroke();
331342
if(option['index'] === pointsLen){
332-
option['index'] =0;
333-
}
343+
var animationInfo = AnimationGroup.get(layerID);
344+
if(animationInfo && animationInfo['time']){
345+
if(animationInfo['time'] === -1){
346+
option['index'] = 0;
347+
}else{
348+
animationInfo['time'] = animationInfo['time'] - 1;
349+
if(animationInfo['time'] === 0){
350+
option['index'] =pointsLen-1;
351+
AnimationGroup.destroy(layerID);
352+
}else{
353+
option['index'] = 0;
354+
}
355+
}
334356

357+
}else{
358+
option['index'] =pointsLen-1;
359+
AnimationGroup.destroy(layerID);
360+
}
361+
362+
// var animationInfo = AnimationGroup.get(layerID);
363+
// console.log(animationInfo)
364+
// if(animationInfo && animationInfo['time']){
365+
// animationInfo['time'] = animationInfo['time'] - 1;
366+
// }
367+
368+
// if(animationInfo['time'] && animationInfo['time'] === 0){
369+
// option['index'] =pointsLen-1;
370+
// AnimationGroup.destroy(layerID);
371+
// }
372+
373+
374+
// if(animationInfo && animationInfo['time'] && animationInfo['time'] > 1){
375+
// animationInfo['time'] = animationInfo['time'] - 1;
376+
// option['index'] = 0;
377+
// }
378+
// else{
379+
// option['index'] =pointsLen-1;
380+
// }
381+
}
335382
}
336383
}
337384

@@ -343,43 +390,46 @@ brushProto.Stroke = function(option){
343390
return canvas;
344391
}
345392

346-
function drawing(){
393+
function drawing(group){
347394
var layers = Group.get();
348395
for(var key in layers){
349396
(function(){
350397
var _layer = layers[key];
351-
switch(_layer['type']){
352-
case 'text':
353-
brushProto.drawingFn.text(_layer);
354-
break;
355-
case 'circle':
356-
brushProto.drawingFn.circle(_layer);
357-
break;
358-
case 'line':
359-
brushProto.drawingFn.line(_layer);
360-
break;
361-
case 'arcto':
362-
brushProto.drawingFn.arcto(_layer);
363-
break;
364-
case 'bezier':
365-
brushProto.drawingFn.bezierCurve(_layer);
366-
break;
367-
case 'quadratic':
368-
brushProto.drawingFn.quadraticCurve(_layer);
369-
break;
370-
case 'rectangle':
371-
brushProto.drawingFn.rectangle(_layer);
372-
break;
373-
case 'stroke':
374-
if(arguments[1] === 'animate'){
375-
brushProto.drawingFn.stroke(_layer);
376-
}
377-
break;
378-
default:
379-
return;
398+
if(_layer.group === group){
399+
switch(_layer['type']){
400+
case 'text':
401+
brushProto.drawingFn.text(_layer);
402+
break;
403+
case 'circle':
404+
brushProto.drawingFn.circle(_layer);
405+
break;
406+
case 'line':
407+
brushProto.drawingFn.line(_layer);
408+
break;
409+
case 'arcto':
410+
brushProto.drawingFn.arcto(_layer);
411+
break;
412+
case 'bezier':
413+
brushProto.drawingFn.bezierCurve(_layer);
414+
break;
415+
case 'quadratic':
416+
brushProto.drawingFn.quadraticCurve(_layer);
417+
break;
418+
case 'rectangle':
419+
brushProto.drawingFn.rectangle(_layer);
420+
break;
421+
case 'stroke':
422+
if(arguments[2] === 'animate'){
423+
brushProto.drawingFn.stroke(_layer);
424+
}
425+
break;
426+
default:
427+
return;
428+
}
380429
}
430+
})(key , group, arguments[1])
381431

382-
})(key, arguments[0])
432+
//})(key, arguments[0])
383433

384434

385435
}
@@ -391,21 +441,39 @@ var AnimationGroup = {
391441
set : function(info){
392442
this.layers.push(info);
393443
},
444+
all : function(){
445+
return this.layers;
446+
},
394447
get : function(name){
395-
if(this.layers[name]){
396-
return this.layers[name];
397-
}else{
398-
return this.layers;
399-
}
448+
var animateArr = this.layers;
449+
var filtered = animateArr.filter(function(animate){
450+
return animate.id === name
451+
})
452+
return filtered[0];
453+
454+
},
455+
destroy: function(name){
456+
var animateArr = this.layers;
457+
animateArr.forEach(function(elem, idx){
458+
if(elem['id'] === name){
459+
animateArr.splice(idx,1);
460+
}
461+
})
400462
}
401463
};
402-
brushProto.clear = function(){
464+
brushProto.clear = function(grp){
403465
var layers = Group.get();
466+
404467
for(var key in layers){
405468
(function(key){
406469
var canvas = layers[key]['canvas'];
407470
var context = canvas.context;
408-
context.clearRect(0, 0, canvas.width, canvas.height);
471+
472+
if(canvas.group === grp){
473+
context.clearRect(0, 0, canvas.width, canvas.height);
474+
}
475+
476+
409477
})(key)
410478
}
411479
}
@@ -421,23 +489,27 @@ brushProto.Animation = function(info){
421489
}
422490

423491
function _Animation(){
424-
425-
AnimationGroup.get().forEach(function(elm){
492+
var animateList = [];
493+
AnimationGroup.all().forEach(function(elm){
426494
var _id = elm['id'], type = elm['type'], layer = Group.get(_id);
427495
AnimationType[type](layer, elm);
428-
496+
if(animateList.indexOf(layer['group']) === -1){
497+
animateList.push(layer['group'])
498+
}
499+
})
500+
animateList.forEach(function(grp){
501+
brushProto.clear(grp);
502+
drawing(grp, 'animate');
429503
})
430-
brushProto.clear()
431-
drawing('animate');
432504
window.requestAnimationFrame(_Animation)
433-
//setTimeout(_Animation, 1000);
505+
//setTimeout(_Animation, 2000);
434506
}
435507

436508
var AnimationType = {
437509
falling: function(layer, animationInfo){
438510

439511
var gradient, grdStart, grdEnd
440-
cavnas = layer['canvas'],
512+
canvas = layer['canvas'],
441513
option = animationInfo,
442514
points = layer['props']['points'],
443515
pointsLen = points.length;
@@ -469,7 +541,7 @@ var AnimationType = {
469541
},
470542
rising: function(layer, animationInfo){
471543
var gradient, grdStart, grdEnd
472-
cavnas = layer['canvas'],
544+
canvas = layer['canvas'],
473545
option = animationInfo,
474546
points = layer['props']['points'],
475547
pointsLen = points.length;
@@ -498,12 +570,11 @@ var AnimationType = {
498570
})
499571
},
500572
bouncing: function(layer, animationInfo){
501-
var gradient, grdStart, grdEnd
502-
cavnas = layer['canvas'],
573+
var gradient, grdStart, grdEnd,
574+
canvas = layer['canvas'],
503575
option = animationInfo,
504576
points = layer['props']['points'],
505577
pointsLen = points.length;
506-
507578
points.forEach(function(elem){
508579
elem[0] = elem[0] + option['speedX'];
509580
elem[1] = elem[1] + option['speedY'];
@@ -543,7 +614,6 @@ var AnimationType = {
543614
drawPoints = [];
544615
option['drawPoints'] = drawPoints,
545616
pointsLen = points.length;
546-
547617
for(var pt =0; pt< pointsLen; pt++){
548618
(function(){
549619
var currentP = points[pt], nextP = points[pt + 1];

0 commit comments

Comments
 (0)