1 var Rectangle = function() {2 3 this.setParentNode = function (node) {4 node.appendChild(dom);5 }6 7 this.setCoord1 = function (x,y) {8 _x1=x;9 _y1=y;10 draw();11 }12 13 this.setCoord2 = function (x,y) {14 _x2=x;15 _y2=y;16 draw();17 }18 19 var draw = function () {20 dom.style.left = Math.min(_x1, _x2)+'px';21 dom.style.top = Math.min(_y1, _y2)+'px';22 dom.style.width = Math.abs(_x1-_x2)+'px';23 dom.style.height = Math.abs(_y1-_y2)+'px';24 }25 26 this.setTop = function(val) {27 }28 29 this.setLeft = function(val) {30 }31 32 this.setHeight = function(val) {33 }34 35 this.setWidth = function(val) {36 }37 38 this.setText = function(val) {39 dom.innerHTML = val;40 }41 42 43 44 // Constructor:45 var _x1=0;46 var _y1=0;47 var _x2=0;48 var _y2=0;49 50 51 var dom = document.createElement('div');52 dom.style.position = 'absolute';53 dom.style.border = 'solid black 4px';54 dom.style.background = 'rgba(100,100,200,0.8)';55 //dom.style.background = 'lightblue';56 dom.style.fontSize = '10px';57 var superthis = this;58 59 /*60 dom.addEventListener('mousemove', function(e) {61 superthis.setWidth(e.clientX);62 superthis.setText('9');63 }, true);*/64 }65 66 67 var Canvas = function() {68 69 this.setParentNode = function (node) {70 node.appendChild(dom);71 }72 73 74 75 76 77 // Constructor:78 var dom = document.createElement('div');79 dom.style.color = 'red';80 dom.style.border = 'solid silver 1px';81 dom.style.height = '300px';82 dom.style.overflow = 'scroll';83 dom.innerHTML = '';84 85 var mode = 0;86 var last_rectangle = null;87 88 dom.addEventListener('mousedown', function(e) {89 var rectangle = new Rectangle();90 rectangle.setParentNode(dom);91 rectangle.setCoord1(e.pageX, e.pageY);92 rectangle.setCoord2(e.pageX, e.pageY);93 last_rectangle = rectangle;94 mode = 1;95 if (e.stopPropagation) e.stopPropagation();96 }, true);97 98 dom.addEventListener('mousemove', function(e) {99 if (mode==1) {100 last_rectangle.setCoord2(e.pageX, e.pageY);101 if (e.stopPropagation) e.stopPropagation(); 102 }103 }, true);104 105 dom.addEventListener('mouseup', function(e) {106 if (mode==1) {107 mode = 0;108 if (e.stopPropagation) e.stopPropagation();109 }110 }, true);111 112 113 }114 115 116 117 var CanvasToolbar = function () {118 119 this.setParentNode = function (node) {120 node.appendChild(dom);121 }122 123 124 this.setCanvas = function (node) {125 canvas = node;126 }127 128 var dom = document.createElement('div');129 dom.innerHTML = 'barra de herramientas';130 131 var canvas = null; // Canvas al que controlo132 133 }Este ShareCode tiene versiones:
- var canvas = new Canvas(); ... (24/04/2013)
- var canvas = new Canvas(); ... (24/04/2013)
- var canvas = new Canvas(); ... (24/04/2013)
- var canvas = new Canvas(); ... (24/04/2013)
Enlace
El enlace para compartir es: