1.畫圖
<!
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
"
);
dojo.addOnLoad(
function
(){
????container?
=
?dojo.byId(
"
gfx_holder
"
);
????
var
?surface?
=
?dojox.gfx.createSurface(container,?
385
,?
385
);????????
//
創(chuàng)建圖范圍
????surface.createImage({width:?
30
,?height:?
40
,?src:?
"
http://127.0.0.1:8000/images/tomcat.ico
"
});??
//
create?
????surface.createCircle({cx:?
100
,?cy:?
100
,?r:?
20
})?.setFill('blue');
????
????surface.createLine({x1:?
0
,?y1:?
350
,?x2:?
700
,?y2:?
250
}).setStroke(
"
green
"
);
????
????surface.createRect({x:?
70
,?y:?
70
,?width:?
20
,?height:?
20
}).setFill(
"
red
"
);
????
????
var
?hour_hand_points?
=
?[{x:?
50
,?y:?
82
},?{x:?
100
,?y:?
15
},{x:?
200
,?y:?
20
}];
????surface.createPolyline(hour_hand_points).setFill('aqua');
????
????
????
var
?m?
=
?dojox.gfx.matrix;
????
var
?initial_matrix?
=
?m.translate(
250
,?
250
);
????g?
=
?surface.createGroup().setTransform(initial_matrix);
????
var
?f,?s?
=
?{color:?
"
black
"
,?width:?
1
};
????f?
=
?
"
#ffffff
"
;?s?
=
?{color:?
"
#000000
"
,?width:?
0.172
};
????g.createPath(
"
M-122.304?84.285C-122.304?2000.285?-122.203?86.179?-123.027?86.16C-123.851?700.141?-140.305?38.066?-160.833?40.309C-160.833?40.309?-143.05?32.956?-122.304?84.285z
"
).setFill(f).setStroke(s);
????//畫畫 不過(guò)天知道畫的是什么
????
});
</
script
>
<
div?
id
="gfx_holder"
?style
="width:?385px;?height:?385px;"
></
div
>
</
html
>
??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.圖象拖動(dòng)事件
???????????????-----正方形--------
<!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>
????????? --------圓是-----------
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 的取值不同?params [cx,xy,r]
????????var?center?=?dojox.gfx.matrix.multiplyPoint(shape.getTransform(),?params.cx,?params.cy);
????????var?dx?=?last_position.x?-?center.x;
????????var?dy?=?last_position.y?-?center.y;
????????var?r??=?params.r;
????????current_shape_window?=?{
????????????x1:?r?+?dx,
????????????y1:?r?+?dy,
????????????x2:?surface_size.width??-?r?+?dx,
????????????y2:?surface_size.height?-?r?+?dy
????????};
????}
????dojo.stopEvent(event);
}
其他不用再說(shuō)了吧!!
?
?