├── README ├── compile ├── 1.png ├── jCanvaScript.1.5.18.js ├── mytest.htm ├── test.html ├── test1.js ├── test2.js └── test3.js ├── jCanvaScript.1.5.18.js ├── myPackager.exe ├── objects ├── gradientsAndPatterns.js ├── lines.js ├── rasters.js └── shapes.js ├── privateFunctions └── private.js ├── privateObjects ├── 1 obj.js ├── 10 shape.js ├── 100 lines.js ├── 1000 lines.js ├── 101 shapes.js ├── 11 gradientsAndPatterns.js ├── 110 gradientsAndPatterns.js ├── 12 layers.js ├── 13 rasters.js └── 2 group.js ├── publicFunctions └── public.js └── serviceObjects ├── canvas.js └── layer.js /README: -------------------------------------------------------------------------------- 1 | jCanvaScript is a JavaSript library that provides you methods to manage with the content of a HTML5 canvas element. Documentation and examples: http://jcscript.com/documentation You may use jCanvaScript library under the terms of either the MIT License or the GNU General Public License (GPL) Version 2. -------------------------------------------------------------------------------- /compile/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apsavin/jCanvaScript/165a6e5c13eb6e02dd8a857ec002f864775c91f5/compile/1.png -------------------------------------------------------------------------------- /compile/mytest.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 123 | 128 |

129 |

130 |

131 |
132 | 133 | 134 | 135 | 136 | 137 | 138 | -------------------------------------------------------------------------------- /compile/test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 31 | 50 | 51 | 52 |

53 |

Example

54 |

55 |

Growing circles

56 |

57 |

58 | 59 |

60 |

Code of examle

61 |

62 |

var interval_1=0;
 63 | function startShow()
 64 | {
 65 | 	var r = Math.floor(Math.random() * (254)),
 66 | 		g = Math.floor(Math.random() * (254)),
 67 | 		b = Math.floor(Math.random() * (254)),
 68 | 		x = Math.floor(Math.random() * (439)),
 69 | 		y = Math.floor(Math.random() * (554)),
 70 | 		color = "rgba("+r+", "+g+", "+b+", 0.5)",
 71 | 		filled = true,
 72 | 		radius = 1;
 73 | 	jc.circle(x, y, radius, color, filled)
 74 | 		.animate({radius:100, opacity:0}, 1500, function(){
 75 | 			this.del();
 76 | 		});
 77 | }
 78 | 
 79 | function onload_1()
 80 | {
 81 | 	jc.start(idCanvas, true);
 82 | 	interval_1 = setInterval(startShow, 200);
 83 | }
 84 | 
 85 | function start_1(idCanvas)
 86 | {
 87 | 	if(interval_1)return;
 88 | 	onload_1();
 89 | }
 90 | 
 91 | function stop_1(idCanvas)
 92 | {
 93 | 	clearInterval(interval_1);
 94 | 	interval_1 = 0;
 95 | 	jc.clear(idCanvas);
 96 | }

97 |

98 |

99 |

100 |

View of example 101 |

102 | 103 |

104 |

105 |

106 |

107 |

108 |

109 | 142 |

143 | 144 |

145 |

146 |

147 |

148 |

149 | 150 | -------------------------------------------------------------------------------- /compile/test1.js: -------------------------------------------------------------------------------- 1 | function init(idCanvas) { 2 | 3 | /////////// ALEX, YOU WILL NORMALLY IGNORE THIS PART, AND GO TO THE ANIMATION SECTION ///////// 4 | 5 | //++++++++++++++++++++++ VARS +++++++++++++++++++++++++ 6 | 7 | // POSITION-RELATED: appearance, etc. 8 | //puesto 9 | var pBisel = 8; // puestoBisel: dist entre orilla d cuadro y luz d cuadro 10 | var pW = 120, pH = 85, pX = 190, pY = 150;// puestoWidth... 11 | var pColor = "#E21950"; 12 | var pColorLuz = "#EE9090"; //luz = brillo 13 | var pColorSombra = "#000000"; 14 | var tNomb = "Name of Person"; //textoNomb 15 | var tNombEstilo = "bold 11px Arial"; //en ese orden 16 | var tNombColor = "#000000"; 17 | var tPos = "Name of Position"; //HERE MULTI-LINE TEXT WOULD BE HANDY :) 18 | var tPosEstilo = "bold 12px Arial"; 19 | var tPosColor = "#ffffff"; 20 | 21 | //ORG CHART RELATED 22 | //var dX = 150; //delta x: distance between position boxes 23 | //var c = [[0,0],[-dX,dX],[dX,dX]]; //c = coordinates (relative distance from top position) 24 | 25 | //++++++++++++++++++++++ CREACION GRAFICA +++++++++++++++++++++++++ 26 | 27 | jc.start(idCanvas,20); 28 | 29 | // gradiente luz p todos puestos 30 | var pGradLuz=[[0,'rgba(255,255,255,.75)'],[0.2,pColorLuz],[0.5,'rgba(255,255,255,0)']]; 31 | jc.lGradient(0,pY,2,pY+pH,pGradLuz).id('luz'); 32 | 33 | // crear n puestos 34 | for (var counter=0; counter < 4; counter++) { 35 | 36 | // cuadro puesto 37 | jc.rect(pX,pY,pW,pH,pColor,1) 38 | .name('puesto'+counter) 39 | .layer('layer'+counter) 40 | .shadow({x:5,y:5,blur:8,color:pColorSombra}); 41 | 42 | // cuadro luz puesto 43 | jc.rect(pX+pBisel/2,pY+pBisel/2,pW-pBisel,pH-pBisel,jc('#luz'),1) 44 | .name('puesto'+counter) 45 | .layer('layer'+counter) 46 | .click( function() {abreDetalle()}); 47 | 48 | // crear nombre 49 | jc.text(tNomb, pX+pW/2, pY+pH*.33, tNombColor).align('left').font(tNombEstilo) 50 | .name('puesto'+counter) 51 | .layer('layer'+counter); 52 | 53 | // crear posiC (nomb d puesto) 54 | // HERE MULTI-LINE TEXT WOULD BE HANDY :) 55 | jc.text(tPos, pX+pW/2, pY+pH*.66, tPosColor).align('right').font(tPosEstilo) 56 | .name('puesto'+counter) 57 | .layer('layer'+counter); 58 | 59 | //var iX = c[counter][0]; iY = c[counter][1] 60 | 61 | /////////////////// ANIMATION SECTION - inside a loop ///////////////// 62 | 63 | //++++++++++++++++++++++ animacion +++++++++++++++++++++++++ 64 | 65 | switch (counter){ 66 | case 0: 67 | jc('.puesto'+counter) 68 | .translateTo(50,50,2000); 69 | break 70 | case 1: 71 | jc('.puesto'+counter) 72 | .scale(1.5,1.5,2000); 73 | break 74 | 75 | // WITH LAYERS 76 | case 2: 77 | jc.layer('layer'+counter) 78 | .translateTo(50,350,2000); 79 | break 80 | case 3: 81 | jc.layer('layer'+counter) 82 | .scale(1.5,1.5,2000) 83 | .translate(100,150); //to be visible 84 | break 85 | } 86 | // FOR ROTATE, USE stop BUTTON !!! 87 | }; 88 | 89 | } 90 | 91 | function abreDetalle() { 92 | // irrelevant, however, multi-line text is key here :( 93 | } 94 | 95 | function start1(idCanvas) { 96 | jc.clear(idCanvas); 97 | init(idCanvas); 98 | } 99 | 100 | function stop1(idCanvas) { 101 | jc('.puesto0') 102 | .rotate(30,'center'); 103 | jc('.puesto1') 104 | .rotate(30,'center'); 105 | // LAYERS 106 | jc.layer('layer2') 107 | .rotate(30,'center'); 108 | jc.layer('layer3') 109 | .rotate(30,'center'); 110 | 111 | } -------------------------------------------------------------------------------- /compile/test2.js: -------------------------------------------------------------------------------- 1 | function init(idCanvas) { 2 | 3 | /////////// ALEX, YOU WILL NORMALLY IGNORE THIS PART, AND GO TO THE ANIMATION SECTION ///////// 4 | 5 | //++++++++++++++++++++++ VARS +++++++++++++++++++++++++ 6 | 7 | // POSITION-RELATED: appearance, etc. 8 | //puesto 9 | var pBisel = 8; // puestoBisel: dist entre orilla d cuadro y luz d cuadro 10 | var pW = 120, pH = 85, pX = 190, pY = 150;// puestoWidth... 11 | var pColor = "#E21950"; 12 | var pColorLuz = "#EE9090"; //luz = brillo 13 | var pColorSombra = "#000000"; 14 | var tNomb = "Name of Person"; //textoNomb 15 | var tNombEstilo = "bold 11px Arial"; //en ese orden 16 | var tNombColor = "#000000"; 17 | var tPos = "Name of Position"; //HERE MULTI-LINE TEXT WOULD BE HANDY :) 18 | var tPosEstilo = "bold 12px Arial"; 19 | var tPosColor = "#ffffff"; 20 | 21 | //ORG CHART RELATED 22 | var dX = 150; //delta x: distance between position boxes 23 | var c = [[0,0],[-dX,dX],[dX,dX]]; //c = coordinates (relative distance from top position) 24 | 25 | //++++++++++++++++++++++ CREACION GRAFICA +++++++++++++++++++++++++ 26 | 27 | jc.start(idCanvas,20); 28 | 29 | // gradiente luz p todos puestos 30 | var pGradLuz=[[0,'rgba(255,255,255,.75)'],[0.2,pColorLuz],[0.5,'rgba(255,255,255,0)']]; 31 | jc.lGradient(0,pY,2,pY+pH,pGradLuz).id('luz'); 32 | 33 | // crear n puestos 34 | for (var counter=0; counter < 3; counter++) { 35 | 36 | // cuadro puesto 37 | jc.rect(pX,pY,pW,pH,pColor,1) 38 | .name('puesto'+counter) 39 | .layer('layer'+counter) 40 | .shadow({x:5,y:5,blur:8,color:pColorSombra}); 41 | 42 | // cuadro luz puesto 43 | jc.rect(pX+pBisel/2,pY+pBisel/2,pW-pBisel,pH-pBisel,jc('#luz'),1) 44 | .name('puesto'+counter) 45 | .layer('layer'+counter) 46 | .click( function() {abreDetalle()}); 47 | 48 | // crear nombre 49 | jc.text(tNomb, pX+pW/2, pY+pH*.33, tNombColor).align('center').font(tNombEstilo) 50 | .name('puesto'+counter) 51 | .layer('layer'+counter); 52 | 53 | // crear posiC (nomb d puesto) 54 | // HERE MULTI-LINE TEXT WOULD BE HANDY :) 55 | jc.text(tPos, pX+pW/2, pY+pH*.66, tPosColor).align('center').font(tPosEstilo) 56 | .name('puesto'+counter) 57 | .layer('layer'+counter); 58 | 59 | //var iX = c[counter][0]; iY = c[counter][1] 60 | 61 | /////////////////// ANIMATION SECTION - inside a loop ///////////////// 62 | 63 | //++++++++++++++++++++++ animacion +++++++++++++++++++++++++ 64 | 65 | jc('.puesto'+counter) 66 | .translate(c[counter][0],c[counter][1],1000) 67 | // NOW CHECK YOUR CPU USAGE. EVERY ITERATION INCREASES IT. MINE IS AT 60% !! 68 | }; 69 | 70 | } 71 | 72 | function abreDetalle() { 73 | // irrelevant, however, multi-line text is key here :( 74 | } 75 | 76 | function start1(idCanvas) { 77 | jc.clear(idCanvas); 78 | init(idCanvas); 79 | } 80 | 81 | function stop1(idCanvas) { 82 | 83 | } -------------------------------------------------------------------------------- /compile/test3.js: -------------------------------------------------------------------------------- 1 | function init(idCanvas) { 2 | 3 | /////////// ALEX, YOU WILL NORMALLY IGNORE THIS PART, AND GO TO THE ANIMATION SECTION ///////// 4 | 5 | //++++++++++++++++++++++ VARS +++++++++++++++++++++++++ 6 | 7 | // POSITION-RELATED: appearance, etc. 8 | //puesto 9 | var pBisel = 8; // puestoBisel: dist entre orilla d cuadro y luz d cuadro 10 | var pW = 120, pH = 85, pX = 190, pY = 150;// puestoWidth... 11 | var pColor = "#E21950"; 12 | var pColorLuz = "#EE9090"; //luz = brillo 13 | var pColorSombra = "#000000"; 14 | var tNomb = "Name of Person"; //textoNomb 15 | var tNombEstilo = "bold 11px Arial"; //en ese orden 16 | var tNombColor = "#000000"; 17 | var tPos = "Name of Position"; //HERE MULTI-LINE TEXT WOULD BE HANDY :) 18 | var tPosEstilo = "bold 12px Arial"; 19 | var tPosColor = "#ffffff"; 20 | 21 | //ORG CHART RELATED 22 | var dX = 150; //delta x: distance between position boxes 23 | var c = [[0,0],[-dX,dX],[dX,dX]]; //c = coordinates (relative distance from top position) 24 | var iX, iY; 25 | 26 | //++++++++++++++++++++++ CREACION GRAFICA +++++++++++++++++++++++++ 27 | 28 | jc.start(idCanvas,20); 29 | 30 | // gradiente luz p todos puestos 31 | var pGradLuz=[[0,'rgba(255,255,255,.75)'],[0.2,pColorLuz],[0.5,'rgba(255,255,255,0)']]; 32 | jc.lGradient(0,pY,2,pY+pH,pGradLuz).id('luz'); 33 | 34 | // crear n puestos 35 | for (var counter=0; counter < 3; counter++) { 36 | 37 | // cuadro puesto 38 | jc.rect(pX,pY,pW,pH,pColor,1) 39 | .name('puesto'+counter) 40 | .layer('layer'+counter) 41 | .shadow({x:5,y:5,blur:8,color:pColorSombra}); 42 | 43 | // cuadro luz puesto 44 | jc.rect(pX+pBisel/2,pY+pBisel/2,pW-pBisel,pH-pBisel,jc('#luz'),1) 45 | .name('puesto'+counter) 46 | .layer('layer'+counter) 47 | .click( function() {abreDetalle()}); 48 | 49 | // crear nombre 50 | jc.text(tNomb, pX+pW/2, pY+pH*.33, tNombColor).align('center').font(tNombEstilo) 51 | .name('puesto'+counter) 52 | .layer('layer'+counter); 53 | 54 | // crear posiC (nomb d puesto) 55 | // HERE MULTI-LINE TEXT WOULD BE HANDY :) 56 | jc.text(tPos, pX+pW/2, pY+pH*.66, tPosColor).align('center').font(tPosEstilo) 57 | .name('puesto'+counter) 58 | .layer('layer'+counter); 59 | 60 | /////////////////// ANIMATION SECTION - inside a loop ///////////////// 61 | 62 | //++++++++++++++++++++++ animacion +++++++++++++++++++++++++ 63 | 64 | iX = c[counter][0]; iY = c[counter][1] 65 | console.log('before queue (iX,iY): '+iX+','+iY); 66 | 67 | jc('.puesto'+counter) 68 | .queue( 69 | function(){ 70 | this.fadeTo(0.5,1000) 71 | }, 72 | 73 | //maybe I'm missing some programming background here. 74 | 75 | function(){ // )(iX, iY){ 76 | console.log('inside queue (iX,iY): '+iX+','+iY); 77 | //console.log('inside queue c[,]]: '+c[counter][0]+','+c[counter][1]); 78 | 79 | this.translate(iX,iY,1000) //the 3 groups move to the same place 80 | //this.translate(c[counter][0],c[counter][1],1000) 81 | } 82 | ); 83 | }; 84 | 85 | } 86 | 87 | function abreDetalle() { 88 | // irrelevant, however, multi-line text is key here :( 89 | } 90 | 91 | function start1(idCanvas) { 92 | jc.clear(idCanvas); 93 | init(idCanvas); 94 | } 95 | 96 | function stop1(idCanvas) { 97 | 98 | } -------------------------------------------------------------------------------- /jCanvaScript.1.5.18.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * jCanvaScript JavaScript Library v 1.5.18 3 | * http://jcscript.com/ 4 | * 5 | * Copyright 2012, Alexander Savin 6 | * Dual licensed under the MIT or GPL Version 2 licenses. 7 | */ 8 | (function (window, undefined) { 9 | var canvases = [], 10 | m = Math, 11 | m_pi = m.PI, 12 | pi2 = m_pi * 2, 13 | lastCanvas = 0, lastLayer = 0, 14 | underMouse = false, 15 | underMouseLayer = false, 16 | regHasLetters = /[A-z]+?/, 17 | regNumsWithMeasure = /\d.\w\w/, 18 | FireFox = window.navigator.userAgent.match(/Firefox\/\w+\.\w+/i), 19 | radian = 180 / m_pi, 20 | m_max = m.max, 21 | m_min = m.min, 22 | m_cos = m.cos, 23 | m_sin = m.sin, 24 | m_floor = m.floor, 25 | m_round = m.round, 26 | m_abs = m.abs, 27 | m_pow = m.pow, 28 | m_sqrt = m.sqrt, 29 | fps = 1000 / 60, 30 | requestAnimFrame = (function () { 31 | return window.requestAnimationFrame || 32 | window.webkitRequestAnimationFrame || 33 | window.mozRequestAnimationFrame || 34 | window.oRequestAnimationFrame || 35 | window.msRequestAnimationFrame || 36 | function (callback, element) { 37 | return setTimeout(callback, fps); 38 | } 39 | })(), 40 | cancelRequestAnimFrame = (function () { 41 | return window.cancelAnimationFrame || 42 | window.webkitCancelRequestAnimationFrame || 43 | window.mozCancelRequestAnimationFrame || 44 | window.oCancelRequestAnimationFrame || 45 | window.msCancelRequestAnimationFrame || 46 | clearTimeout 47 | })(); 48 | if (FireFox != "" && FireFox !== null) 49 | var FireFox_lt_7 = (parseInt(FireFox[0].split(/[ \/\.]/i)[1]) < 7); 50 | 51 | function findById(i, j, stroke) { 52 | var objs = canvases[i].layers[j].objs, 53 | grdntsnptrns = canvases[i].layers[j].grdntsnptrns, 54 | objsLength = objs.length, 55 | grdntsnptrnsLength = grdntsnptrns.length; 56 | stroke = stroke.slice(1); 57 | for (var k = 0; k < objsLength; k++) 58 | if (objs[k].optns.id == stroke)return objs[k]; 59 | for (k = 0; k < grdntsnptrnsLength; k++) 60 | if (grdntsnptrns[k].optns.id == stroke)return grdntsnptrns[k]; 61 | return false; 62 | } 63 | 64 | function findByName(i, j, myGroup, stroke) { 65 | var objs = canvases[i].layers[j].objs, 66 | grdntsnptrns = canvases[i].layers[j].grdntsnptrns, 67 | strokes = stroke.slice(1).split('.'); 68 | findByNames(myGroup, strokes, objs); 69 | findByNames(myGroup, strokes, grdntsnptrns); 70 | return myGroup; 71 | function findByNames(myGroup, strokes, objs){ 72 | var objsLength = objs.length, 73 | names, l, k, m; 74 | for (k = 0; k < objsLength; k++) { 75 | names = objs[k]._name.split(' '); 76 | if(strokes.length > names.length){ 77 | continue; 78 | } 79 | var strokesClone = strokes.concat(); 80 | for(l = 0; l < names.length; l++){ 81 | for(m = 0; m < strokesClone.length; m++){ 82 | if (names[l] === strokesClone[m]) { 83 | strokesClone.splice(m, 1); 84 | m--; 85 | continue; 86 | } 87 | } 88 | if(!strokesClone.length){ 89 | myGroup.elements.push(objs[k]); 90 | break; 91 | } 92 | } 93 | } 94 | } 95 | } 96 | 97 | function findByCanvasAndLayer(i, j, myGroup) { 98 | var objs = canvases[i].layers[j].objs, 99 | grdntsnptrns = canvases[i].layers[j].grdntsnptrns, 100 | objsLength = objs.length, 101 | grdntsnptrnsLength = grdntsnptrns.length; 102 | for (var k = 0; k < objsLength; k++) 103 | myGroup.elements.push(objs[k]); 104 | for (k = 0; k < grdntsnptrnsLength; k++) 105 | myGroup.elements.push(grdntsnptrns[k]); 106 | return myGroup; 107 | } 108 | 109 | var jCanvaScript = function (stroke, map) { 110 | if (stroke === undefined)return this; 111 | if (typeof stroke == 'object') { 112 | map = stroke; 113 | stroke = undefined; 114 | } 115 | var canvasNumber = -1, layerNumber = -1, limitC = canvases.length, myGroup = group(), i, j, canvas, layer, layers, element, limitL; 116 | if (map === undefined) { 117 | if (stroke.charAt(0) === '#') { 118 | for (i = 0; i < limitC; i++) { 119 | limitL = canvases[i].layers.length; 120 | for (j = 0; j < limitL; j++) { 121 | element = findById(i, j, stroke); 122 | if (element)return element; 123 | } 124 | } 125 | } 126 | if (stroke.charAt(0) === '.') { 127 | for (i = 0; i < limitC; i++) { 128 | limitL = canvases[i].layers.length; 129 | for (j = 0; j < limitL; j++) 130 | myGroup = findByName(i, j, myGroup, stroke); 131 | } 132 | } 133 | } 134 | else { 135 | if (map.canvas !== undefined) { 136 | for (i = 0; i < limitC; i++) 137 | if (canvases[i].optns.id == map.canvas) { 138 | canvasNumber = i; 139 | canvas = canvases[i]; 140 | break; 141 | } 142 | } 143 | if (map.layer !== undefined) { 144 | if (canvasNumber != -1) { 145 | limitL = canvas.layers.length; 146 | for (i = 0; i < limitL; i++) 147 | if (canvas.layers[i].optns.id == map.layer) { 148 | layerNumber = i; 149 | layer = canvas.layers[i]; 150 | break; 151 | } 152 | } 153 | else { 154 | for (i = 0; i < limitC; i++) { 155 | layers = canvases[i].layers; 156 | limitL = layers.length; 157 | for (j = 0; j < limitL; j++) { 158 | if (layers[j].optns.id == map.layer) { 159 | canvasNumber = i; 160 | layerNumber = j; 161 | canvas = canvases[i] 162 | layer = canvas.layers[j]; 163 | break; 164 | } 165 | } 166 | if (layer > -1)break; 167 | } 168 | } 169 | } 170 | if (layerNumber < 0 && canvasNumber < 0)return group(); 171 | if (layerNumber < 0) { 172 | layers = canvas.layers; 173 | limitL = layers.length; 174 | if (stroke === undefined) { 175 | for (j = 0; j < limitL; j++) 176 | myGroup = findByCanvasAndLayer(canvasNumber, j, myGroup); 177 | } 178 | else if (stroke.charAt(0) === '#') { 179 | for (j = 0; j < limitL; j++) { 180 | element = findById(canvasNumber, j, stroke); 181 | if (element)return element; 182 | } 183 | } 184 | else if (stroke.charAt(0) === '.') { 185 | for (j = 0; j < limitL; j++) 186 | myGroup = findByName(canvasNumber, j, myGroup, stroke); 187 | } 188 | } 189 | else { 190 | if (stroke === undefined) { 191 | myGroup = findByCanvasAndLayer(canvasNumber, layerNumber, myGroup); 192 | } 193 | if (stroke.charAt(0) === '#') { 194 | return findById(canvasNumber, layerNumber, stroke); 195 | } 196 | if (stroke.charAt(0) === '.') { 197 | myGroup = findByName(canvasNumber, layerNumber, myGroup, stroke) 198 | } 199 | } 200 | } 201 | if (map !== undefined) 202 | if (map.attrs !== undefined || map.fns !== undefined) 203 | return myGroup.find(map); 204 | if (myGroup.elements.length)return myGroup; 205 | return group(); 206 | } 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | window.jCanvaScript = window.jc = jCanvaScript; 216 | })(window, undefined); 217 | -------------------------------------------------------------------------------- /myPackager.exe: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apsavin/jCanvaScript/165a6e5c13eb6e02dd8a857ec002f864775c91f5/myPackager.exe -------------------------------------------------------------------------------- /objects/gradientsAndPatterns.js: -------------------------------------------------------------------------------- 1 | 2 | jCanvaScript.pattern = function(img,type) 3 | { 4 | var pattern = new proto.pattern; 5 | return pattern.base(img,type); 6 | } 7 | 8 | jCanvaScript.lGradient=function(x1,y1,x2,y2,colors) 9 | { 10 | var lGrad = new proto.lGradient; 11 | return lGrad.base(x1,y1,x2,y2,colors); 12 | } 13 | jCanvaScript.rGradient=function(x1,y1,r1,x2,y2,r2,colors) 14 | { 15 | var rGrad = new proto.rGradient; 16 | return rGrad.base(x1,y1,r1,x2,y2,r2,colors); 17 | } -------------------------------------------------------------------------------- /objects/lines.js: -------------------------------------------------------------------------------- 1 | jCanvaScript.line=function(points,color,fill) 2 | { 3 | var line = new proto.line; 4 | return line.base(points,color,fill); 5 | } 6 | jCanvaScript.qCurve=function(points,color,fill) 7 | { 8 | var qCurve = new proto.qCurve; 9 | return qCurve.base(points,color,fill); 10 | } 11 | jCanvaScript.bCurve=function(points,color,fill) 12 | { 13 | var bCurve = new proto.bCurve; 14 | return bCurve.base(points,color,fill); 15 | } -------------------------------------------------------------------------------- /objects/rasters.js: -------------------------------------------------------------------------------- 1 | jCanvaScript.imageData=function(width,height) 2 | { 3 | var imageData=new proto.imageData; 4 | return imageData.base(width,height); 5 | } 6 | jCanvaScript.image=function(img,x,y,width,height,sx,sy,swidth,sheight) 7 | { 8 | var image=new proto.image; 9 | return image.base(img,x,y,width,height,sx,sy,swidth,sheight); 10 | } -------------------------------------------------------------------------------- /objects/shapes.js: -------------------------------------------------------------------------------- 1 | jCanvaScript.circle=function(x,y,radius,color,fill) 2 | { 3 | var circle=new proto.circle; 4 | return circle.base(x,y,radius,color,fill); 5 | } 6 | jCanvaScript.rect=function(x,y,width,height,color,fill) 7 | { 8 | var rect = new proto.rect; 9 | return rect.base(x,y,width,height,color,fill); 10 | } 11 | jCanvaScript.arc=function(x,y,radius,startAngle,endAngle,anticlockwise,color,fill) 12 | { 13 | var arc=new proto.arc; 14 | return arc.base(x,y,radius,startAngle,endAngle,anticlockwise,color,fill); 15 | } 16 | jCanvaScript.text = function(string,x,y,maxWidth,color,fill) 17 | { 18 | var text=new proto.text; 19 | return text.base(string,x,y,maxWidth,color,fill); 20 | } -------------------------------------------------------------------------------- /privateFunctions/private.js: -------------------------------------------------------------------------------- 1 | function changeMatrix(object) 2 | { 3 | var optns=object.optns; 4 | object.matrix(multiplyM(multiplyM(multiplyM(optns.transformMatrix,optns.translateMatrix),optns.scaleMatrix),optns.rotateMatrix)); 5 | redraw(object); 6 | } 7 | function checkDefaults(check,def) 8 | { 9 | for(var key in def) 10 | { 11 | if(check[key]===undefined)check[key]=def[key]; 12 | } 13 | return check; 14 | } 15 | 16 | function redraw(object) 17 | { 18 | objectCanvas(object).optns.redraw=1; 19 | } 20 | 21 | function animating(canvasOptns) 22 | { 23 | var timeDiff=canvasOptns.timeDiff, 24 | progress=1; 25 | for(var q=0;q0.5); 34 | queue['step']+=timeDiff; 35 | progress=step/duration; 36 | for(var key in queue) 37 | { 38 | if(this[key]!==undefined && queue[key]) 39 | { 40 | var property=queue[key], 41 | to=property['to'], 42 | from=property['from']; 43 | animateTransforms(key,this,queue); 44 | if(easingIn)this[key]=(to-from)*animateFunctions[easing['fn']](progress,easing)+from; 45 | if(easingOut)this[key]=(to-from)*(1-animateFunctions[easing['fn']](1-progress,easing))+from; 46 | if(onstep)onstep.fn.call(this,onstep); 47 | if(step>=duration) 48 | { 49 | this[key]=to; 50 | animateTransforms(key,this,queue); 51 | queue[key]=false; 52 | queue.animateKeyCount--; 53 | if(!queue.animateKeyCount) 54 | { 55 | if(queue.animateFn)queue.animateFn.apply(this); 56 | this.animateQueue.splice(q,1); 57 | q--; 58 | } 59 | } 60 | } 61 | } 62 | } 63 | if (this.animateQueue.length)redraw(this); 64 | else this.optns.animated=false; 65 | return this; 66 | } 67 | function animateTransforms(key,object,queue) 68 | { 69 | var val=object[key]; 70 | var prev=queue[key]['prev']; 71 | switch(key) 72 | { 73 | case '_rotateAngle': 74 | object.rotate(val-prev,object._rotateX,object._rotateY); 75 | break; 76 | case '_translateX': 77 | object.translate(val-prev,0); 78 | break; 79 | case '_translateY': 80 | object.translate(0,val-prev); 81 | break; 82 | case '_translateToX': 83 | object.translateTo(val,undefined); 84 | break; 85 | case '_translateToY': 86 | object.translateTo(undefined,val); 87 | break; 88 | case '_scaleX': 89 | if(!prev)prev=1; 90 | object.scale(val/prev,1); 91 | break; 92 | case '_scaleY': 93 | if(!prev)prev=1; 94 | object.scale(1,val/prev); 95 | break; 96 | default: 97 | return; 98 | } 99 | queue[key]['prev']=val; 100 | } 101 | function keyEvent(e,key,optns) 102 | { 103 | e=e||window.event; 104 | optns[key].event=e; 105 | optns[key].code=e.charCode||e.keyCode; 106 | optns[key].val=true; 107 | optns.redraw=1; 108 | } 109 | function mouseEvent(e,key,optns) 110 | { 111 | if(!optns[key].val)return; 112 | e=e||window.event; 113 | var point= { 114 | pageX:e.pageX||e.clientX, 115 | pageY:e.pageY||e.clientY 116 | }; 117 | optns[key].event=e; 118 | optns[key].x=point.pageX - optns.x; 119 | optns[key].y=point.pageY - optns.y; 120 | optns.redraw=1; 121 | } 122 | function setMouseEvent(fn,eventName) 123 | { 124 | if(fn===undefined)this['on'+eventName](); 125 | else this['on'+eventName] = fn; 126 | if(eventName=='mouseover'||eventName=='mouseout')eventName='mousemove'; 127 | objectCanvas(this).optns[eventName].val=true; 128 | return this; 129 | } 130 | function setKeyEvent(fn,eventName) 131 | { 132 | if(fn===undefined)this[eventName](); 133 | else this[eventName] = fn; 134 | return this; 135 | } 136 | var animateFunctions={ 137 | linear:function(progress,params){ 138 | return progress; 139 | }, 140 | exp:function(progress,params){ 141 | var n=params.n||2; 142 | return m_pow(progress,n); 143 | }, 144 | circ:function(progress,params){ 145 | return 1 - m_sqrt(1-progress*progress); 146 | }, 147 | sine:function(progress,params){ 148 | return 1 - m_sin((1 - progress) * m_pi/2); 149 | }, 150 | back:function(progress,params){ 151 | var n=params.n||2; 152 | var x=params.x||1.5; 153 | return m_pow(progress, n) * ((x + 1) * progress - x); 154 | }, 155 | elastic:function(progress,params){ 156 | var n=params.n||2; 157 | var m=params.m||20; 158 | var k=params.k||3; 159 | var x=params.x||1.5; 160 | return m_pow(n,10 * (progress - 1)) * m_cos(m * progress * m_pi * x / k); 161 | }, 162 | bounce:function(progress,params) 163 | { 164 | var n=params.n||4; 165 | var b=params.b||0.25; 166 | var sum = [1]; 167 | for(var i=1; i= (i>0 ? 2*sum[i-1]-1 : 0) && x*progress <= 2*sum[i]-1) 172 | return m_pow(x*(progress-(2*sum[i]-1-m_pow(b, i/2))/x), 2)+1-m_pow(b, i); 173 | } 174 | return 1; 175 | } 176 | }, 177 | imageDataFilters={ 178 | color:{fn:function(width,height,matrix,type){ 179 | var old,i,j; 180 | matrix=matrix[type]; 181 | for(i=0;i255?255:old[matrix[0]]; 189 | this.setPixel(i,j,old); 190 | } 191 | },matrix: 192 | { 193 | red:[0,1,2], 194 | green:[1,0,2], 195 | blue:[2,0,1] 196 | }}, 197 | linear:{fn:function(width,height,matrix,type){ 198 | var newMatrix=[],old,i,j,k,m,n; 199 | matrix=matrix[type]; 200 | m=matrix.length; 201 | n=matrix[0].length; 202 | for(i=0;icoords[i][0])minX=coords[i][0]; 269 | if(minY>coords[i][1])minY=coords[i][1]; 270 | } 271 | return {x:minX,y:minY,width:maxX-minX,height:maxY-minY}; 272 | } 273 | function getCenter(object,point,type) 274 | { 275 | if(type=='poor')return point; 276 | return multiplyPointM(point.x,point.y,multiplyM(object.matrix(),objectLayer(object).matrix())); 277 | } 278 | function parseColor(color) 279 | { 280 | var colorKeeper={ 281 | color:{ 282 | val:color, 283 | notColor:undefined 284 | }, 285 | r:0, 286 | g:0, 287 | b:0, 288 | a:1}; 289 | if(color.id!==undefined) 290 | { 291 | colorKeeper.color.notColor={ 292 | level:color._level, 293 | canvas:color.optns.canvas.number, 294 | layer:color.optns.layer.number 295 | } 296 | return colorKeeper; 297 | } 298 | if(color.r!==undefined) 299 | { 300 | colorKeeper=checkDefaults(color,{r:0,g:0,b:0,a:1}); 301 | colorKeeper.color={ 302 | val:'rgba('+colorKeeper.r+','+colorKeeper.g+','+colorKeeper.b+','+colorKeeper.a+')', 303 | notColor:undefined 304 | } 305 | return colorKeeper; 306 | } 307 | if(color.charAt(0)=='#') 308 | { 309 | if (color.length > 4) { 310 | colorKeeper.r = parseInt(color.substr(1, 2), 16); 311 | colorKeeper.g = parseInt(color.substr(3, 2), 16); 312 | colorKeeper.b = parseInt(color.substr(5, 2), 16); 313 | } 314 | else { 315 | var r = color.charAt(1), g = color.charAt(2), b = color.charAt(3); 316 | colorKeeper.r = parseInt(r + r, 16); 317 | colorKeeper.g = parseInt(g + g, 16); 318 | colorKeeper.b = parseInt(b + b, 16); 319 | } 320 | } 321 | else 322 | { 323 | var arr=color.split(','); 324 | if(arr.length==4) 325 | { 326 | var colorR = arr[0].split('('); 327 | var alpha = arr[3].split(')'); 328 | colorKeeper.r=parseInt(colorR[1]); 329 | colorKeeper.g=parseInt(arr[1]); 330 | colorKeeper.b=parseInt(arr[2]); 331 | colorKeeper.a=parseFloat(alpha[0]); 332 | } 333 | if(arr.length==3) 334 | { 335 | colorR = arr[0].split('('); 336 | var colorB = arr[2].split(')'); 337 | colorKeeper.r=parseInt(colorR[1]); 338 | colorKeeper.g=parseInt(arr[1]); 339 | colorKeeper.b=parseInt(colorB[0]); 340 | } 341 | } 342 | colorKeeper.color.notColor = undefined; 343 | return colorKeeper; 344 | } 345 | function getOffset(elem) { 346 | if (elem.getBoundingClientRect) { 347 | return getOffsetRect(elem) 348 | } else { 349 | return getOffsetSum(elem) 350 | } 351 | } 352 | 353 | function getOffsetSum(elem) { 354 | var top=0, left=0 355 | while(elem) { 356 | top = top + parseInt(elem.offsetTop) 357 | left = left + parseInt(elem.offsetLeft) 358 | elem = elem.offsetParent 359 | } 360 | return { 361 | top: top, 362 | left: left 363 | } 364 | } 365 | 366 | function getOffsetRect(elem) { 367 | var box = elem.getBoundingClientRect() 368 | var body = document.body||{}; 369 | var docElem = document.documentElement 370 | var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop 371 | var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft 372 | var clientTop = docElem.clientTop || body.clientTop || 0 373 | var clientLeft = docElem.clientLeft || body.clientLeft || 0 374 | var top = box.top + scrollTop - clientTop 375 | var left = box.left + scrollLeft - clientLeft 376 | return { 377 | top: m_round(top), 378 | left: m_round(left) 379 | } 380 | } 381 | function checkEvents(object,optns) 382 | { 383 | checkMouseEvents(object,optns); 384 | checkKeyboardEvents(object,optns); 385 | } 386 | function checkKeyboardEvents(object,optns) 387 | { 388 | if(!object.optns.focused)return; 389 | if(optns.keyDown.val!=false)if(typeof object.onkeydown=='function')object.onkeydown(optns.keyDown); 390 | if(optns.keyUp.val!=false)if(typeof object.onkeyup=='function')object.onkeyup(optns.keyUp); 391 | if(optns.keyPress.val!=false)if(typeof object.onkeypress=='function')object.onkeypress(optns.keyPress); 392 | } 393 | function isPointInPath(object,x,y) 394 | { 395 | var point={}; 396 | var canvas=objectCanvas(object); 397 | var ctx=canvas.optns.ctx; 398 | var layer=canvas.layers[object.optns.layer.number]; 399 | point.x=x; 400 | point.y=y; 401 | if(FireFox_lt_7) 402 | { 403 | point=transformPoint(x,y,layer.matrix()); 404 | point=transformPoint(point.x,point.y,object.matrix()); 405 | } 406 | if(ctx.isPointInPath===undefined || object._img!==undefined || object._imgData!==undefined || object._proto=='text') 407 | { 408 | var rectangle=object.getRect('poor'); 409 | var poorPoint=transformPoint(x,y,multiplyM(object.matrix(),layer.matrix())); 410 | if(rectangle.x<=poorPoint.x && rectangle.y<=poorPoint.y && (rectangle.x+rectangle.width)>=poorPoint.x && (rectangle.y+rectangle.height)>=poorPoint.y)return point; 411 | } 412 | else 413 | { 414 | if(ctx.isPointInPath(point.x,point.y)){ 415 | return point; 416 | } 417 | } 418 | return false 419 | } 420 | function checkMouseEvents(object,optns) 421 | { 422 | var point=false, 423 | mm=optns.mousemove, 424 | md=optns.mousedown, 425 | mu=optns.mouseup, 426 | c=optns.click, 427 | dc=optns.dblclick, 428 | x=mm.x||md.x||mu.x||dc.x||c.x, 429 | y=mm.y||md.y||mu.y||dc.y||c.y; 430 | if(x!=false) 431 | { 432 | point=isPointInPath(object,x,y); 433 | } 434 | if(point) 435 | { 436 | 437 | if(mm.x!=false) 438 | mm.object=object; 439 | if(md.x!=false) 440 | md.objects[md.objects.length]=object; 441 | if(c.x!=false) 442 | c.objects[c.objects.length]=object; 443 | if(dc.x!=false) 444 | dc.objects[dc.objects.length]=object; 445 | if(mu.x!=false) 446 | mu.objects[mu.objects.length]=object; 447 | optns.point=point; 448 | } 449 | } 450 | 451 | function objectLayer(object) 452 | { 453 | return objectCanvas(object).layers[object.optns.layer.number]; 454 | } 455 | function objectCanvas(object) 456 | { 457 | return canvases[object.optns.canvas.number]; 458 | } 459 | function layer(idLayer,object,array) 460 | { 461 | redraw(object); 462 | var objectCanvas=object.optns.canvas; 463 | var objectLayer=object.optns.layer; 464 | if (idLayer===undefined)return objectLayer.id; 465 | if(objectLayer.id==idLayer)return object; 466 | var oldIndex={ 467 | i:objectCanvas.number, 468 | j:objectLayer.number 469 | }; 470 | objectLayer.id=idLayer; 471 | var newLayer=jCanvaScript.layer(idLayer); 472 | var newIndex={ 473 | i:newLayer.optns.canvas.number, 474 | j:newLayer.optns.number 475 | }; 476 | var oldArray=canvases[oldIndex.i].layers[oldIndex.j][array],newArray=canvases[newIndex.i].layers[newIndex.j][array]; 477 | oldArray.splice(object.optns.number,1); 478 | object._level=object.optns.number=newArray.length; 479 | newArray[object._level]=object; 480 | objectLayer.number=newIndex.j; 481 | objectCanvas.number=newIndex.i; 482 | objectCanvas.id=newLayer.optns.canvas.id; 483 | redraw(object); 484 | return object; 485 | } 486 | 487 | function take(f,s) { 488 | for(var key in s) 489 | { 490 | switch(typeof s[key]) 491 | { 492 | case 'function': 493 | if(key.substr(0,2)=='on')break; 494 | if(f[key]===undefined)f[key]=s[key]; 495 | break; 496 | case 'object': 497 | if(key=='optns' || key=='animateQueue')break; 498 | if(key=='objs' || key=='grdntsnptrns') 499 | { 500 | for(var i in s[key]) 501 | { 502 | if(s[key].hasOwnProperty(i)) 503 | s[key][i].clone().layer(f.optns.id); 504 | } 505 | break; 506 | } 507 | if(!s[key] || key==='ctx')continue; 508 | f[key]=typeof s[key].pop === 'function' ? []:{}; 509 | take(f[key],s[key]); 510 | break; 511 | default: 512 | if(key=='_level')break; 513 | f[key]=s[key]; 514 | } 515 | } 516 | } 517 | function canvas(idCanvas,object,array) 518 | { 519 | redraw(object); 520 | var objectCanvas=object.optns.canvas; 521 | var objectLayer=object.optns.layer; 522 | if(idCanvas===undefined)return canvases[objectCanvas.number].optns.id; 523 | if(canvases[objectCanvas.number].optns.id==idCanvas)return object; 524 | var oldIndex={ 525 | i:objectCanvas.number, 526 | j:objectLayer.number 527 | }; 528 | jCanvaScript.canvas(idCanvas); 529 | for(var i=0;ib._level)return 1; 574 | if(a._levelanimateQueueLength) 248 | { 249 | for (j=animateQueueLength;jduration) 254 | { 255 | duration=queue.duration; 256 | longFn=j; 257 | } 258 | break; 259 | } 260 | } 261 | if(duration){ 262 | queue=this.animateQueue[longFn]; 263 | if(queue.animateFn){ 264 | fn=queue.animateFn; 265 | queue.animateFn=function(){ 266 | fn.apply(this); 267 | this.queue.apply(this,args) 268 | } 269 | } 270 | else queue.animateFn=function(){this.queue.apply(this,args)}; 271 | break; 272 | } 273 | } 274 | } 275 | } 276 | } 277 | this.stop=function(jumpToEnd,runCallbacks) 278 | { 279 | this.optns.animated=false; 280 | if(runCallbacks===undefined)runCallbacks=false; 281 | if(jumpToEnd===undefined)jumpToEnd=false; 282 | for(var q=0;q1) 409 | { 410 | var queue=this.animateQueue[this.animateQueue.length]={animateKeyCount:0}; 411 | queue.animateFn=fn||false; 412 | this.optns.animated=true; 413 | queue.duration=duration; 414 | queue.step=0; 415 | queue.easing=easing; 416 | queue.onstep=onstep; 417 | } 418 | for(var key in options) 419 | { 420 | if(this['_'+key] !== undefined && options[key]!==undefined) 421 | { 422 | var keyValue=options[key],privateKey='_'+key; 423 | if(keyValue!=this[privateKey]) 424 | { 425 | if(keyValue.charAt) 426 | { 427 | if(key=='string')this._string=keyValue; 428 | else if(keyValue.charAt(1)=='=') 429 | { 430 | keyValue=this[privateKey]+parseInt(keyValue.charAt(0)+'1')*parseInt(keyValue.substr(2)); 431 | } 432 | else if(!regHasLetters.test(keyValue))keyValue=parseInt(keyValue); 433 | else this[privateKey]=keyValue; 434 | } 435 | if(duration==1)this[privateKey]=keyValue; 436 | else 437 | { 438 | queue[privateKey]={ 439 | from:this[privateKey], 440 | to:keyValue, 441 | prev:0 442 | } 443 | queue.animateKeyCount++; 444 | } 445 | } 446 | } 447 | } 448 | if(duration==1) 449 | { 450 | if(options['rotateAngle']) 451 | this.rotate(this._rotateAngle,this._rotateX,this._rotateY); 452 | if(options['translateX']||options['translateY']) 453 | this.translate(this._translateX,this._translateY); 454 | if(options['translateToX']||options['translateToY']) 455 | this.translate(this._translateToX,this._translateToY); 456 | if(options['scaleX']||options['scaleY']) 457 | this.scale(this._scaleX,this._scaleY); 458 | } 459 | redraw(this); 460 | return this; 461 | } 462 | this.matrix=function(m) 463 | { 464 | if(m===undefined)return [[this._transform11,this._transform21,this._transformdx],[this._transform12,this._transform22,this._transformdy]]; 465 | this._transform11=m[0][0]; 466 | this._transform21=m[0][1]; 467 | this._transform12=m[1][0]; 468 | this._transform22=m[1][1]; 469 | this._transformdx=m[0][2]; 470 | this._transformdy=m[1][2]; 471 | return this; 472 | } 473 | this.translateTo=function(newX,newY,duration,easing,onstep,fn) 474 | { 475 | if(duration!==undefined) 476 | return this.animate({translateTo:{x:newX,y:newY}},duration,easing,onstep,fn); 477 | var point=this.position(), 478 | x=0,y=0; 479 | if(newX!==undefined) 480 | x=newX-point.x; 481 | if(newY!==undefined) 482 | y=newY-point.y; 483 | return this.translate(x,y); 484 | } 485 | this.translate=function(x,y,duration,easing,onstep,fn) 486 | { 487 | if(duration!==undefined) 488 | return this.animate({translate:{x:x,y:y}},duration,easing,onstep,fn); 489 | this.optns.translateMatrix=multiplyM(this.optns.translateMatrix,[[1,0,x],[0,1,y]]); 490 | changeMatrix(this); 491 | return this; 492 | } 493 | this.scale=function(x,y,duration,easing,onstep,fn) 494 | { 495 | if(duration!==undefined) 496 | return this.animate({scale:{x:x,y:y}},duration,easing,onstep,fn); 497 | if(y===undefined)y=x; 498 | this.optns.scaleMatrix=multiplyM(this.optns.scaleMatrix,[[x,0,this._x*(1-x)],[0,y,this._y*(1-y)]]); 499 | changeMatrix(this); 500 | return this; 501 | } 502 | this.rotate=function(x,x1,y1,duration,easing,onstep,fn) 503 | { 504 | if(duration!==undefined) 505 | return this.animate({rotate:{angle:x,x:x1,y:y1}},duration,easing,onstep,fn); 506 | x=x/radian; 507 | var cos=m_cos(x), 508 | sin=m_sin(x), 509 | translateX=0, 510 | translateY=0; 511 | if(x1!==undefined) 512 | { 513 | if(x1=='center') 514 | { 515 | var point=this.getCenter('poor'); 516 | if(y1===undefined) 517 | { 518 | x1=point.x; 519 | y1=point.y; 520 | } 521 | else 522 | { 523 | x1=point.x+y1.x; 524 | y1=point.y+y1.y; 525 | } 526 | } 527 | translateX=-x1*(cos-1)+y1*sin; 528 | translateY=-y1*(cos-1)-x1*sin; 529 | } 530 | this.optns.rotateMatrix=multiplyM(this.optns.rotateMatrix,[[cos,-sin,translateX],[sin,cos,translateY]]); 531 | changeMatrix(this); 532 | return this; 533 | } 534 | this.transform=function(m11,m12,m21,m22,dx,dy,reset) 535 | { 536 | if(m11===undefined)return this.matrix(); 537 | var optns=this.optns; 538 | if(reset!==undefined) 539 | { 540 | optns.transformMatrix=[[m11,m21,dx],[m12,m22,dy]]; 541 | optns.rotateMatrix=[[1,0,0],[0,1,0]]; 542 | optns.scaleMatrix=[[1,0,0],[0,1,0]]; 543 | optns.translateMatrix=[[1,0,0],[0,1,0]]; 544 | } 545 | else 546 | { 547 | optns.transformMatrix=multiplyM(optns.transformMatrix,[[m11,m21,dx],[m12,m22,dy]]); 548 | } 549 | changeMatrix(this); 550 | return this; 551 | } 552 | this.beforeDraw=function(canvasOptns) 553 | { 554 | if(!this._visible)return false; 555 | var ctx=canvasOptns.ctx; 556 | ctx.save(); 557 | if(this.optns.clipObject) 558 | { 559 | var clipObject=this.optns.clipObject; 560 | clipObject._visible=true; 561 | if (clipObject.optns.animated)animating.call(clipObject,canvasOptns); 562 | clipObject.setOptns(ctx); 563 | ctx.beginPath(); 564 | clipObject.draw(ctx); 565 | ctx.clip(); 566 | } 567 | this.setOptns(ctx); 568 | if (this.optns.animated)animating.call(this,canvasOptns); 569 | ctx.beginPath(); 570 | return true; 571 | } 572 | this.clip=function(object) 573 | { 574 | if(object===undefined)return this.optns.clipObject; 575 | objectLayer(this).objs.splice(object.optns.number,1); 576 | this.optns.clipObject=object; 577 | return this; 578 | } 579 | this.afterDraw=function(optns) 580 | { 581 | optns.ctx.closePath(); 582 | checkEvents(this,optns); 583 | optns.ctx.restore(); 584 | if(this.optns.clipObject) 585 | { 586 | proto.shape.prototype.afterDraw.call(this.optns.clipObject,optns); 587 | } 588 | } 589 | this.isPointIn=function(x,y,global) 590 | { 591 | var canvasOptns=objectCanvas(this).optns, 592 | ctx=canvasOptns.ctx, 593 | thisAnimated=false, 594 | optns=this.optns, 595 | clipAnimated=false; 596 | if(global!==undefined) 597 | { 598 | x-=canvasOptns.x; 599 | y-=canvasOptns.y; 600 | } 601 | if(optns.animated)thisAnimated=true; 602 | optns.animated=false; 603 | if(optns.clipObject) 604 | { 605 | var clipObject=optns.clipObject, 606 | clipOptns=clipObject.optns; 607 | if(clipOptns.animated) 608 | { 609 | clipAnimated=true; 610 | clipOptns.animated=false; 611 | } 612 | } 613 | objectLayer(this).setOptns(ctx); 614 | this.beforeDraw(canvasOptns); 615 | this.draw(ctx); 616 | var point=isPointInPath(this,x,y); 617 | ctx.closePath(); 618 | ctx.restore(); 619 | ctx.setTransform(1,0,0,1,0,0); 620 | optns.animated=thisAnimated; 621 | if(clipAnimated) 622 | { 623 | clipOptns.animated=clipAnimated; 624 | } 625 | return point; 626 | } 627 | this.layer=function(idLayer) 628 | { 629 | return layer(idLayer,this,'objs'); 630 | } 631 | this.canvas=function(idCanvas) 632 | { 633 | return canvas(idCanvas,this,'objs'); 634 | } 635 | this.draggable=function(object,params,drag) 636 | { 637 | if(params===undefined && typeof object=='object' && object.optns===undefined) 638 | { 639 | params=object.params; 640 | drag=object.drag; 641 | var start=object.start, 642 | stop=object.stop, 643 | disabled=object.disabled; 644 | object=object.object; 645 | } 646 | var dragObj=this; 647 | var dragOptns=this.optns.drag; 648 | if(typeof params==='function') 649 | { 650 | drag=params; 651 | params=undefined; 652 | } 653 | if(typeof object=='function') 654 | { 655 | drag=object; 656 | object=undefined; 657 | } 658 | dragOptns.shiftX=0; 659 | dragOptns.shiftY=0; 660 | if(params!==undefined) 661 | { 662 | if(params.shiftX!==undefined){dragOptns.shiftX=params.shiftX;params.shiftX=undefined;} 663 | if(params.shiftY!==undefined){dragOptns.shiftY=params.shiftY;params.shiftY=undefined;} 664 | } 665 | if(object!==undefined) 666 | { 667 | if(object.id)dragObj=(params===undefined)? object.visible(false) : object.animate(params).visible(false); 668 | if(object=='clone') 669 | { 670 | dragObj=this.clone(params).visible(false); 671 | dragOptns.type='clone'; 672 | } 673 | } 674 | dragOptns.val=true; 675 | dragOptns.x=this._x; 676 | dragOptns.y=this._y; 677 | dragOptns.dx=this._transformdx; 678 | dragOptns.dy=this._transformdy; 679 | dragOptns.object=dragObj; 680 | dragOptns.params=params; 681 | dragOptns.drag=drag||false; 682 | dragOptns.start=start||false; 683 | dragOptns.stop=stop||false; 684 | dragOptns.disabled=disabled||false; 685 | var optns=objectCanvas(this).optns; 686 | optns.mousemove.val=true; 687 | optns.mousedown.val=true; 688 | optns.mouseup.val=true; 689 | return this; 690 | } 691 | this.droppable=function(fn) 692 | { 693 | this.optns.drop.val=true; 694 | if(fn!==undefined)this.optns.drop.fn=fn; 695 | return this; 696 | } 697 | this.name = function(name) 698 | { 699 | return this.attr('name',name); 700 | } 701 | this.hasName = function(name){ 702 | var namesArray = this.attr('name').split(' '), i = 0; 703 | while(i < namesArray.length){ 704 | if(namesArray[i] === name){ 705 | return true; 706 | } 707 | i++; 708 | } 709 | return false; 710 | } 711 | this.addName = function(name) 712 | { 713 | var namesArray = this.attr('name').split(' '), i = 0; 714 | while(i < namesArray.length){ 715 | if(namesArray[i] === name){ 716 | return this; 717 | } 718 | i++; 719 | } 720 | namesArray.push(name); 721 | return this.attr('name', namesArray.join(' ')); 722 | } 723 | this.removeName = function(name) 724 | { 725 | var namesArray = this.attr('name').split(' '), i = 0; 726 | while(i < namesArray.length){ 727 | if(namesArray[i] === name){ 728 | namesArray.splice(i, 1); 729 | return this.attr('name', namesArray.join(' ')); 730 | } 731 | i++; 732 | } 733 | return this; 734 | } 735 | this.visible=function(visibility) 736 | { 737 | return this.attr('visible',visibility); 738 | } 739 | this.composite=function(composite) 740 | { 741 | return this.attr('composite',composite); 742 | } 743 | this.id=function(id) 744 | { 745 | if(id===undefined)return this.optns.id; 746 | this.optns.id=id; 747 | return this; 748 | } 749 | this.opacity=function(n) 750 | { 751 | return this.attr('opacity',n); 752 | } 753 | this.fadeIn=function(duration,easing,onstep,fn) 754 | { 755 | return this.fadeTo(1,duration,easing,onstep,fn); 756 | } 757 | this.fadeOut=function(duration,easing,onstep,fn) 758 | { 759 | return this.fadeTo(0,duration,easing,onstep,fn); 760 | } 761 | this.fadeTo=function(val,duration,easing,onstep,fn) 762 | { 763 | if(duration===undefined)duration=600; 764 | return this.animate({opacity:val},duration,easing,onstep,fn); 765 | } 766 | this.fadeToggle=function(duration,easing,onstep,fn) 767 | { 768 | if(this._opacity) 769 | this.fadeOut(duration,easing,onstep,fn); 770 | else 771 | this.fadeIn(duration,easing,onstep,fn); 772 | return this; 773 | } 774 | this.instanceOf=function(name) 775 | { 776 | if(name===undefined)return this._proto; 777 | return this instanceof proto[name]; 778 | } 779 | this.base=function(x,y,service) 780 | { 781 | if(typeof x == 'object'){ 782 | x=checkDefaults(x,{x:0,y:0,service:false}); 783 | service=x.service; 784 | y=x.y; 785 | x=x.x; 786 | } 787 | else{if(service===undefined)service=false;} 788 | var canvasItem=canvases[lastCanvas]; 789 | this.optns={ 790 | animated:false, 791 | clipObject:false, 792 | drop:{val:false,fn:function(){}}, 793 | drag:{val:false}, 794 | layer:{id:canvasItem.optns.id+"Layer0",number:0}, 795 | canvas:{number:0}, 796 | focused:false, 797 | buffer:{val:false}, 798 | rotateMatrix:[[1,0,0],[0,1,0]], 799 | scaleMatrix:[[1,0,0],[0,1,0]], 800 | translateMatrix:[[1,0,0],[0,1,0]], 801 | transformMatrix:[[1,0,0],[0,1,0]] 802 | } 803 | this.animateQueue = []; 804 | this._x=x; 805 | this._y=y; 806 | if(service==false && canvasItem!==undefined && canvasItem.layers[0]!==undefined) 807 | { 808 | this.optns.layer.number=0; 809 | this.optns.canvas.number=lastCanvas; 810 | var layer=objectLayer(this), 811 | limit=layer.objs.length; 812 | this.optns.number=limit; 813 | this._level=limit?(layer.objs[limit-1]._level+1):0; 814 | layer.objs[limit]=this; 815 | this.optns.layer.id=layer.optns.id; 816 | redraw(this); 817 | } 818 | return this; 819 | } 820 | this._visible=true; 821 | this._composite='source-over'; 822 | this._name=""; 823 | this._opacity=1; 824 | this._shadowX=0; 825 | this._shadowY=0; 826 | this._shadowBlur= 0; 827 | this._shadowColor= 'rgba(0,0,0,0)'; 828 | this._shadowColorR= 0; 829 | this._shadowColorG= 0; 830 | this._shadowColorB= 0; 831 | this._shadowColorA= 0; 832 | this._shadowColorRPrev= 0; 833 | this._shadowColorGPrev= 0; 834 | this._shadowColorBPrev= 0; 835 | this._shadowColorAPrev= 0; 836 | this._translateX=0; 837 | this._translateY=0; 838 | this._scaleX=1; 839 | this._scaleY=1; 840 | this._rotateAngle=0; 841 | this._rotateX=0; 842 | this._rotateY=0; 843 | this._transform11=1; 844 | this._transform12=0; 845 | this._transform21=0; 846 | this._transform22=1; 847 | this._transformdx=0; 848 | this._transformdy=0; 849 | this._matrixChanged=false; 850 | } 851 | proto.object.prototype=new proto.object(); -------------------------------------------------------------------------------- /privateObjects/10 shape.js: -------------------------------------------------------------------------------- 1 | proto.shape=function() 2 | { 3 | this.color = function(color) 4 | { 5 | if (color===undefined)return [this._colorR,this._colorG,this._colorB,this._alpha]; 6 | return this.attr('color',color); 7 | } 8 | this.lineStyle = function(options) 9 | { 10 | return this.attr(options); 11 | } 12 | this.setOptns = function(ctx) 13 | { 14 | proto.shape.prototype.setOptns.call(this,ctx); 15 | ctx.lineWidth = this._lineWidth; 16 | ctx.lineCap = this._cap; 17 | ctx.lineJoin = this._join; 18 | ctx.miterLimit = this._miterLimit; 19 | var color=this.optns.color; 20 | if(color.notColor===undefined){ 21 | var rInt = parseInt(this._colorR), 22 | gInt = parseInt(this._colorG), 23 | bInt = parseInt(this._colorB), 24 | aInt = parseInt(this._alpha * 100) / 100; 25 | if (this._colorRPrev !== rInt || this._colorGPrev !== gInt || this._colorBPrev !== bInt || this._alphaPrev !== aInt) { 26 | color.val = this._color = 'rgba(' + rInt + ', ' + gInt + ', ' + bInt + ', ' + aInt + ')'; 27 | this._colorRPrev = rInt; 28 | this._colorGPrev = gInt; 29 | this._colorBPrev = bInt; 30 | this._alphaPrev = aInt; 31 | } 32 | else { 33 | color.val = this._color; 34 | } 35 | } 36 | else 37 | { 38 | var notColor=color.notColor; 39 | var notColorLayer=canvases[notColor.canvas].layers[notColor.layer]; 40 | if(notColorLayer.grdntsnptrns[notColor.level]!==undefined){color.val=notColorLayer.grdntsnptrns[notColor.level].val;} 41 | } 42 | if(this._fill) ctx.fillStyle = color.val; 43 | else ctx.strokeStyle = color.val; 44 | } 45 | this.afterDraw=function(optns) 46 | { 47 | if(this._fill) 48 | optns.ctx.fill(); 49 | else 50 | optns.ctx.stroke(); 51 | proto.shape.prototype.afterDraw.call(this,optns); 52 | } 53 | this.base=function(x) 54 | { 55 | if(x===undefined)x={}; 56 | if(x.color===undefined)x.color='rgba(0,0,0,1)'; 57 | else 58 | { 59 | if(!x.color.charAt && x.color.id===undefined && x.color.r===undefined) 60 | { 61 | x.fill=x.color; 62 | x.color='rgba(0,0,0,1)'; 63 | } 64 | } 65 | x=checkDefaults(x,{color:'rgba(0,0,0,1)',fill:0}); 66 | proto.shape.prototype.base.call(this,x); 67 | this._fill=x.fill; 68 | this.optns.color={val:x.color,notColor:undefined}; 69 | return this.color(x.color); 70 | } 71 | this._colorR=0; 72 | this._colorG=0; 73 | this._colorB=0; 74 | this._alpha=0; 75 | this._colorRPrev=0; 76 | this._colorGPrev=0; 77 | this._colorBPrev=0; 78 | this._alphaPrev=0; 79 | this._color = 'rgba(0,0,0,0)'; 80 | this._lineWidth = 1; 81 | this._cap = 'butt'; 82 | this._join = 'miter'; 83 | this._miterLimit= 1; 84 | } 85 | proto.shape.prototype=new proto.object; -------------------------------------------------------------------------------- /privateObjects/100 lines.js: -------------------------------------------------------------------------------- 1 | proto.lines=function() 2 | { 3 | this.getCenter=function(type) 4 | { 5 | var point={ 6 | x:this._x0, 7 | y:this._y0 8 | }; 9 | for(var i=1;ithis['_x'+i])minX=this['_x'+i]; 30 | if(minY>this['_y'+i])minY=this['_y'+i]; 31 | } 32 | var points={x:minX,y:minY,width:maxX-minX,height:maxY-minY}; 33 | return getRect(this,points,type); 34 | } 35 | this.addPoint=function(){ 36 | redraw(this); 37 | var names=this.pointNames; 38 | for(var i=0;ix-radius && this['_y'+j] 0 && endX > 0, negtiveXs = startX < 0 && endX < 0, positiveYs = startY > 0 && endY > 0, negtiveYs = startY < 0 && endY < 0; 50 | points.width = points.height = radius; 51 | if ((this._anticlockwise && startAngle < endAngle) || (!this._anticlockwise && startAngle > endAngle)) { 52 | if (((negtiveXs || (positiveXs && (negtiveYs || positiveYs)))) || (startX == 0 && endX == 0)) { 53 | points.y -= radius; 54 | points.height += radius; 55 | } 56 | else { 57 | if (positiveXs && endY < 0 && startY > 0) { 58 | points.y += endY; 59 | points.height += endY; 60 | } 61 | else 62 | if (endX > 0 && endY < 0 && startX < 0) { 63 | points.y += m_min(endY, startY); 64 | points.height -= m_min(endY, startY); 65 | } 66 | else { 67 | if (negtiveYs)points.y -= m_max(endY, startY); 68 | else points.y -= radius; 69 | points.height += m_max(endY, startY); 70 | } 71 | } 72 | if (((positiveYs || (negtiveYs && (negtiveXs || positiveXs) ))) || (startY == 0 && endY == 0)) { 73 | points.x -= radius; 74 | points.width += radius; 75 | } 76 | else { 77 | if (endY < 0 && startY > 0) { 78 | points.x += m_min(endX, startX); 79 | points.width -= m_min(endX, startX); 80 | } 81 | else { 82 | if (negtiveXs)points.x -= m_max(endX, startX); 83 | else points.x -= radius; 84 | points.width += m_max(endX, startX); 85 | } 86 | } 87 | } 88 | else { 89 | positiveXs = startX >= 0 && endX >= 0; 90 | positiveYs = startY >= 0 && endY >= 0; 91 | negtiveXs = startX <= 0 && endX <= 0; 92 | negtiveYs = startY <= 0 && endY <= 0; 93 | if (negtiveYs && positiveXs) { 94 | points.x += m_min(endX, startX); 95 | points.width -= m_min(endX, startX); 96 | points.y += m_min(endY, startY); 97 | points.height += m_max(endY, startY); 98 | } 99 | else if (negtiveYs && negtiveXs) { 100 | points.x += m_min(endX, startX); 101 | points.width += m_max(endX, startX); 102 | points.y += m_min(endY, startY); 103 | points.height += m_max(endY, startY); 104 | } 105 | else if (negtiveYs) { 106 | points.x += m_min(endX, startX); 107 | points.width += m_max(endX, startX); 108 | points.y -= radius; 109 | points.height += m_max(endY, startY); 110 | } 111 | else if (positiveXs && positiveYs) { 112 | points.x += m_min(endX, startX); 113 | points.width = m_abs(endX - startX); 114 | points.y += m_min(endY, startY); 115 | points.height -= m_min(endY, startY); 116 | } 117 | else if (positiveYs) { 118 | points.x += m_min(endX, startX); 119 | points.width = m_abs(endX) + m_abs(startX); 120 | points.y += m_min(endY, startY); 121 | points.height -= m_min(endY, startY); 122 | } 123 | else if (negtiveXs) { 124 | points.x -= radius; 125 | points.width += m_max(endX, startX); 126 | points.y -= radius; 127 | points.height += m_max(endY, startY); 128 | } 129 | else if (positiveXs) { 130 | points.x -= radius; 131 | points.width += m_max(endX, startX); 132 | points.y -= radius; 133 | points.height += radius; 134 | } 135 | } 136 | return getRect(this, points, type); 137 | } 138 | this.draw = function (ctx) { 139 | ctx.arc(this._x, this._y, this._radius, this._startAngle / radian, this._endAngle / radian, this._anticlockwise); 140 | } 141 | this.base = function (x, y, radius, startAngle, endAngle, anticlockwise, color, fill) { 142 | if (anticlockwise !== undefined) { 143 | if (anticlockwise.charAt)color = anticlockwise; 144 | if (anticlockwise)anticlockwise = true; 145 | else anticlockwise = false; 146 | } 147 | if (typeof x != 'object') 148 | x = {x:x, y:y, radius:radius, startAngle:startAngle, endAngle:endAngle, anticlockwise:anticlockwise, color:color, fill:fill}; 149 | x = checkDefaults(x, {radius:0, startAngle:0, endAngle:0, anticlockwise:true}); 150 | proto.arc.prototype.base.call(this, x); 151 | this._radius = x.radius; 152 | this._startAngle = x.startAngle; 153 | this._endAngle = x.endAngle; 154 | this._anticlockwise = x.anticlockwise; 155 | return this; 156 | } 157 | this._proto = 'arc'; 158 | } 159 | proto.arc.prototype = new proto.shape; 160 | proto.text = function () { 161 | this.font = function (font) { 162 | return this.attr('font', font); 163 | } 164 | this._font = "10px sans-serif"; 165 | this.align = function (align) { 166 | return this.attr('align', align); 167 | } 168 | this._align = "start"; 169 | this.baseline = function (baseline) { 170 | return this.attr('baseline', baseline); 171 | } 172 | this._baseline = "alphabetic"; 173 | this.string = function (string) { 174 | return this.attr('string', string); 175 | } 176 | this.position = function () { 177 | var points = {x:this._x, y:this._y}, ctx = objectCanvas(this).optns.ctx; 178 | points.height = parseInt(this._font.match(regNumsWithMeasure)[0]); 179 | points.y -= points.height; 180 | ctx.save(); 181 | ctx.textBaseline = this._baseline; 182 | ctx.font = this._font; 183 | ctx.textAlign = this._align; 184 | points.width = ctx.measureText(this._string).width; 185 | ctx.restore(); 186 | return getRect(this, points); 187 | } 188 | this.getRect = function (type) { 189 | var points = {x:this._x, y:this._y}, ctx = objectCanvas(this).optns.ctx; 190 | points.height = parseInt(this._font.match(regNumsWithMeasure)[0]); 191 | points.y -= points.height; 192 | ctx.save(); 193 | ctx.textBaseline = this._baseline; 194 | ctx.font = this._font; 195 | ctx.textAlign = this._align; 196 | points.width = ctx.measureText(this._string).width; 197 | if (this._align == 'center')points.x -= points.width / 2; 198 | if (this._align == 'right')points.x -= points.width; 199 | ctx.restore(); 200 | return getRect(this, points, type); 201 | } 202 | this.setOptns = function (ctx) { 203 | proto.text.prototype.setOptns.call(this, ctx); 204 | ctx.textBaseline = this._baseline; 205 | ctx.font = this._font; 206 | ctx.textAlign = this._align; 207 | } 208 | this.draw = function (ctx) { 209 | if (this._maxWidth === false) { 210 | if (this._fill)ctx.fillText(this._string, this._x, this._y); 211 | else ctx.strokeText(this._string, this._x, this._y); 212 | } 213 | else { 214 | if (this._fill) ctx.fillText(this._string, this._x, this._y, this._maxWidth); 215 | else ctx.strokeText(this._string, this._x, this._y, this._maxWidth); 216 | } 217 | } 218 | this.base = function (string, x, y, maxWidth, color, fill) { 219 | if (maxWidth !== undefined) { 220 | if (maxWidth.charAt) { 221 | if (color !== undefined)fill = color; 222 | color = maxWidth; 223 | maxWidth = false; 224 | } 225 | } 226 | if (typeof string != 'object') 227 | string = {string:string, x:x, y:y, maxWidth:maxWidth, color:color, fill:fill}; 228 | string = checkDefaults(string, {string:'', maxWidth:false, fill:1}); 229 | proto.text.prototype.base.call(this, string); 230 | this._string = string.string; 231 | this._maxWidth = string.maxWidth; 232 | return this; 233 | } 234 | this._proto = 'text'; 235 | } 236 | proto.text.prototype = new proto.shape; -------------------------------------------------------------------------------- /privateObjects/11 gradientsAndPatterns.js: -------------------------------------------------------------------------------- 1 | proto.grdntsnptrn=function() 2 | { 3 | this.layer=function(idLayer) 4 | { 5 | return layer(idLayer,this,'grdntsnptrns'); 6 | } 7 | this.canvas=function(idCanvas) 8 | { 9 | return canvas(idCanvas,this,'grdntsnptrns'); 10 | } 11 | var tmpObj=new proto.object; 12 | this.animate=tmpObj.animate; 13 | this.attr=tmpObj.attr; 14 | this.id=tmpObj.id; 15 | this.name=tmpObj.name; 16 | this.level=tmpObj.level; 17 | this.base=function() 18 | { 19 | this.animateQueue=[]; 20 | this.optns={ 21 | animated:false, 22 | name:"", 23 | layer:{id:canvases[0].optns.id+'Layer_0',number:0}, 24 | canvas:{number:0}, 25 | visible:true 26 | } 27 | this.optns.layer.id=canvases[lastCanvas].optns.id+'Layer_0'; 28 | this.optns.layer.number=0 29 | this.optns.canvas.number=lastCanvas; 30 | var grdntsnptrnsArray=canvases[lastCanvas].layers[0].grdntsnptrns; 31 | this._level=grdntsnptrnsArray.length; 32 | grdntsnptrnsArray[this._level]=this; 33 | redraw(this); 34 | } 35 | return this; 36 | } 37 | proto.gradients=function() 38 | { 39 | this.colorStopsCount=0; 40 | this.paramNames=['_pos','_colorR','_colorG','_colorB','_alpha']; 41 | this.addColorStop=function(pos,color){ 42 | redraw(this); 43 | var colorKeeper = parseColor(color); 44 | var i=this.colorStopsCount; 45 | this['_pos'+i] = pos; 46 | this['_colorR'+i] = colorKeeper.r; 47 | this['_colorG'+i] = colorKeeper.g; 48 | this['_colorB'+i] = colorKeeper.b; 49 | this['_alpha'+i] = colorKeeper.a; 50 | this.colorStopsCount++; 51 | return this; 52 | } 53 | this.animate=function(parameters,duration,easing,onstep,fn){ 54 | for(var key in parameters) 55 | { 56 | if(key.substr(0,5)=='color') 57 | { 58 | var i=key.substring(5); 59 | var colorKeeper=parseColor(parameters[key]); 60 | parameters['colorR'+i] = colorKeeper.r; 61 | parameters['colorG'+i] = colorKeeper.g; 62 | parameters['colorB'+i] = colorKeeper.b; 63 | parameters['alpha'+i] = colorKeeper.a; 64 | } 65 | } 66 | proto.gradients.prototype.animate.call(this,parameters,duration,easing,onstep,fn); 67 | } 68 | this.delColorStop=function(i) 69 | { 70 | redraw(this); 71 | var colorStops=this.colorStops(); 72 | colorStops.splice(i,1); 73 | if(colorStops.length>0)this.colorStops(colorStops); 74 | else this.colorStopsCount=0; 75 | return this; 76 | } 77 | this.colorStops=function(array) 78 | { 79 | var names=this.paramNames; 80 | if(array===undefined){ 81 | array=[]; 82 | for(var j=0;jpoint.x)points.x=point.x; 12 | if(points.y>point.y)points.y=point.y; 13 | } 14 | return points; 15 | } 16 | this.getRect=function(type){ 17 | var objs=this.objs, 18 | points,rect,i, 19 | limit=objs.length; 20 | if (objs.length==0)return false; 21 | if(type=='coords') 22 | { 23 | for(i=0;irect[0][0])points[0][0]=rect[0][0]; 28 | if(points[0][1]>rect[0][1])points[0][1]=rect[0][1]; 29 | if(points[1][0]rect[1][1])points[1][1]=rect[1][1]; 31 | if(points[2][0]>rect[2][0])points[2][0]=rect[2][0]; 32 | if(points[2][1]rect.x)points.x=rect.x; 45 | if(points.y>rect.y)points.y=rect.y; 46 | if(points.right=': 103 | if(!(value1>=value2))rel='del'; 104 | break; 105 | case '<=': 106 | if(!(value1<=value2))rel='del'; 107 | break; 108 | case '>': 109 | if(!(value1>value2))rel='del'; 110 | break; 111 | case '<': 112 | if(!(value1-1;i--) 288 | { 289 | var mouseDownObjects=[mouseDown.objects[i],objectLayer(mouseDown.objects[i])], mdObject; 290 | for(var j=0;j<2;j++) 291 | { 292 | mdObject=mouseDownObjects[j]; 293 | if(mdObject.optns.drag.val==true && mdObject.optns.drag.disabled==false && i == mdObjectsLength) 294 | { 295 | drag=optns.drag; 296 | dobject=drag.object=mdObject.optns.drag.object.visible(true); 297 | drag.drag=mdObject.optns.drag.drag; 298 | drag.init=mdObject; 299 | var initoptns=drag.init.optns; 300 | if(initoptns.drag.params!==undefined)dobject.animate(initoptns.drag.params); 301 | drag.x=drag.startX=mouseDown.x; 302 | drag.y=drag.startY=mouseDown.y; 303 | if(dobject!=drag.init && initoptns.drag.type!='clone') 304 | { 305 | point=transformPoint(mouseDown.x,mouseDown.y,dobject.matrix()); 306 | dobject.translate(point.x-dobject._x,point.y-dobject._y); 307 | } 308 | dobject.translate(initoptns.drag.shiftX,initoptns.drag.shiftY); 309 | if(typeof initoptns.drag.start=='function') 310 | initoptns.drag.start.call(dobject,{x:mouseDown.x,y:mouseDown.y}); 311 | } 312 | if(typeof mdObject.onmousedown=='function') 313 | if(mdObject.onmousedown({x:mouseDown.x,y:mouseDown.y,event:mouseDown.event})===false) 314 | break mdCicle; 315 | } 316 | } 317 | mouseDown.objects=[]; 318 | } 319 | if(mouseUp.objects.length) 320 | { 321 | muCicle: 322 | for(i=mouseUp.objects.length-1;i>-1;i--) 323 | { 324 | var mouseUpObjects=[mouseUp.objects[i],objectLayer(mouseUp.objects[i])],muObject; 325 | for(j=0;j<2;j++) 326 | { 327 | muObject=mouseUpObjects[j]; 328 | if(stopDrag(muObject, mouseUp, optns))click.objects=[]; 329 | if(typeof muObject.onmouseup=='function') 330 | if(muObject.onmouseup({x:mouseUp.x,y:mouseUp.y,event:mouseUp.event})===false) 331 | break muCicle; 332 | } 333 | } 334 | this.optns.drag={object:false,x:0,y:0}; 335 | mouseUp.objects=[]; 336 | } 337 | if(click.objects.length) 338 | { 339 | cCicle: 340 | for(i=click.objects.length-1;i>-1;i--) 341 | { 342 | var mouseClickObjects=[click.objects[i],objectLayer(click.objects[i])], clickObject; 343 | for(j=0;j<2;j++) 344 | { 345 | clickObject = mouseClickObjects[j]; 346 | stopDrag(clickObject, click, optns); 347 | if(typeof clickObject.onclick == 'function') 348 | if(clickObject.onclick({x:click.x,y:click.y,event:click.event})===false) 349 | break cCicle; 350 | } 351 | } 352 | this.optns.drag={object:false,x:0,y:0}; 353 | click.objects=[]; 354 | } 355 | if(dblClick.objects.length) 356 | { 357 | dcCicle: 358 | for(i=dblClick.objects.length-1;i>-1;i--) 359 | { 360 | var mouseDblClickObjects=[dblClick.objects[i],objectLayer(dblClick.objects[i])]; 361 | for(j=0;j<2;j++) 362 | { 363 | if(typeof mouseDblClickObjects[j].ondblclick == 'function') 364 | if(mouseDblClickObjects[j].ondblclick({x:dblClick.x,y:dblClick.y, event:dblClick.event})===false) 365 | break dcCicle; 366 | } 367 | } 368 | dblClick.objects=[]; 369 | } 370 | optns.keyUp.val=optns.keyDown.val=optns.keyPress.val=click.x=dblClick.x=mouseUp.x=mouseDown.x=mm.x=false; 371 | return this; 372 | } 373 | return canvas; 374 | } 375 | function stopDrag(object, event, optns){ 376 | var drag=optns.drag; 377 | if(optns.drag.init && optns.drag.object) 378 | { 379 | if(object.optns.drop.val==true) 380 | { 381 | 382 | if(drag.init==drag.object) 383 | drag.init.visible(true); 384 | if(typeof object.optns.drop.fn=='function') 385 | object.optns.drop.fn.call(object,drag.init); 386 | } 387 | else 388 | { 389 | drag.object.visible(false); 390 | drag.init.visible(true); 391 | drag.init.optns.translateMatrix[0][2]=drag.object.optns.translateMatrix[0][2]; 392 | drag.init.optns.translateMatrix[1][2]=drag.object.optns.translateMatrix[1][2]; 393 | changeMatrix(drag.init); 394 | if(drag.object!=drag.init)drag.object.visible(false); 395 | if(typeof drag.init.optns.drag.stop=='function') 396 | drag.init.optns.drag.stop.call(drag.init,{x:event.x,y:event.y}); 397 | } 398 | return (drag.x!=drag.startX || drag.y!==drag.startY) 399 | } 400 | return false; 401 | } -------------------------------------------------------------------------------- /serviceObjects/layer.js: -------------------------------------------------------------------------------- 1 | jCanvaScript.layer=function(idLayer) 2 | { 3 | if(idLayer===undefined)return canvases[0].layers[0]; 4 | for(var i=0;i