js画图开发库--mxgraph--[shape-3D视图.html]
<!Doctype html>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
<title>立体视图/title>
<!-- 如果本文件的包与src不是在同一个目录,就要将basepath设置到src目录下 -->
<script type="text/javascript">
mxBasePath = '../src';
</script>
<!-- 引入支持库文件 -->
<script type="text/javascript" src="../src/js/mxClient.js"></script>
<!-- 示例代码 -->
<script type="text/javascript">
/*
形状是一个“3D盒”,看起来像这样:
____
/ /|
/___/ |
| | /
|___|/
下面的代码定义的形状。箱形功能,它的构造函数创建一个新的对象实例。
*/
function BoxShape() { };
/*
下一行使用mxCylinder的实例,以加强原型的形状(“继承”)和复位最上面的功能的c'tor链的构造。
*/
BoxShape.prototype = new mxCylinder();
BoxShape.prototype.constructor = BoxShape;
// 去锯齿效果
BoxShape.prototype.crisp = true;
// 定义静态变量
BoxShape.prototype.extrude = 10;
/*
接下来,mxCylinder redrawPath方法是“覆盖”。 这种方法有一个isForeground参数来分隔两个
路径,一个用于背景(必须关闭并可能会对填充)和前景,这只是一个方面的例子。
Foreground: /
_____/
|
|
____
Background: / |
/ |
| /
|____/
*/
BoxShape.prototype.redrawPath = function(path, x, y, w, h, isForeground)
{
var dy = this.extrude * this.scale;
var dx = this.extrude * this.scale;
if (isForeground)
{
path.moveTo(0, dy);
path.lineTo(w - dx, dy);
path.lineTo(w, 0);
path.moveTo(w - dx, dy);
path.lineTo(w - dx, h);
path.end();
}
else
{
path.moveTo(0, dy);
path.lineTo(dx, 0);
path.lineTo(w, 0);
path.lineTo(w, h - dy);
path.lineTo(w - dx, h);
path.lineTo(0, h);
path.lineTo(0, dy);
path.lineTo(dx, 0);
path.close();
path.end();
}
};
/*
全局范围内,在每个元素渲染器的形状可以自定义注册实例
graph.cellRenderer.registerShape('box', BoxShape);
*/
mxCellRenderer.prototype.defaultShapes['box'] = BoxShape;
</script>
<!-- 示例代码 -->
<script type="text/javascript">
// 程序在此方法中启动
function main(container)
{
// 检查浏览器支持
if (!mxClient.isBrowserSupported())
{
mxUtils.error('Browser is not supported!', 200, false);
}
else
{
// 在容器中创建图形
var graph = new mxGraph(container);
// 禁用基本的下拉列表和监听处理操作
graph.setEnabled(false);
// 改变基本样式
var style = graph.getStylesheet().getDefaultVertexStyle();
style[mxConstants.STYLE_SHAPE] = 'box';
// 更改边距
style[mxConstants.STYLE_SPACING_TOP] = BoxShape.prototype.extrude;
style[mxConstants.STYLE_SPACING_RIGHT] = BoxShape.prototype.extrude;
// 添加渐变,阴影,以改善用户体验
style[mxConstants.STYLE_GRADIENTCOLOR] = '#FFFFFF';
style[mxConstants.STYLE_SHADOW] = true;
// 创建默认窗体
var parent = graph.getDefaultParent();
// 开启更新事务
graph.getModel().beginUpdate();
try
{
var v1 = graph.insertVertex(parent, null, 'Custom', 20, 20, 80, 60);
var v2 = graph.insertVertex(parent, null, 'Shape', 200, 150, 80, 60);
var e1 = graph.insertEdge(parent, null, '', v1, v2);
}
finally
{
// 结束更新事务
graph.getModel().endUpdate();
}
}
};
</script>
</head>
<!-- 页面载入时启动程序 -->
<body οnlοad="main(document.getElementById('graphContainer'))">
<!-- 创建带网格壁纸和曲线的一个容器 -->
<div id="graphContainer"
style="overflow:hidden;width:321px;height:241px;background:url('editors/images/grid.gif')">
</div>
</body>
</html>