摘要:身為菜鳥的我還是很吃力的這句純屬?gòu)U話前言系統(tǒng)代碼比較凌亂,沒有結(jié)果優(yōu)化特別前端部分代碼比較亂,其中不免包含一些極端的處理方法,請(qǐng)讀者提取對(duì)自己有用的東西。問題四次貝塞爾曲線在每個(gè)節(jié)點(diǎn)中上下都會(huì)有個(gè)或多個(gè)輸入輸出端點(diǎn),注意數(shù)據(jù)源沒有輸入端點(diǎn)。
項(xiàng)目演示地址:http://vidanao.com/ml
》注意1:前端兼容性不太好,360瀏覽器比較兼容;
》注意2:此vidanao.com也是我的個(gè)人博文主頁(yè),但目前還沒部署源碼地址:https://github.com/Liwengbin/mml
開發(fā)背景:
大四上的一次實(shí)踐,那時(shí)一些原因我了解到這個(gè)項(xiàng)目的需求,開始接觸到了Vue以及SpringBoot,并花時(shí)間開始開發(fā)這個(gè)項(xiàng)目的需求。(身為菜鳥的我還是很吃力的!···這句純屬?gòu)U話)
前言:
系統(tǒng)代碼比較凌亂,沒有結(jié)果優(yōu)化,特別前端SVG部分代碼比較亂,其中不免包含一些極端的處理方法,請(qǐng)讀者提取對(duì)自己有用的東西。例如一下5問。請(qǐng)各位大神多多指點(diǎn)!
簡(jiǎn)介:
該項(xiàng)目只開放到一半就結(jié)束了,系統(tǒng)分為簡(jiǎn)單的兩部分:
Vue 的前端 + SpringBoot&Mysql的后端
后端:的話沒什么東西,也就是些數(shù)據(jù)的增刪改查,所以不做多說(shuō),看源碼。
說(shuō)說(shuō)前端:
提出幾個(gè)問題
問題1:svg 中包含html標(biāo)簽問題?
問題2:將HTML標(biāo)簽拖著到Svg畫圖面板中,并實(shí)時(shí)渲染的問題?
問題3:倆個(gè)(node)節(jié)點(diǎn)間連線問題?
問題4:拖拽(node)節(jié)點(diǎn)連接線跟隨變動(dòng)的問題?
問題5:(node)節(jié)點(diǎn)鼠標(biāo)右擊菜單問題?
問題1:https://developer.mozilla.org...
這里我使用的是標(biāo)簽
問題2:(拖拽使用的是)https://developer.mozilla.org...
拖拽復(fù)制SVG面板外的HTML標(biāo)簽到SVG面板中:思想并沒有正真的HTML拖拽, (1)只是通過(guò)鼠標(biāo)按下左鍵 - ->將html中的數(shù)據(jù)保存在拖拽方法提供的變量中 (2)并拖動(dòng) (3)到SVG面板中獲取鼠標(biāo)最后一次抬起的位置,組裝nodes數(shù)據(jù)(這里就自動(dòng)提交數(shù)據(jù)到后臺(tái)),因?yàn)閿?shù)據(jù)是雙向綁定的所以會(huì)自動(dòng)渲染到SVG面板中。
問題3:
四次貝塞爾曲線:https://www.zhangxinxu.com/wo...
在每個(gè)節(jié)點(diǎn)中上下都會(huì)有0個(gè)或多個(gè)輸入輸出端點(diǎn),注意:數(shù)據(jù)源沒有輸入端點(diǎn)。 每個(gè)端點(diǎn)都有自己的id,鼠標(biāo)點(diǎn)擊并移動(dòng)會(huì)通過(guò)ID找到起始點(diǎn)的位置,并使用path的 四次貝塞爾曲線 畫線 (這里依然是通過(guò)數(shù)據(jù)的雙向綁定來(lái)達(dá)到畫線的)
問題4:如果問題3沒問題,問題4就解決了
拖拽某個(gè)"node"節(jié)點(diǎn),通過(guò)數(shù)據(jù)源找到與其關(guān)聯(lián)的輸入輸出端點(diǎn)并對(duì)相關(guān)的端點(diǎn)間的連接線進(jìn)行計(jì)算,在通過(guò)數(shù)據(jù)自動(dòng)畫出變化
問題5:這個(gè)不說(shuō)了,網(wǎng)上一搜就有!如下演示
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/98321.html
摘要:身為菜鳥的我還是很吃力的這句純屬?gòu)U話前言系統(tǒng)代碼比較凌亂,沒有結(jié)果優(yōu)化特別前端部分代碼比較亂,其中不免包含一些極端的處理方法,請(qǐng)讀者提取對(duì)自己有用的東西。問題四次貝塞爾曲線在每個(gè)節(jié)點(diǎn)中上下都會(huì)有個(gè)或多個(gè)輸入輸出端點(diǎn),注意數(shù)據(jù)源沒有輸入端點(diǎn)。 項(xiàng)目演示地址:http://vidanao.com/ml》注意1:前端兼容性不太好,360瀏覽器比較兼容; 》注意2:此vidanao.com也是...
強(qiáng)力推薦!那些你不能錯(cuò)過(guò)的 GitHub 插件和工具 以代碼托管平臺(tái)起家的 GitHub 網(wǎng)站,已然成為全球程序員工作和生活中不可或缺的一份子。從優(yōu)秀的企業(yè),到優(yōu)秀的程序員,都將自己最優(yōu)秀的代碼作品存放在這片開源凈土里,供彼此學(xué)習(xí)交流。 GitHub Trending 欄目甚至已經(jīng)成為 IT 從業(yè)人員的新聞日?qǐng)?bào),每日必讀。在之前的一… PostgreSQL 數(shù)據(jù)庫(kù)的前世今生 編輯:IT大咖說(shuō)閱讀字...
強(qiáng)力推薦!那些你不能錯(cuò)過(guò)的 GitHub 插件和工具 以代碼托管平臺(tái)起家的 GitHub 網(wǎng)站,已然成為全球程序員工作和生活中不可或缺的一份子。從優(yōu)秀的企業(yè),到優(yōu)秀的程序員,都將自己最優(yōu)秀的代碼作品存放在這片開源凈土里,供彼此學(xué)習(xí)交流。 GitHub Trending 欄目甚至已經(jīng)成為 IT 從業(yè)人員的新聞日?qǐng)?bào),每日必讀。在之前的一… PostgreSQL 數(shù)據(jù)庫(kù)的前世今生 編輯:IT大咖說(shuō)閱讀字...
摘要:巔峰人生年老兵思路上的轉(zhuǎn)變,遠(yuǎn)比單純提升技術(shù)更有價(jià)值本文節(jié)選自趙成教授在極客時(shí)間開設(shè)的趙成的運(yùn)維體系管理課,是其對(duì)自己十年技術(shù)生涯的回顧與總結(jié)。趙成教授來(lái)自美麗聯(lián)合集團(tuán),集團(tuán)旗下兩大主力產(chǎn)品是蘑菇街和美麗說(shuō),目前負(fù)責(zé)管理集團(tuán)的技術(shù)服務(wù)團(tuán)隊(duì)。 showImg(https://segmentfault.com/img/remote/1460000012476504?w=1240&h=826...
摘要:建立該倉(cāng)庫(kù)的目的主要是整理收集學(xué)習(xí)資源,統(tǒng)一管理,方便隨時(shí)查找。目前整合的學(xué)習(xí)資源只是前端方向的,可能會(huì)存在漏缺比較好的資源,需要慢慢的完善它,歡迎在該上補(bǔ)充資源或者提供寶貴的建議。 說(shuō)明 平時(shí)的學(xué)習(xí)資源都比較的凌亂,看到好的資源都是直接收藏在瀏覽器的收藏夾中,這樣其實(shí)并不方便,整理在云筆記上,也不方便查看修改記錄,索性就整理在 github 上并開源出來(lái),希望幫助大家能夠更快的找到需...
閱讀 3022·2021-11-18 10:07
閱讀 3765·2021-11-17 17:00
閱讀 2103·2021-11-15 18:01
閱讀 926·2021-10-11 10:58
閱讀 3373·2021-09-10 10:50
閱讀 3442·2021-08-13 15:05
閱讀 1229·2019-08-30 15:53
閱讀 2640·2019-08-29 13:01