<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>T1</title>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/extended.js"></script>
<script src="js/base.js"></script>
<script src="js/util.js"></script>
</head>
<body style="border:10px solid red;">
<br>
<button onclick="stage.curScene.scaleX*=1.05;stage.curScene.scaleY*=1.05">放大</button>
<button onclick="stage.curScene.scaleX*=0.95;stage.curScene.scaleY*=0.95">缩小</button>
<br>
aaaaaaaaaaaaaaa
<canvas id="canvas" width="1000px" height="600px" style="border:4px solid black;"></canvas>
<script>
function Stage(canvas){
this.canvas = canvas;
this.ctx =canvas.getContext("2d");
//this.ctx.fontStyle = "微软雅黑"
var me = this;
this.curScene = null;
//屏蔽canvas的右键菜单
canvas.oncontextmenu = function(ev){
ev = ev || event;
ev.returnValue = false;
}
canvas.onmousedown = function(ev){
ev = ev || event;
var px = (ev.clientX -canvas.offsetLeft+document.body.scrollLeft - canvas.width / 2) / me.curScene.scaleX + canvas.width / 2 - me.curScene.translateX;
var py = (ev.clientY -canvas.offsetTop+document.body.scrollTop - canvas.height / 2) / me.curScene.scaleY + canvas.height / 2 - me.curScene.translateY;
if(me.curScene.onClick){
me.curScene.onClick({
event:ev,
pointX:px,
pointY:py
});
}
//var t = new TextNode(px+","+py);
//t.setLocation(px,py);
//me.curScene.add(t);
me.curScene.currentElement = null;
me.curScene.childs.forEach(function(ele){
if(ele.elementType == "node" || ele.elementType=="container") {
if (ele.inBound(px, py)) {
ele.selected = true;
me.curScene.currentElement = ele;
ele.pointX = px - ele.x;
ele.pointY = py - ele.y;
} else {
if(!ev.ctrlKey){
ele.selected = false;
}
}
}
});
if(me.curScene.currentElement){
me.canvas.style.cursor = "move";
var curEle = me.curScene.currentElement;
if(curEle.onClick){
curEle.onClick({
event:ev,
pointX:curEle.pointX,
pointY:curEle.pointY
})
}
}else{
me.canvas.style.cursor = "pointer";
}
canvas.onmousemove = function(ev){
ev = ev || event;
canvas.mousemoveEventObj = ev;
//var px2 = (ev.clientX -canvas.offsetLeft - canvas.width / 2) / me.curScene.scaleX + canvas.width / 2 - me.curScene.translateX;
//var py2 = (ev.clientY -canvas.offsetTop - canvas.height / 2) / me.curScene.scaleY + canvas.height / 2 - me.curScene.translateY;
var px2 = (ev.clientX -canvas.offsetLeft+document.body.scrollLeft - canvas.width / 2) / me.curScene.scaleX + canvas.width / 2 - me.curScene.translateX;
var py2 = (ev.clientY -canvas.offsetTop+document.body.scrollTop - canvas.height / 2) / me.curScene.scaleY + canvas.height / 2 - me.curScene.translateY;
var curEle = me.curScene.currentElement;
canvas.px2 =px2;
canvas.py2 = py2;
if(curEle){
var dx = px2-curEle.pointX;
var dy = py2-curEle.pointY;
if(curEle.childs){
curEle.childs.forEach(function(ele){
ele.x+=dx-curEle.x;
ele.y+=dy-curEle.y;
});
}
curEle.x = dx;
curEle.y = dy;
}else{
if(me.curScene.dragEnable){
me.curScene.translateX +=px2-px;
me.curScene.translateY +=py2-py;
}
}
}
document.onmouseup = function(){
canvas.onmousemove = null;
canvas.onmouseup = null;
me.canvas.style.cursor = "default";
}
};
canvas.onmousewheel = function(ev){
var ev = ev || window.event;
if(ev.deltaY>0){
me.curScene.scaleY *= me.curScene.wheelZoom;
me.curScene.scaleX *= me.curScene.wheelZoom;
}else{
me.curScene.scaleY /= me.curScene.wheelZoom;
me.curScene.scaleX /= me.curScene.wheelZoom;
}
//ev.preventDefault();
}
document.onmousemove = function(ev){
ev = ev || event;
me.curScene.focus = null;
var px = (ev.clientX -canvas.offsetLeft+document.body.scrollLeft - canvas.width / 2) / me.curScene.scaleX + canvas.width / 2 - me.curScene.translateX;
var py = (ev.clientY -canvas.offsetTop+document.body.scrollTop - canvas.height / 2) / me.curScene.scaleY + canvas.height / 2 - me.curScene.translateY;
me.curScene.childs.forEach(function(ele){
if(ele.elementType == "node" || ele.elementType == "link"){
if(ele.inBound(px,py)){
me.curScene.focus = ele;
}
}
});
}
void function(){
if(me.curScene){
// me.canvas.height = parseInt(me.canvas.style.height)/me.curScene.scaleX;
// me.canvas.width = parseInt(me.canvas.style.width)/me.curScene.scaleY;
me.curScene.paint(me.ctx);
}
setTimeout(arguments.callee,20);
}();
}
function Scene(stage){
stage.curScene = this;
this.stage = stage;
this.childs = [];
this.scaleX = 1;
this.scaleY = 1;
this.translateX = 0;
this.translateY = 0;
this.bgStyle = "gray";
this.alpha = 255;
this.wheelZoom = 0.95;
this.dragEnable = true;//是否可以拖拽
this.onClick = function(params){
console.log(params);
}
this.dbClick = function(params){
console.log(params);
}
this.sort = function(){
this.childs.sort(function(a,b){
function ab(ele){
switch(ele.elementType){
case "container":
return 0;
case "link":
return 1;
case "node":
case "text":
return 3;
}
}
return ab(a)-ab(b);
});
}
this.add = function(ele){
if(this.childs.indexOf(ele)==-1){
this.childs.push(ele);
}
ele.scene = this;
this.sort();
}
this.paint = function(ctx){
var canvas = this.stage.canvas;
var ctx = this.stage.ctx;
this.childs.forEach(function(ele){
if(ele.elementType == "container"){
ele.childs.forEach(function(node){
if(node.x<ele.x){
node.x = ele.x;
}else if(node.x+node.width>ele.x+ele.width){
node.x = ele.x+ele.width-node.width;
}
if(node.y<ele.y){
node.y = ele.y;
}
else if(node.y+node.height>ele.y+ele.height){
node.y = ele.y+ele.height-node.height;
}
});
}
});
ctx.save();
//清除背景
ctx.save();
ctx.fillStyle = this.bgStyle;
ctx.fillRect(0,0,canvas.width,canvas.height);
ctx.restore();
ctx.translate(this.translateX,this.translateY);
ctx.translate(canvas.width/2-this.translateX,canvas.height/2-this.translateY);
ctx.scale(this.scaleX,this.scaleY);
ctx.fillStyle = "black";
var wh = 10;
ctx.fillRect(-wh/2,-wh/2,wh,wh);
ctx.translate(-canvas.width/2+this.translateX
基于HTML5 Canvas的关系、拓扑图形化界面开发工具包,完全开源,参照于jtopo.zip
版权申诉
161 浏览量
2024-02-14
15:56:22
上传
评论
收藏 381KB ZIP 举报
基于HTML5 Canvas的关系、拓扑图形化界面开发工具包,完全开源,参照于jtopo.zip （37个子文件） 
OpenTopo-master js 
extended.js 2KB nav.js 2KB util.js 3KB jquery-1.11.1.min.js 94KB base.js 283B bootstrap-3.3.5 js bootstrap.js 67KB npm.js 484B bootstrap.min.js 36KB css bootstrap.min.css 120KB bootstrap-theme.css.map 47KB bootstrap-theme.css 26KB bootstrap.css.map 381KB bootstrap.css 144KB bootstrap-theme.min.css 23KB fonts 
glyphicons-halflings-regular.svg 106KB glyphicons-halflings-regular.ttf 44KB glyphicons-halflings-regular.woff 23KB glyphicons-halflings-regular.eot 20KB glyphicons-halflings-regular.woff2 18KB jtopo-0.4.8-min.js 114KB
api.html 630B example.html 667B quickGetStart.html 649B .idea workspace-DESKTOP-1H8FM1V.xml 31KB vcs.xml 219B misc.xml 199B modules.xml 256B aa.html 183B CNAME 17B t1.html 25KB download.html 728B
fhq.png 5KB jkj.png 40KB b.html 219B index.html 658B about.html 622B OpenTopo.iml 296B资源评论
