[Dojo-interest] Re: gfx bugs?

Tom Trenka dojo-interest at dept-z.com
Fri Dec 22 08:14:52 MST 2006


Just so you know, you don't need to include the MS specific namespaces in
your document to use dojo.gfx; we add them to the document on the fly as
part of the loading routine.

trt


Jim Bogan wrote:
> 
> Thanks for your help Eugene,
> 
> 
> Below is a 'working' example showing the previous problems I had.  As I
> said
> earlier this assumes it is located in the demos/gfx directory and the
> attached images are in the child images directory.
> 
> 
> 
> 
> <html xmlns:v="urn:schemas-microsoft-com:vml"
> xmlns:o="urn:schemas-microsoft-com:office:office">
> <head>
> <title>ComplexShapes</title>
> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
> <script language="JavaScript" type="text/javascript">
> djConfig = { isDebug: true };
> </script>
> 
> <script type="text/javascript" src="../../dojo.js"></script>
> 
> <script type="text/javascript">
> 
> dojo.require("dojo.gfx.*");
> dojo.require("dojo.event.*");
> dojo.require("dojo.html.layout");
> dojo.require("dojo.html.style");
> dojo.require('dojo.debug.console');
> 
> var container = null;
> var container_position = null;
> var surface = null;
> var surface_size = null;
> 
> function getRand(from, to)
> {
>  return Math.random() * (to - from) + from;
> }
> 
> 
> function randColor(alpha)
> {
>  var red   = Math.floor(getRand(0, 255));
>  var green = Math.floor(getRand(0, 255));
>  var blue  = Math.floor(getRand(0, 255));
>  var opacity = 1;
>  if (alpha) {
>   opacity = getRand(0.1, 1);
>  }
>  return [red, green, blue, opacity];
> }
> 
> var gShapes = {}
> var gShapeCounter = 0;
> 
> var myIds = ['a1', 'a2', 'a3', 'a4'];
> 
> var g;
> var g2;
> 
> function makeCircleGrid(itemCount)
> {
>  for (var j = 0; j < myIds.length; ++j) {
>   var r = 15;
>   var cx = getRand(r, surface_size.width  - r);
>   var cy = getRand(r, surface_size.height - r);
>   var id = myIds[j];
>   var aShape;
>   if (id == 'a1') {
>    /*aShape = surface.createCircle({cx: cx, cy: cy, r: 10})
>     .setFill([200, 200, 200, 0.1]);
>    var imgShape = surface.createImage({width: 30, height: 30, src:
> "images/blueSquare.gif"});
>    g = surface.createGroup();
>    g.setTransform({dx: (cx-15), dy: (cy-15)});
>    g.add(imgShape);
>    g.moveToBack(); */
>    aShape = surface.createImage({width: 30, height: 30, src:
> "images/blueSquare.gif"});
>   } else if (id == 'a2') {
>    aShape = surface.createCircle({cx: cx, cy: cy, r: 10})
>    .setFill([200, 10, 200, 0.1]);
>    var imgShape2 = surface.createImage({width: 30, height: 30, src:
> "images/greenSquare.gif"});
> 
>    g2 = surface.createGroup();
>    g2.setTransform({dx: (cx-15), dy: (cy-15)});
>    g2.add(imgShape2);
> 
>    g2.moveToBack();
>    //aShape = surface.createImage({cx: cx, cy: cy, width: 30, height: 30,
> src: "images/greenSquare.gif"});
> 
>   }else {
>    aShape = surface.createCircle({cx: cx, cy: cy, r: r})
>    .setFill('red')
>    .setStroke({color: 'red', width: 1})
>    ;
>   }
>   aShape.getEventSource().setAttribute('shapeid', id);
>   dojo.html.setClass(aShape.getEventSource(), "movable");
>   gShapes[id] = aShape;
>  }
> }
> 
> var current_shape = null;
> var current_shape_window = null;
> var last_position = null;
> 
> function getShape(event)
> {
>  var id = event.target.getAttribute('shapeid');
>  var s  = id ? gShapes[id] : null;
>  return s;
> }
> 
> 
> 
> function handleMouseDown(event)
> {
>  var shape = getShape(event);
>  if (shape) {
>   current_shape = shape;
>   last_position = {
>    x: event.clientX - container_position.x,
>    y: event.clientY - container_position.y
>   };
>   var params = shape.getShape();
>   var bbox = shape.getBoundingBox();
>   var center = dojo.gfx.matrix.multiplyPoint(shape.getTransform(), bbox.x,
> bbox.y);
>   var dx = last_position.x - center.x;
>   var dy = last_position.y - center.y;
>   var r  = 5;
>   current_shape_window = {
>    x1: r + dx,
>    y1: r + dy,
>    x2: surface_size.width  - r + dx,
>    y2: surface_size.height - r + dy
>   };
>  }
>  dojo.event.browser.stopEvent(event);
> }
> 
> function handleMouseMove(event)
> {
>  if(!current_shape) return;
>  var shape = getShape(event);
>  if (shape) {
>   if (shape != current_shape) {
>   //  dojo.event.browser.stopEvent(event);
>   //  return;
>    }
>  }
>  var x = Math.min(Math.max(event.clientX - container_position.x,
> current_shape_window.x1), current_shape_window.x2);
>  var y = Math.min(Math.max(event.clientY - container_position.y,
> current_shape_window.y1), current_shape_window.y2);
>  current_shape.applyTransform({dx: x - last_position.x, dy: y -
> last_position.y});
>     var id = event.target.getAttribute('shapeid');
>  /*if (id == 'a1') {
>   dojo.debug("a1 transform");
>   g.setTransform({dx: (x-15), dy: (y-15)});
>  }*/
>  if (id == 'a2') {
>   g2.setTransform({dx: (x-15), dy: (y-15)});
>  }
> 
>  last_position = {x: x, y: y};
>  dojo.event.browser.stopEvent(event);
> }
> 
> function handleMouseUp(event)
> {
>  current_shape = null;
>  dojo.event.browser.stopEvent(event);
> }
> 
> function initGfx() {
>  container = dojo.byId("gfx_holder");
>  container_position = dojo.html.abs(container);
>  surface = dojo.gfx.createSurface(container, 500, 500);
>  surface_size = surface.getDimensions();
>  surface_size.width  = parseInt(surface_size.width);
>  surface_size.height = parseInt(surface_size.height);
>  makeCircleGrid(10);
>  dojo.event.connect(container, 'onmousedown', handleMouseDown);
>  dojo.event.connect(container, 'onmousemove', handleMouseMove);
>  dojo.event.connect(container, 'onmouseup',   handleMouseUp);
> }
> 
> dojo.addOnLoad(initGfx);
> 
> </script>
> 
> <style type="text/css">
> .movable { cursor: hand; }
> </style>
> 
> </head>
> <body>
>  <h1>Draggable graph</h1>
>  <div id="gfx_holder" style="width: 500px; height: 500px;"></div>
> 
> </body>
> </html>
> 
>  
>  
> _______________________________________________
> Dojo FAQ: http://dojo.jot.com/FAQ
> Dojo Book: http://manual.dojotoolkit.org/DojoDotBook
> Dojo-interest at dojotoolkit.org
> http://dojotoolkit.org/mailman/listinfo/dojo-interest
> 
> 

-- 
View this message in context: http://www.nabble.com/gfx-bugs--tf2869004.html#a8024588
Sent from the Dojo mailing list archive at Nabble.com.



More information about the Dojo-interest mailing list