| 1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> |
|---|
| 2 | <html> |
|---|
| 3 | <HEAD> |
|---|
| 4 | <TITLE></TITLE> |
|---|
| 5 | <script type="text/javascript" src="dojo/dojo/dojo.js" |
|---|
| 6 | djConfig="isDebug:false, parseOnLoad: true"></script> |
|---|
| 7 | <script> |
|---|
| 8 | dojo.require("dojox.gfx"); |
|---|
| 9 | var start = null; |
|---|
| 10 | var who = null; |
|---|
| 11 | var startPoint = null; |
|---|
| 12 | var endPoint = null; |
|---|
| 13 | var line = null; |
|---|
| 14 | var group = null; |
|---|
| 15 | |
|---|
| 16 | |
|---|
| 17 | function setUp() { |
|---|
| 18 | this.canvasSurface = dojox.gfx.createSurface(dojo.byId("surface"), 600, 400); |
|---|
| 19 | group = this.canvasSurface.createGroup().setTransform({dx: 15, dy:15}); |
|---|
| 20 | var group1 = this.canvasSurface.createGroup().setTransform({dx: 200, dy:200}); |
|---|
| 21 | group1.createCircle({cx: -2, cy: -2, r: 50}).setStroke({width: 1, color: "red"}).setFill("blue");; |
|---|
| 22 | |
|---|
| 23 | line = group.createLine({x1: 0, y1: 0, x2:100, y2:100}).setStroke({width: 1, color: "blue"}); |
|---|
| 24 | startPoint = group.createCircle({cx: 0, cy: 0, r:10}).setStroke({width: 1, color: "red"}).setFill("yellow"); |
|---|
| 25 | endPoint = group.createCircle({cx: 100, cy: 100, r:10}).setStroke({width: 1, color: "red"}).setFill("yellow"); |
|---|
| 26 | dojo.connect(startPoint.getEventSource(), "onmousedown", onStartMove); |
|---|
| 27 | dojo.connect(endPoint.getEventSource(), "onmousedown", onEndMove); |
|---|
| 28 | |
|---|
| 29 | dojo.connect(dojo.byId("surface"), "onselectstart", dojo, "stopEvent"); |
|---|
| 30 | dojo.connect(this.canvasSurface.getEventSource(), "onmousemove", onMouseMove); |
|---|
| 31 | dojo.connect(this.canvasSurface.getEventSource(), "onmouseup", onMouseUp); |
|---|
| 32 | |
|---|
| 33 | var time = new Date().getTime(); |
|---|
| 34 | for(i = 0; i < 1000; i++) { |
|---|
| 35 | updateLine("startPoint", -i, i) |
|---|
| 36 | } |
|---|
| 37 | alert (new Date().getTime() - time); |
|---|
| 38 | } |
|---|
| 39 | |
|---|
| 40 | |
|---|
| 41 | function onStartMove(e) { |
|---|
| 42 | onMouseDown("startPoint", e) |
|---|
| 43 | } |
|---|
| 44 | |
|---|
| 45 | function onEndMove(e) { |
|---|
| 46 | onMouseDown("endPoint", e) |
|---|
| 47 | } |
|---|
| 48 | function onMouseDown(id, e) { |
|---|
| 49 | who = id; |
|---|
| 50 | start = { |
|---|
| 51 | x: e.pageX, |
|---|
| 52 | y: e.pageY |
|---|
| 53 | } |
|---|
| 54 | dojo.stopEvent(e); |
|---|
| 55 | } |
|---|
| 56 | function updateLine(who, dx, dy) { |
|---|
| 57 | var g, gs; |
|---|
| 58 | var ls = line.getShape(); |
|---|
| 59 | var s = startPoint.getShape(); |
|---|
| 60 | var e = endPoint.getShape(); |
|---|
| 61 | if (who == "startPoint") { |
|---|
| 62 | s.cx += dx; |
|---|
| 63 | s.cy += dy |
|---|
| 64 | gs = s; |
|---|
| 65 | g = startPoint; |
|---|
| 66 | ls.x1 = s.cx; |
|---|
| 67 | ls.y1 = s.cy; |
|---|
| 68 | } |
|---|
| 69 | else { |
|---|
| 70 | e.cx += dx; |
|---|
| 71 | e.cy += dy |
|---|
| 72 | g = e; |
|---|
| 73 | g = endPoint; |
|---|
| 74 | ls.x2 = e.cx; |
|---|
| 75 | ls.y2 = e.cy; |
|---|
| 76 | } |
|---|
| 77 | g.setShape(gs); |
|---|
| 78 | line.setShape(ls); |
|---|
| 79 | } |
|---|
| 80 | |
|---|
| 81 | function onMouseMove(e) { |
|---|
| 82 | if (start) { |
|---|
| 83 | var p = { |
|---|
| 84 | x: e.pageX, |
|---|
| 85 | y: e.pageY |
|---|
| 86 | } |
|---|
| 87 | var dx = p.x - start.x; |
|---|
| 88 | var dy = p.y - start.y; |
|---|
| 89 | |
|---|
| 90 | start = p; |
|---|
| 91 | updateLine(who, dx, dy); |
|---|
| 92 | dojo.stopEvent(e); |
|---|
| 93 | } |
|---|
| 94 | } |
|---|
| 95 | function onMouseUp(e) { |
|---|
| 96 | start = null; |
|---|
| 97 | dojo.stopEvent(e); |
|---|
| 98 | } |
|---|
| 99 | |
|---|
| 100 | dojo.addOnLoad(setUp); |
|---|
| 101 | |
|---|
| 102 | </script> |
|---|
| 103 | |
|---|
| 104 | |
|---|
| 105 | </HEAD> |
|---|
| 106 | |
|---|
| 107 | |
|---|
| 108 | <BODY> |
|---|
| 109 | |
|---|
| 110 | <div id="surface"></div> |
|---|
| 111 | </BODY> |
|---|
| 112 | |
|---|
| 113 | |
|---|
| 114 | </HTML> |
|---|
