这两天在跟产品讨论图的实现方式,给了一个同行的参考图。于是网罗了下,发现在基于canvas上写的jtopo插件。但是官方网站已经打不开了,再次上github搜索关键字,也没找到。快要放弃时,在码云上找到官网的代码。拉下来看demo,写的还是很强大的,对于目前我们来说是。
后面在github上也找到demo。目前还没用于项目,进行可行性分析和维护的概率。
简单代码示例:
var canvas;
var stage;
var scene;
$(function() {
canvas = document.getElementById('canvas');
stage = new JTopo.Stage(canvas);
//显示工具栏
showJTopoToobar(stage);
scene = new JTopo.Scene(stage);
scene.backgroundColor = "255.255.255";
scene.mode = "drag";
var node = new JTopo.Node("");
node.setSize(1298, 774);
node.setLocation(0, 0);
node.fontColor = "255,255,0"
node.textPosition = "Middle_Right";
node.setImage('https://raw.githubusercontent.com/wenco/jtopo/master/project_image/main.png', true);
node.draggable = "false";
node.selected = "false";
scene.add(node);
nodes[0] = node;
var node = new JTopo.Node("44.2");
node.setSize(0, 0);
node.setLocation(680, 209);
node.fontColor = "255,255,0"
node.textPosition = "Middle_Right";
node.font = "14px Consolas"
scene.add(node);
nodes[1] = node;
var node = new JTopo.Node("13.2");
node.setSize(0, 0);
node.setLocation(724, 209);
node.fontColor = "0,255,255"
node.textPosition = "Middle_Right";
node.font = "14px Consolas"
scene.add(node);
nodes[2] = node;
node.mousedown(function(event) {
if(event.button == 2) {
node.text = '按下右键';
} else if(event.button == 1) {
node.text = '按下中键';
} else if(event.button == 0) {
node.text = '按下左键';
}
});
node.mouseup(function(event) {
if(event.button == 2) {
node.text = '松开右键';
} else if(event.button == 1) {
node.text = '松开中键';
} else if(event.button == 0) {
node.text = '松开左键';
}
});
node.click(function(event) {
console.log("单击");
});
node.dbclick(function(event) {
console.log("双击");
});
node.mousedrag(function(event) {
console.log("拖拽");
});
node.mouseover(function(event) {
console.log("mouseover");
});
node.mousemove(function(event) {
console.log("mousemove");
});
node.mouseout(function(event) {
console.log("mouseout");
});
});