整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
SS的強(qiáng)大和精妙，只有在認(rèn)真研讀其代碼之后才會(huì)深刻明白。
今日繼續(xù)用純CSS畫圖，并給大家整理了本文中所有代碼，需要的小伙伴可以私信我哦。
首先，用CSS畫一個(gè)陰陽(yáng)圖，如下：
代碼也很簡(jiǎn)單：
#yin-yang {
width: 96px;
height: 48px;
background: #eee;
border-color: red;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 100%;
position: relative;
}
#yin-yang:before {
content: "";
position: absolute;
top: 50%;
left: 0;
background: #eee;
border: 18px solid red;
border-radius: 100%;
width: 12px;
height: 12px;
}
#yin-yang:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: red;
border: 18px solid #eee;
border-radius:100%;
width: 12px;
height: 12px;
}
當(dāng)然，顏色什么的，可以隨便改啦~
再畫一個(gè)可愛(ài)的雞蛋~~~像這樣：
代碼僅僅幾句話：
#egg {
display:block;
width: 126px;
height: 180px;
background-color: red;
-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
長(zhǎng)這樣：
代碼非常非常少：
#moon {
width: 80px;
height: 80px;
border-radius: 50%;
box-shadow: 15px 15px 0 0 red;
}
是不是很神奇？不敢相信這幾句代碼居然有這樣的功力？
那就打開(kāi)電腦，按照我之前講的方法創(chuàng)建一個(gè)html試試吧~
不知道怎么創(chuàng)建的小伙伴看這里>>css3制作圖形大全：簡(jiǎn)單幾句代碼畫出漂亮的圖形，一起來(lái)看看吧~
itHub 項(xiàng)目上好項(xiàng)目真的很多，但作者長(zhǎng)的這么漂亮的肯定屈指可數(shù)了。
如圖所示，這位小姐姐的名字叫 Diana Smith ，在她的個(gè)人博客上介紹自己是一位 JavaScript 開(kāi)發(fā)人員，技能樹(shù)包含 React / Vue / Backbone / jQuery ，還是一位 CSS 專家（LESS 和 SASS 雙修），同時(shí)也是一位響應(yīng)式設(shè)計(jì)的 UI 工程師。
她在 GitHub 上星數(shù)最高的一個(gè)項(xiàng)目，是用 HTML/CSS 創(chuàng)作了仿油畫作品。
這吹彈可破的質(zhì)感、精妙的構(gòu)圖、強(qiáng)烈又不違和的色彩搭配，不得不說(shuō)“畫如其人”啊。
而且，這些圖片是只用 CSS 和 HTML，所有元素都是手動(dòng)輸入，僅允許使用 Atom 文本編輯器和 Chrome 開(kāi)發(fā)者工具。
說(shuō)實(shí)話，網(wǎng)頁(yè)三兄弟 HTML、CSS、JavaScript 大家都不陌生，但誰(shuí)能想到能玩出這樣的花來(lái)呢？
作者小姐姐的個(gè)人博客中分享了一篇文章，其中有一個(gè)觀點(diǎn)是：“當(dāng)你只擁有一把 CSS 錘子時(shí)，世界就像是 CSS 釘子。”在工作之外，她也會(huì)用 CSS 來(lái)尋求藝術(shù)靈感。
作為前端，我們每天都在與這三兄弟打交道，但你真的了解他們么？你知道他們使用過(guò)程中的一些奇淫巧技么？
在各種技術(shù)論壇和貼吧里，前端算不算真正的程序員一直都是一個(gè)被討論的問(wèn)題。
但我覺(jué)得這個(gè)問(wèn)題毫無(wú)意義啊，是又如何不是又如何，我只知道對(duì)于全世界所有的網(wǎng)站而言，無(wú)論其服務(wù)器端的語(yǔ)言是什么，前端都使用了 HTML + CSS。
很久之前我保存了一張微博上的圖片，是一個(gè)前端工程師的技能樹(shù)。雖然隨著時(shí)間的推移很多內(nèi)容都需要更新，但從圖上我們也能看出前端工程師絕對(duì)不只是簡(jiǎn)單的切切頁(yè)面而已。
前端工程師，首先是工程師，然后才是前端工程師。工程師的工作是用技術(shù)去解決業(yè)務(wù)上遇到的問(wèn)題，所謂的前端后端只是分工不同。目前前端能容納的知識(shí)領(lǐng)域越來(lái)越廣，之后也將需要由更專業(yè)的人來(lái)完成工作，所以前端的路還可以走的很長(zhǎng)。
今天，就和大家介紹一下網(wǎng)頁(yè)三劍客分別是什么：
1. HTML
以前網(wǎng)頁(yè)都是非常單純的資訊呈現(xiàn)，所以有一些聰明的工程師想到，只要在電腦上裝了一個(gè)瀏覽器，然后制定一個(gè)標(biāo)準(zhǔn)，讓瀏覽器能正確呈現(xiàn)網(wǎng)頁(yè)就好了。
這個(gè)標(biāo)準(zhǔn)就是 HTML，HTML 用 tag 的方式告訴瀏覽器資訊該如何呈現(xiàn)，舉例：瀏覽器讀到 image 這個(gè) tag 就知道要在網(wǎng)頁(yè)上擺一張圖片，讀到 button 就知道要在網(wǎng)頁(yè)上放一顆按鈕。
如此一來(lái)，我只要制定一系列常用的tag (例如<h1>,<h2>,<p>,<image>,<input>等等)，就能讓瀏覽器呈現(xiàn)圖文并茂的網(wǎng)頁(yè)。
一個(gè)好的網(wǎng)頁(yè)其 HTML 可以說(shuō)是相當(dāng)單純且具有易讀性，這種網(wǎng)頁(yè)不但方便前端工程師進(jìn)行后續(xù)的維護(hù)外，也比較容易讓你的網(wǎng)頁(yè)增加曝光率讓搜尋引擎能把你的網(wǎng)頁(yè)擺在最前面，此種行為稱為 SEO。
2. CSS
有了 HTML 后，大家還是不滿意，因?yàn)閱渭冇?HTML 語(yǔ)言描述出來(lái)的網(wǎng)頁(yè)很丑，工程師想出了一個(gè)方法，就是制定一種描述網(wǎng)頁(yè)外觀的語(yǔ)言，再讓它變成一種標(biāo)準(zhǔn)，這樣瀏覽器也就會(huì)知道如何美化網(wǎng)頁(yè)了，這個(gè)語(yǔ)言就是 CSS。CSS 提供很多很厲害的效果和描述外觀的屬性，例如讓圖片變模糊、變亮、旋轉(zhuǎn)，或者改變字體的顏色。
從 1997 年 CSS 1.0 發(fā)布到如今，從最開(kāi)始只支持簡(jiǎn)單的文字排版到如今已經(jīng)可以做出酷炫的 3D 動(dòng)畫，CSS 已經(jīng)走過(guò)了 22 個(gè)年頭，其發(fā)展如圖所示：
隨著互聯(lián)網(wǎng)的發(fā)展，人們對(duì)網(wǎng)頁(yè)的要求已經(jīng)是從只要展示圖文就好變成了各種交互跟視覺(jué)效果都需要有著更多的體驗(yàn)要求。CSS 為此也是不斷的更新著。
3. JavaScript
但很多情況下僅憑 HTML + CSS 還是不夠的。光是呈現(xiàn)畫面總少了點(diǎn)趣味，我們希望網(wǎng)站能和使用者有互動(dòng)，JavaScript 就是用來(lái)撰寫這些互動(dòng)行為的程式語(yǔ)言。
Javascript 能監(jiān)聽(tīng)網(wǎng)頁(yè)上的各種操作行為，例如移動(dòng)滑鼠、點(diǎn)擊按鈕、網(wǎng)頁(yè)縮放、輸入文字等等。
總結(jié)一下：
但光學(xué)會(huì)這三樣?xùn)|西，仍然無(wú)法滿足工程師開(kāi)發(fā)上的需要，為了開(kāi)發(fā)的效率，不想重新造輪子，所有的開(kāi)發(fā)語(yǔ)言生態(tài)系都一定會(huì)衍生出各種 framework 和 library。
常見(jiàn)的 JavaScript 框架有 Vue.js、AngularJS、ReactJS、jQuery 等等，各有喜好者，但目的都是為了簡(jiǎn)化開(kāi)發(fā)復(fù)雜度，把前后端分開(kāi)，提高重復(fù)使用性，可維護(hù)性。
很多人都說(shuō)前端簡(jiǎn)單，但其實(shí)前端并不是簡(jiǎn)單，而是前端的學(xué)習(xí)反饋非常直接，上手容易并且很快就能見(jiàn)效，這也造成了前端很容易的假象。
但實(shí)際上，掌握 HTML + CSS + JavaScript，了解一些后端知識(shí)，只能說(shuō)是一個(gè)合格的前端工程師；要想達(dá)到 80 分，就要了解業(yè)務(wù)，對(duì)于業(yè)務(wù)的需求和架構(gòu)設(shè)計(jì)有真正的理解和設(shè)計(jì)；而行業(yè)內(nèi)最稀缺的前端大牛，則超過(guò)了一般前端的范疇，更接近于「以前端開(kāi)發(fā)為主的全棧工程師」。
在 20 年前，前端的概念其實(shí)還不常見(jiàn)，就連程序員這個(gè)大領(lǐng)域也沒(méi)有過(guò)多的細(xì)分，基本上都是一個(gè)人或者幾個(gè)人一起完成一個(gè)項(xiàng)目。
隨著行業(yè)的變化和互聯(lián)網(wǎng)的發(fā)展，情況和之前大不相同了。2010 年開(kāi)始，企業(yè)需要更多在某一領(lǐng)域更專業(yè)、更垂直的開(kāi)發(fā)者，也就造成了現(xiàn)在的前后端分離。
而現(xiàn)在情況又有所變化，用 Node.js、Meteor.js 這類運(yùn)行環(huán)境來(lái)說(shuō)，他們的出現(xiàn)讓前端工程師也開(kāi)始進(jìn)行服務(wù)器開(kāi)發(fā)，逐漸又在向全棧靠攏。
前不久有個(gè)觀點(diǎn)很有意思，說(shuō)是到了云時(shí)代，一家企業(yè)只要招幾個(gè)前端工程師就可以了。
運(yùn)維通過(guò)控制臺(tái)就能完成，開(kāi)發(fā)借助 Serverless 和編排工具就能實(shí)現(xiàn)無(wú)服務(wù)端。在更之后的未來(lái)，無(wú)論是前端工程師還是全棧工程師，都將不復(fù)存在，應(yīng)該叫端到端(F2E -> E2E)工程師了。
所以我們不需要界定崗位的優(yōu)劣，不管是前端還是后端，只要你有能力、有熱情，都是稀缺的人才，學(xué)的一知半解想渾水摸魚的人，也就只能是趁著行業(yè)的紅利混口飯吃。
我們的開(kāi)發(fā)工程中經(jīng)常會(huì)使用到各種圖，所謂的圖就是由節(jié)點(diǎn)和節(jié)點(diǎn)之間的連接所形成的系統(tǒng)，數(shù)學(xué)上專門有一個(gè)分支叫圖論（Graph Theroy）。利用圖我們可以做很多工具，比如思維導(dǎo)圖，流程圖，狀態(tài)機(jī)，組織架構(gòu)圖，等等。今天我要做的是用開(kāi)源的HTML5工具來(lái)快速構(gòu)造一個(gè)做圖的工具。
工預(yù)善其事，必先利其器。第一件事是選擇一件合適的工具，開(kāi)源時(shí)代，程序員還是很幸福的，選擇很多。
最終，我選擇了jsPlumb，因?yàn)樗耆_(kāi)源，使用很簡(jiǎn)單，用D3的話可能會(huì)多花很多功夫。joint.js也不錯(cuò)。大家可以根據(jù)自己的需要選擇。
下面我們一步一步的來(lái)使用jsPlumb來(lái)創(chuàng)建我們的流程圖工具。
第一步是等待DOM和jsPlumb初始化完畢，類似document.ready()和jquery.ready(), 要使用jsPlumb, 需要把代碼放在這個(gè)函數(shù)里：
jsPlumb.ready(function()?{
????//?...?your?code?goes?here?...
}創(chuàng)建一個(gè)jsPlumb的實(shí)例，并初始化jsPlumb的配置參數(shù)：
//Initialize?JsPlumb
var?color?=?"#E8C870";
var?instance?=?jsPlumb.getInstance({
????//?notice?the?'curviness'?argument?to?this?Bezier?curve.??the?curves?on?this?page?are?far?smoother
????//?than?the?curves?on?the?first?demo,?which?use?the?default?curviness?value.??????
????Connector?:?[?"Bezier",?{?curviness:50?}?],
????DragOptions?:?{?cursor:?"pointer",?zIndex:2000?},
????PaintStyle?:?{?strokeStyle:color,?lineWidth:2?},
????EndpointStyle?:?{?radius:5,?fillStyle:color?},
????HoverPaintStyle?:?{strokeStyle:"#7073EB"?},
????EndpointHoverStyle?:?{fillStyle:"#7073EB"?},
????Container:"container-id"
?});這里給給出了一些配置包括，連接線（這里配置了一個(gè)貝塞爾曲線），線的風(fēng)格，連接點(diǎn)得風(fēng)格。Container需要配置一個(gè)對(duì)應(yīng)的DIV容器的id。（這里也可以使用setContainer的方法）
下面我們要?jiǎng)?chuàng)建一個(gè)節(jié)點(diǎn)（node），每一個(gè)節(jié)點(diǎn)可以用一個(gè)DIV來(lái)實(shí)現(xiàn)。我這里提供了一個(gè)函數(shù)來(lái)創(chuàng)建節(jié)點(diǎn)。
function?addNode(parentId,?nodeId,?nodeLable,?position)?{
??var?panel?=?d3.select("#"?+?parentId);
??panel.append('div').style('width','120px').style('height','50px')
????.style('position','absolute')
????.style('top',position.y).style('left',position.x)
????.style('border','2px?#9DFFCA?solid').attr('align','center')
????.attr('id',nodeId).classed('node',true)
????.text(nodeLable);
??return?jsPlumb.getSelector('#'?+?nodeId)[0];
}這里做的事情就是創(chuàng)建了一個(gè)DIV元素，并放在對(duì)應(yīng)的容器的制定位置上，注意為了支持拖拽的功能，必須使用position:absolute 。
我使用D3來(lái)操作DOM，大家可能會(huì)更習(xí)慣JQuery，這純屬個(gè)人喜好的問(wèn)題。
最后返回創(chuàng)建節(jié)點(diǎn)的實(shí)例引用，這是的selector使用了jsPlumb.getSelector()方法，它和JQuery的selector是一樣的，這樣用的好處是你可以使用不同的DOM操作庫(kù)，例如Vanilla
下面我使用一個(gè)函數(shù)來(lái)創(chuàng)建端點(diǎn)/錨點(diǎn)（anchor），錨點(diǎn)就是節(jié)點(diǎn)上的連接點(diǎn)，用于連接不同的節(jié)點(diǎn)。
function?addPorts(instance,?node,?ports,?type)?{
??//Assume?horizental?layout
??var?number_of_ports?=?ports.length;
??var?i?=?0;
??var?height?=?$(node).height();??//Note,?jquery?does?not?include?border?for?height
??var?y_offset?=?1?/?(?number_of_ports?+?1);
??var?y?=?0;
??for?(?;?i?<?number_of_ports;?i++?)?{
????var?anchor?=?[0,0,0,0];
????var?paintStyle?=?{?radius:5,?fillStyle:'#FF8891'?};
????var?isSource?=?false,?isTarget?=?false;
????if?(?type?===?'output'?)?{
??????anchor[0]?=?1;
??????paintStyle.fillStyle?=?'#D4FFD6';
??????isSource?=?true;
????}?else?{
??????isTarget?=true;
????}
????anchor[1]?=?y?+?y_offset;
????y?=?anchor[1];
????instance.addEndpoint(node,?{
??????uuid:node.getAttribute("id")?+?"-"?+?ports[i],
??????paintStyle:?paintStyle,
??????anchor:anchor,
??????maxConnections:-1,
??????isSource:isSource,
??????isTarget:isTarget
????});
??}
}instance是jsPlumb的實(shí)例
node是我們用addNode方法創(chuàng)建的Node實(shí)例
ports，是一個(gè)string的數(shù)組，指定端點(diǎn)的個(gè)數(shù)和名字
type，可能是output或者input，指定端點(diǎn)的種類，一個(gè)節(jié)點(diǎn)的輸出端口可以連接另一個(gè)節(jié)點(diǎn)的輸入端口。
這里anchor是一個(gè)四維數(shù)組，0維和1維分別是錨點(diǎn)在節(jié)點(diǎn)x軸和y軸的偏移百分比。我這里希望把端口畫在節(jié)點(diǎn)的左右兩側(cè)，并按照端口的數(shù)量均勻分布。
最后使用instance.addEndpoint來(lái)創(chuàng)建端點(diǎn)。注意這里只要指定isSource和isTarget就可以用drag&drop的方式來(lái)連接端點(diǎn)，非常方便。
下面一步我們提供一個(gè)函數(shù)來(lái)連接端點(diǎn)：
function?connectPorts(instance,?node1,?port1,?node2?,?port2)?{
??//?declare?some?common?values:
??var?color?=?"gray";
??var?arrowCommon?=?{?foldback:0.8,?fillStyle:color,?width:5?},
??//?use?three-arg?spec?to?create?two?different?arrows?with?the?common?values:
??overlays?=?[
????[?"Arrow",?{?location:0.8?},?arrowCommon?],
????[?"Arrow",?{?location:0.2,?direction:-1?},?arrowCommon?]
??];
??var?uuid_source?=?node1.getAttribute("id")?+?"-"?+?port1;
??var?uuid_target?=?node2.getAttribute("id")?+?"-"?+?port2;
??instance.connect({uuids:[uuid_source,?uuid_target]});
}node1和node2是源節(jié)點(diǎn)和目標(biāo)節(jié)點(diǎn)的引用，port1和port2是源端口和目標(biāo)端口的名字。
使用instance.connect方法來(lái)創(chuàng)建連接。 overlays用來(lái)添加連接線的箭頭效果或者其他風(fēng)格，我這里沒(méi)有使用，因?yàn)橛X(jué)得都不是很好看。大家如果要用，只要把overlays加入到instance.connect的方法參數(shù)就可以了。
調(diào)用以上方法來(lái)創(chuàng)建節(jié)點(diǎn)，端點(diǎn)和連接線。
var?node1?=?addNode('container-id','node1',?'node1',?{x:'80px',y:'20px'});
var?node2?=?addNode('container-id','node2',?'node2',?{x:'280px',y:'20px'});
addPorts(instance,?node1,?['out1','out2'],'output');
addPorts(instance,?node2,?['in','in1','in2'],'input');
connectPorts(instance,?node1,?'out2',?node2,?'in');這里我們創(chuàng)建了兩個(gè)節(jié)點(diǎn)，第一個(gè)節(jié)點(diǎn)有兩個(gè)輸出端口，第二個(gè)節(jié)點(diǎn)有三個(gè)輸入端口，然后把第一個(gè)節(jié)點(diǎn)的out2端口連接到第二個(gè)端點(diǎn)的in端口。效果如下：
最后我們給節(jié)點(diǎn)增加drag&drop的功能，這樣我們就可以拖動(dòng)這些節(jié)點(diǎn)來(lái)改變圖的布局了。
instance.draggable($('.node'));這里似乎依賴于JQuery-UI,我還不是很清楚。
我們已經(jīng)初步具有了創(chuàng)建圖的功能，可是節(jié)點(diǎn)的創(chuàng)建必須通過(guò)程序，我們希望用交互的方式來(lái)創(chuàng)建節(jié)點(diǎn)。
通常我們希望有一個(gè)tree view的控件，讓后通過(guò)拖拽來(lái)創(chuàng)建對(duì)應(yīng)類型的節(jié)點(diǎn)。這里我使用了這個(gè)開(kāi)源的tree view，基于bootstrap https://github.com/jonmiles/bootstrap-treeview
我們先創(chuàng)建一個(gè)tree view：
function?getTreeData()?{
??var?tree?=?[
????{
??????text:?"Nodes",
??????nodes:?[
????????{
??????????text:?"Node1",
????????},
????????{
??????????text:?"Node2"
????????}
??????]
????}
??];?
??return?tree;
}
//Initialize?Control?Tree?View
$('#control-panel').treeview({data:?getTreeData()});樹(shù)上有兩個(gè)節(jié)點(diǎn):
然后我實(shí)現(xiàn)從樹(shù)上拖拽對(duì)應(yīng)的節(jié)點(diǎn)，到流程圖上的邏輯。
//Handle?drag?and?drop
$('.list-group-item').attr('draggable','true').on('dragstart',?function(ev){
??//ev.dataTransfer.setData("text",?ev.target.id);
??ev.originalEvent.dataTransfer.setData('text',ev.target.textContent);
??console.log('drag?start');
});
$('#container-id').on('drop',?function(ev){
??//avoid?event?conlict?for?jsPlumb
??if?(ev.target.className.indexOf('_jsPlumb')?>=?0?)?{
????return;
??}
??ev.preventDefault();
??var?mx?=?''?+?ev.originalEvent.offsetX?+?'px';
??var?my?=?''?+?ev.originalEvent.offsetY?+?'px';
??console.log('on?drop?:?'?+?ev.originalEvent.dataTransfer.getData('text'));
??var?uid?=?new?Date().getTime();
??var?node?=?addNode('flow-panel','node'?+?uid,?'node',?{x:mx,y:my});
??addPorts(instance,?node,?['out'],'output');
??addPorts(instance,?node,?['in1','in2'],'input');
??instance.draggable($(node));
}).on('dragover',?function(ev){
??ev.preventDefault();
??console.log('on?drag?over');
});這里要注意的是要避免和jsPlumb拖拽端點(diǎn)的邏輯沖突，當(dāng)檢測(cè)到target是jsPlumb對(duì)象是需要直接從drop方法中退出以執(zhí)行對(duì)應(yīng)的jsPlumb的drop邏輯。
好了，一個(gè)繪制流程圖的軟件工具初步完工。
我把代碼放在oschina的代碼托管服務(wù)上了， 大家有興趣可以去試試。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
