dojo 0.9 笔记(2)

1.画图

  case dojox.gfx.defaultPath.type:  return this.createPath(shape);
  case dojox.gfx.defaultRect.type:  return this.createRect(shape);
  case dojox.gfx.defaultCircle.type:  return this.createCircle(shape);
  case dojox.gfx.defaultEllipse.type:  return this.createEllipse(shape);
  case dojox.gfx.defaultLine.type:  return this.createLine(shape);
  case dojox.gfx.defaultPolyline.type: return this.createPolyline(shape);
  case dojox.gfx.defaultImage.type:  return this.createImage(shape);
  case dojox.gfx.defaultText.type:  return this.createText(shape);
  case dojox.gfx.defaultTextPath.type: return this.createTextPath(shape);
可以create的方法

2.图象拖动事件
               -----正方形--------

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//ZH-CN" "http://www.w3.org/TR/html4/strict.dtd" >
< html >
     < head >
         < meta http-equiv ="Content-Type" content ="text/html" />
         < script type ="text/javascript" src ="http://127.0.0.1:8000/lib/dojo/dojo_0.9/dojo/dojo.js"
                djConfig ="parseOnLoad: true" ></ script >
     < style type ="text/css" >
        @import "http://127.0.0.1:8000/lib/dojo/dojo_0.9/dojo/resources/dojo.css";
        @import "http://127.0.0.1:8000/lib/dojo/dojo_0.9/dijit/tests/css/dijitTests.css";
     </ style >
< script type ="text/javascript" >

dojo.require( " dojox.gfx " );

var container = null ;
var container_position = null ;
var surface = null ;
var surface_size = null ;

var gShapes = {}
var gShapeCounter = 0 ;

function makeCircleGrid(aShape)
{
         var id = " shape_ " + (gShapeCounter ++ );
        aShape.getEventSource().setAttribute('shapeid', id);
        dojox.gfx._addClass(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();
         //正方形的是 params [x ,y width,height]
         var center = dojox.gfx.matrix.multiplyPoint(shape.getTransform(), params.x, params.y);
         var dx = last_position.x - center.x;
         var dy = last_position.y - center.y;

        current_shape_window = {
            x1: params.width + dx,
            y1: params.height + dy,
            x2: surface_size.width     + dx,
            y2: surface_size.height   + dy
        };
    }
    dojo.stopEvent(event);
}

function handleMouseMove(event)
{
     if ( ! current_shape) 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});
    last_position = {x: x, y: y};
    dojo.stopEvent(event);
}

function handleMouseUp(event)
{
    current_shape = null ;
    dojo.stopEvent(event);
}

function initGfx() {
    container = dojo.byId( " gfx_holder " );
    container_position = dojo.coords(container, true );
    surface = dojox.gfx.createSurface(container, 500 , 500 );
    surface_size = surface.getDimensions();
    surface_size.width   = parseInt(surface_size.width);
    surface_size.height = parseInt(surface_size.height);

     var aShape = surface.createRect({x: 70 , y: 70 , width: 20 , height: 20 }).setFill( " red " );

    makeCircleGrid(aShape);

    dojo.connect(container, 'onmousedown', handleMouseDown);
    dojo.connect(container, 'onmousemove', handleMouseMove);
    dojo.connect(container, 'onmouseup',   handleMouseUp);

     // cancel text selection and text dragging
    dojo.connect(container, " ondragstart " ,   dojo, " stopEvent " );
    dojo.connect(container, " onselectstart " , dojo, " stopEvent " );
}

dojo.addOnLoad(initGfx);

</ script >

< style type ="text/css" >
.movable { cursor : pointer ; }
</ style >

</ head >
< body >
     < h1 > dojox.gfx: 100 draggable circles </ h1 >
     < div id ="gfx_holder" style ="width: 500px; height: 500px;" ></ div >
</ body >
</ html >

--------圆是-----------

其他不用再说了吧!!

dojo 0.9 笔记(2) _画图

你可能感兴趣的:(dojo 0.9 笔记(2) _画图)