如何動態(tài)實現(xiàn)拓撲圖？
創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),淮南企業(yè)網(wǎng)站建設(shè),淮南品牌網(wǎng)站建設(shè),網(wǎng)站定制,淮南網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,淮南網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。
------解決方案--------------------
應(yīng)該是div+css來實現(xiàn)動態(tài)的 拓撲圖
ajax是用來對無刷新的拓撲圖進行支持的
------解決方案--------------------
找繪圖控件吧。網(wǎng)上好像有網(wǎng)頁畫流程圖的架構(gòu)，不過架構(gòu)很重，也不穩(wěn)定，建議你找個輕型的jquery控件，自己略做改動，做簡單實現(xiàn)
1、活版印刷
一個成功的網(wǎng)站只有很少的字體是類似的款式，而不是使用的字體。最好的網(wǎng)站應(yīng)該使用無襯線和無襯線字體，而不是兩者的結(jié)合。
印刷術(shù)的網(wǎng)站也應(yīng)該小心使用的字體，好的設(shè)計會加入一些類似的字體，而不是一個范圍內(nèi)型面。大多數(shù)瀏覽器都能識別特定數(shù)量的安全字體，這樣設(shè)計主要是利用以避免并發(fā)癥的發(fā)生。
2、代碼質(zhì)量
當創(chuàng)建一個網(wǎng)站，它是很好的做法，以符合標準。這包括代碼中的錯誤，代碼為更好的布局，以及確保你的ID和類的正確識別。這通常是通過描述指定元件做什么。
不符合標準的網(wǎng)站無法使用或容易出錯的，標準可以涉及到正確的頁面布局的可讀性，以及確保適當?shù)仃P(guān)閉了編碼元素。DOCTYPE聲明，這是用來突出顯示代碼中的錯誤。系統(tǒng)識別錯誤和不符合網(wǎng)頁設(shè)計標準。
3、視覺設(shè)計
良好的視覺設(shè)計網(wǎng)站上的標識，其目標市場。這可以是一個年齡組或特定的文化鏈，因此，設(shè)計人員應(yīng)了解其受眾的趨勢。設(shè)計人員也應(yīng)該明白他們設(shè)計的，這意味著一個企業(yè)網(wǎng)站不應(yīng)該被設(shè)計成一個社交媒體網(wǎng)站，例如相同類型的網(wǎng)站。
4、交互設(shè)計
對于網(wǎng)站來說，好的交互設(shè)計對網(wǎng)頁設(shè)計的整體起著至關(guān)重要的作用，一個好的交互不僅能大大提升頁面整體的設(shè)計效果，增強頁面的“活躍度”，還能有效提高用戶體驗，“屏蔽”單調(diào)的操作流程，使得產(chǎn)品、文化的表現(xiàn)都能最大化的呈現(xiàn)并傳達到相關(guān)的受眾。
5、內(nèi)容更新
企業(yè)Web站點建立后，要不斷更新網(wǎng)頁內(nèi)容。站點信息的不斷更新，讓瀏覽者了解企業(yè)的發(fā)展動態(tài)和網(wǎng)上職務(wù)等，同時也會幫助企業(yè)建立良好的形象。
參考資料來源：百度百科-網(wǎng)頁設(shè)計
首先需要了解什么是HTML5，然后介紹HTML5相關(guān)的工具（包括IDE，框架，組件等），最后用這些工具開發(fā)一個應(yīng)用，基本上論文就可以交差了。
至于開發(fā)框架，理解是各種不同功能的組件，一個web應(yīng)用需要各種第三方組件，比如基礎(chǔ)功能用到j(luò)Query，界面樣式用到Bootstrap，通用組件可以用到easyUI或者KendoUI，各種圖表用到highcharts，拓撲圖可以用mxGraph或者Qunee，通訊可以用Websocket，寫CSS用less，模塊化用requireJS或者SeaJS，移動平臺組件可以用jquerymobile或者senchatouch，觸摸交互擴展用hammer.js，如果要開發(fā)Hybrid應(yīng)用，可以借助phonegap，此外開發(fā)工具可以用webstorm。
//需要自己引入jQuery
!DOCTYPE?htmlhtmlhead
script?type="text/javascript"?src="jquery-3.0.0.js"/script
script?type="text/javascript"
//是否可以進行直線標記
var?flag?=?false;
//是否可以進行圓圈標記
var?flag1?=?false;
//是否可以進行文字標記
var?flag2?=?false;
//標記的開始坐標
var?x1?=?-10000;
var?y1?=?-10000;
//標記的結(jié)束坐標
var?x2?=?-10000;
var?y2?=?-10000;
//查找所有圖片,動態(tài)創(chuàng)建畫布
function?newCanvas?(){
//查找所有圖片，并且生成畫布
$("#body").find("img").each(function(i,e){
//獲取圖片長度寬度
var?imgWidth?=?$(this).attr("width");
var?imgHeight?=?$(this).attr("height");
//根據(jù)圖片動態(tài)創(chuàng)建畫布
var?canvas?=?document.createElement("canvas");
canvas.width?=?imgWidth;
canvas.height?=?imgHeight;
canvas.id?=?"canvas"+i;
$(canvas).css("border",?"1px?solid?#d3d3d3");
document.getElementById("myCan").appendChild(canvas);
//獲取畫布
var?c=document.getElementById("canvas"+i);??????????
var?ctx=c.getContext("2d");
//給畫布繪制圖片
var?imgId?=?$(this).attr("id");
var?img=document.getElementById(imgId);
$(img).ready(function()?{
ctx.drawImage(img,0,0,imgWidth,imgHeight);
});?
});
}
//動態(tài)清空所有畫布
function?clearCanvas?(){
//查找所有圖片，并且清空畫布
$("#body").find("img").each(function(i,e){
//獲取圖片長度寬度
var?imgWidth?=?$(this).attr("width");
var?imgHeight?=?$(this).attr("height");
//獲取圖片元素
var?img?=?e;
//查找所有畫布
$("#body").find("canvas").each(function(i,e){
//獲取畫布
var?c=?e;???????????
var?ctx=c.getContext("2d");
//繪制一個純白色畫布
ctx.clearRect(0,0,imgWidth,imgHeight);
//重新將原圖片加入到畫布中
ctx.drawImage(img,0,0,imgWidth,imgHeight);
});
});
}
//動態(tài)獲取所有畫布的Base64壓縮數(shù)據(jù)
function?copyCanvas?(){
//查找所有畫布
$("#body").find("canvas").each(function(i,e){
var?canvas?=?e;
var?dataURL?=?canvas.toDataURL();
var?b64?=?dataURL.substring(?22?);
console.log(b64);
console.log("**********************************************");
});
}
$(document).ready(function(){
//查找所有圖片,動態(tài)創(chuàng)建畫布
newCanvas();
//標記按鈕
$("#mark").click(function(){
flag?=?true;
});
//圓圈按鈕
$("#circle").click(function(){
flag1?=?true;
});
//清空按鈕
$("#clear").click(function(){
//動態(tài)清空所有畫布
clearCanvas();
});
//字體按鈕
$("#writeFont").click(function(){
flag2?=?true;
});
//獲取base64壓縮數(shù)據(jù)
$("#getData").click(function(){
//動態(tài)獲取所有畫布的Base64壓縮數(shù)據(jù)
copyCanvas?();
});
//給頁面所有畫布設(shè)置點擊事件
$(document).find("canvas").each(function(i){
$(this).bind("click",?mouseMove);
});
//畫布繪制標記
function?mouseMove(event){
var?id?=?$(this).attr("id");
var?c=document.getElementById(id);
var?ctx=c.getContext("2d");
//如果激活了直線標記按鈕
if(flag){
//獲取點擊位置的相對坐標
var?coord?=?getXAndY(event,$(this));
var?x?=?coord.x;
var?y?=?coord.y;
if(x1==-10000y1==-10000){
//還未進行選擇開始位置的坐標
x1?=?x;
y1?=?y;
}else?if?(x2==-10000y2==-10000){
//還未進行選擇結(jié)束位置的坐標
x2?=?x;
y2?=?y;
//繪制標記
//必須開啟beginPath，否則可能會出現(xiàn)之前繪制過的線條
ctx.beginPath();
ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.stroke();
//必須釋放closePath
ctx.closePath();
//初始化
flag?=?false;
x1?=?-10000;
y1?=?-10000;
x2?=?-10000;
y2?=?-10000;
}else{
alert("瀏覽器異常，請按F5刷新頁面重新標記！");
}
}else{
//alert("請先點擊標記按鈕再進行標記！");
}
//如果激活了圓圈按鈕
if(flag1){
//獲取點擊位置的相對坐標
var?coord?=?getXAndY(event,$(this));
var?x?=?coord.x;
var?y?=?coord.y;
//繪制圓圈標記
ctx.beginPath();
ctx.arc(x,y,10,0,2*Math.PI);
ctx.stroke();
//初始化
flag1?=?false?;?
}
//如果激活了文字標記按鈕
if(flag2){
//獲取點擊位置的相對坐標
var?coord?=?getXAndY(event,$(this));
var?x?=?coord.x;
var?y?=?coord.y;
var?user?=?window.prompt("請輸入標記內(nèi)容","");
//確定
if(user){
//繪制文字標記
ctx.font="16px?Arial";
ctx.fillText(user,x,y);
}
//初始化
flag2?=?false;
}
}
//獲取鼠標點擊畫布區(qū)域中的相對位置坐標
function?getXAndY(event,clickDom){
//鼠標點擊的絕對位置
Ev=?event?||?window.event;
var?mousePos?=?mouseCoords(event);
var?x?=?mousePos.x;
var?y?=?mousePos.y;
//alert("鼠標點擊的絕對位置坐標："+x+","+y);
//獲取canvas畫布在body中的絕對位置
var?x1?=?$(clickDom).offset().left;
var?y1?=?$(clickDom).offset().top;
//alert("畫布在body中的絕對位置坐標："+x1+","+y1);
//鼠標點擊位置的相對于canvas畫布的坐標
var?x2?=?x?-?x1;
var?y2?=?y?-?y1;
//alert("畫布在body中的相對位置坐標："+x2+","+y2);
return?{x:x2,y:y2};
}
//獲取鼠標點擊畫布區(qū)域中的絕對位置坐標
function?mouseCoords(event){
if(event.pageX?||?event.pageY){
return?{x:event.pageX,?y:event.pageY};
}
return{
x:event.clientX?+?document.body.scrollLeft?-?document.body.clientLeft,
y:event.clientY?+?document.body.scrollTop?-?document.body.clientTop
};
}???
});
/script/headbody?id="body"
div?id="myCan"
pImage?to?use:/p
img?id="scream"?src="test.jpg"?alt="The?Scream"?width="200"?height="200"/
img?id="scream1"?src="test.jpg"?alt="The?Scream"?width="200"?height="200"/
pCanvas:/p
/div
input?id="mark"?type="button"?value="標記"?/
input?id="circle"?type="button"?value="圈記"?/
input?id="writeFont"?type="button"?value="文字"?/
input?id="clear"?type="button"?value="清空"?/
input?id="getData"?type="button"?value="圖片生成Base64壓縮數(shù)據(jù)"?//body/html
重慶分公司
重慶分公司
