近日,在開發(fā)模擬AGV小車在場地中移動的功能時遇見了難點。
首先是路徑的繪製。AGV小車的移動通過地址標(biāo)簽和磁條節(jié)點標(biāo)簽控制。將地址標(biāo)簽連結(jié)形成路徑,借由一個點來模擬小車在路徑上移動。我目前考慮到兩種實現(xiàn)方式,一種是SVG
,另一種是Canvas
。不過,SVG
和Canvas
我都是第一次接觸,所以在使用上有些困擾,希望各位不吝賜教。SVG
繪製路徑的方式。如果通過這樣的方式來繪製,未免太複雜,也不方便修改。但是它繪製出來是矢量圖像,縮放也不失真。
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<path d="M250 150 L150 350 L350 350 Z" />
</svg>
Canvas
繪製路徑的方式倒是相對方便,利於修改的,但是一旦圖像繪製完成,修改之後整個場景都需要重新繪製。并且它非常依賴分辨率,在繪製圖像的時候要時刻注意。
var context = document.getElementById("canvas").getContext("2d");
context.lineWidth = 4;
// 畫一條垂直黑色線段
context.strokeStyle = "black";
context.moveTo(100, 10);
context.lineTo(100, 100);
context.stroke();
// 畫一條水平紅色線段
context.strokeStyle = "red";
context.lineTo(190, 100);
context.stroke();
我試著通過Paper.js
來使用Canvas
,不過效果不太理想。然後我也試用了SVG
,在HTML文檔中直接使用<svg>
能夠正確的繪製圖形,但是如果引用svg
文件就會出現(xiàn)NOT FOUND
`。
我在網(wǎng)頁中調(diào)用。
然後運行服務(wù)器。出現(xiàn)了令人絕望的
我使用的PyCharm是支持svg
文件格式的,但是Flask服務(wù)器似乎不能正確解析這個文件,希望有知情人能指點一下。
關(guān)於路徑的繪製,和控制動畫,希望有大手能給一點思路,或者已有的、相關(guān)的解決方案。
感謝,再三感謝。
py不熟,給思路吧。
SVG和Canvas的區(qū)別,我覺得前者更偏重于聲明式(或者可以說類似于HTML標(biāo)簽),而后者則更多的是命令式的(對應(yīng)Javascript語言)。這就導(dǎo)致了它們在應(yīng)用上,SVG使用固定/已有圖像、以及相對“固化”的動畫效果時,會更有優(yōu)勢一些;而Canvas則足夠動態(tài),適用于一些需要復(fù)雜邏輯控制(舉個例子,比如繪制根據(jù)聲波變化的連續(xù)的正弦曲線)或者在2D/3D或者需要復(fù)雜圖形學(xué)參與的場合。至于矢量還是位圖,由于它們都具有操作位圖的能力,所以其實都無所謂。
題目中這個我覺得還是SVG更適合,前邊說了SVG和HTML相對的會比較親和,所以如果不是特別大的文件,去掉頂部的XML和Doctype聲明之后,是可以直接嵌入到HTML之中的,比如我之前寫過的一個H5里,有幾張小圖都是單獨出現(xiàn)的,我為了避免逐個去定位,就把它們直接寫到了一個SVG容器里:
<svg id="awardOuter" version="1.1" baseProfile="full" width="540" height="541" xmlns="http://www.w3.org/2000/svg">
<defs>
<g id="first" width="150" height="175">
<image xlink:href="xxx.png" x="0" y="35" width="150" height="75"></image>
<text font-size="20" fill="white" x="75" y="130" text-anchor="middle">第一</text>
</g>
<g id="second" width="150" height="175" transform="rotate(120 75 87)">
<image xlink:href="yyy.png" x="0" y="35" width="150" height="75"></image>
<text font-size="20" fill="white" x="75" y="130" text-anchor="middle">第二</text>
</g>
<g id="third" width="150" height="175" transform="rotate(240 75 87)">
<image xlink:href="zzz.png" x="0" y="35" width="150" height="75"></image>
<text font-size="20" fill="white" x="75" y="130" text-anchor="middle">第三</text>
</g>
</defs>
<image xlink:href="img/temp.png" x="0" y="0" width="540" height="541"></image>
<use xlink:href="#first" x="195" y="20"></use>
<use xlink:href="#second" x="334" y="264"></use>
<use xlink:href="#third" x="50" y="264"></use>
</svg>
這段我是直接寫到HTML里的,可以看到SVG主標(biāo)簽上其實就只有SVG命名空間(xmlns="http://www.w3.org/2000/svg"
)、版本信息(版本號version="1.1"
和相應(yīng)的語言集baseProfile="full"
),然后再加個寬高就可以了(當(dāng)然如果有復(fù)雜縮放可以加上SVG視口屬性),定位直接用CSS定位就行。矢量的話也是一樣的思路,看你已經(jīng)寫了Demo,可以套進去試試。
北大青鳥APTECH成立于1999年。依托北京大學(xué)優(yōu)質(zhì)雄厚的教育資源和背景,秉承“教育改變生活”的發(fā)展理念,致力于培養(yǎng)中國IT技能型緊缺人才,是大數(shù)據(jù)專業(yè)的國家
北大青鳥中博軟件學(xué)院創(chuàng)立于2003年,作為華東區(qū)著名互聯(lián)網(wǎng)學(xué)院和江蘇省首批服務(wù)外包人才培訓(xùn)基地,中博成功培育了近30000名軟件工程師走向高薪崗位,合作企業(yè)超4
中公教育集團創(chuàng)建于1999年,經(jīng)過二十年潛心發(fā)展,已由一家北大畢業(yè)生自主創(chuàng)業(yè)的信息技術(shù)與教育服務(wù)機構(gòu),發(fā)展為教育服務(wù)業(yè)的綜合性企業(yè)集團,成為集合面授教學(xué)培訓(xùn)、網(wǎng)
達(dá)內(nèi)教育集團成立于2002年,是一家由留學(xué)海歸創(chuàng)辦的高端職業(yè)教育培訓(xùn)機構(gòu),是中國一站式人才培養(yǎng)平臺、一站式人才輸送平臺。2014年4月3日在美國成功上市,融資1
曾工作于聯(lián)想擔(dān)任系統(tǒng)開發(fā)工程師,曾在博彥科技股份有限公司擔(dān)任項目經(jīng)理從事移動互聯(lián)網(wǎng)管理及研發(fā)工作,曾創(chuàng)辦藍(lán)懿科技有限責(zé)任公司從事總經(jīng)理職務(wù)負(fù)責(zé)iOS教學(xué)及管理工作。
浪潮集團項目經(jīng)理。精通Java與.NET 技術(shù), 熟練的跨平臺面向?qū)ο箝_發(fā)經(jīng)驗,技術(shù)功底深厚。 授課風(fēng)格 授課風(fēng)格清新自然、條理清晰、主次分明、重點難點突出、引人入勝。
精通HTML5和CSS3;Javascript及主流js庫,具有快速界面開發(fā)的能力,對瀏覽器兼容性、前端性能優(yōu)化等有深入理解。精通網(wǎng)頁制作和網(wǎng)頁游戲開發(fā)。
具有10 年的Java 企業(yè)應(yīng)用開發(fā)經(jīng)驗。曾經(jīng)歷任德國Software AG 技術(shù)顧問,美國Dachieve 系統(tǒng)架構(gòu)師,美國AngelEngineers Inc. 系統(tǒng)架構(gòu)師。