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 1px';54 dom.style.background = 'rgba(100,200,255,0.2)';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 //dom_body = dom.contentDocument.body; // works fine on chrome73 dom_body = dom.contentDocument.body; // works fine on chrome74 75 var s = '';76 for (key in dom_body)77 s += key +', ';78 alert(s);79 80 81 dom_body.style.border = 'solid red 10px';82 83 dom_body.innerHTML = 'asdffdsfasd';84 85 dom_body.addEventListener('mousedown', function(e) {86 if (mode==0) {87 var rectangle = new Rectangle();88 rectangle.setParentNode(dom_body);89 rectangle.setCoord1(e.pageX, e.pageY);90 rectangle.setCoord2(e.pageX, e.pageY);91 last_rectangle = rectangle;92 mode = 1;93 if (e.stopPropagation) e.stopPropagation();94 }95 }, true);96 97 dom_body.addEventListener('mousemove', function(e) {98 if (mode==1) {99 last_rectangle.setCoord2(e.pageX, e.pageY);100 if (e.stopPropagation) e.stopPropagation(); 101 }102 }, true);103 104 dom_body.addEventListener('mouseup', function(e) {105 if (mode==1) {106 mode = 0;107 if (e.stopPropagation) e.stopPropagation();108 }109 }, true);110 111 /*112 dom.contentWindow.onload = function() {113 alert(dom.contentDocument.body);114 body = dom.contentDocument.body;115 116 body.style.height = '100%';117 118 body.addEventListener('mousedown', function(e) {119 if (mode==0) {120 var rectangle = new Rectangle();121 rectangle.setParentNode(body);122 rectangle.setCoord1(e.pageX, e.pageY);123 rectangle.setCoord2(e.pageX, e.pageY);124 last_rectangle = rectangle;125 mode = 1;126 if (e.stopPropagation) e.stopPropagation();127 }128 }, true);129 130 body.addEventListener('mousemove', function(e) {131 if (mode==1) {132 last_rectangle.setCoord2(e.pageX, e.pageY);133 if (e.stopPropagation) e.stopPropagation(); 134 }135 }, true);136 137 body.addEventListener('mouseup', function(e) {138 if (mode==1) {139 mode = 0;140 if (e.stopPropagation) e.stopPropagation();141 }142 }, true);143 144 145 };146 147 locura();*/148 }149 150 151 var locura = function() {152 var a = document.createElement('div');153 a.innerHTML = 'hola';154 155 dom_body.appendChild(a);156 }157 158 159 // Constructor:160 var dom = document.createElement('iframe');161 var dom_body=null;//=null;162 var mode = 0;163 var last_rectangle = null;164 165 dom.style.border = 'none';166 dom.style.display = 'block';167 dom.style.height = '300px';168 dom.style.width = '100%';169 dom.style.overflow = 'scroll';170 171 172 173 174 175 176 }177 178 179 180 var CanvasToolbar = function () {181 182 this.setParentNode = function (node) {183 node.appendChild(dom);184 }185 186 187 this.setCanvas = function (node) {188 canvas = node;189 }190 191 var dom = document.createElement('div');192 dom.innerHTML = 'barra de herramientas';193 194 var canvas = null; // Canvas al que controlo195 196 }Enlace
El enlace para compartir es: