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
);
//
创建图范围
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);
//画画 不过天知道画的是什么
});
</
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.图象拖动事件
-----正方形--------
<!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);
}
其他不用再说了吧!!