Nuestro conocimiento compartido. Nuestro tesoro compartido. Wikipedia.
ShareCode
Permalink: http://www.treeweb.es/u/974/ 01/02/2011

ShareCode

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:
  1. var canvas = new Canvas(); ... (24/04/2013)
  2. var canvas = new Canvas(); ... (24/04/2013)
  3. var canvas = new Canvas(); ... (24/04/2013)
  4. var canvas = new Canvas(); ... (24/04/2013)
Enlace
El enlace para compartir es: