在Web開發(fā)中繪製路徑。

近日，在開發(fā)模擬AGV小車在場(chǎng)地中移動(dòng)的功能時(shí)遇見(jiàn)了難點(diǎn)。

首先是路徑的繪製。AGV小車的移動(dòng)通過(guò)地址標(biāo)簽和磁條節(jié)點(diǎn)標(biāo)簽控制。將地址標(biāo)簽連結(jié)形成路徑，借由一個(gè)點(diǎn)來(lái)模擬小車在路徑上移動(dòng)。我目前考慮到兩種實(shí)現(xiàn)方式，一種是SVG，另一種是Canvas。不過(guò)，SVG和Canvas我都是第一次接觸，所以在使用上有些困擾，希望各位不吝賜教。
SVG繪製路徑的方式。如果通過(guò)這樣的方式來(lái)繪製，未免太複雜，也不方便修改。但是它繪製出來(lái)是矢量圖像，縮放也不失真。

<?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繪製路徑的方式倒是相對(duì)方便，利於修改的，但是一旦圖像繪製完成，修改之後整個(gè)場(chǎng)景都需要重新繪製。并且它非常依賴分辨率，在繪製圖像的時(shí)候要時(shí)刻注意。

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();

我試著通過(guò)Paper.js來(lái)使用Canvas，不過(guò)效果不太理想。然後我也試用了SVG，在HTML文檔中直接使用<svg>能夠正確的繪製圖形，但是如果引用svg文件就會(huì)出現(xiàn)NOT FOUND`。

我在網(wǎng)頁(yè)中調(diào)用。

然後運(yùn)行服務(wù)器。出現(xiàn)了令人絕望的

我使用的PyCharm是支持svg文件格式的，但是Flask服務(wù)器似乎不能正確解析這個(gè)文件，希望有知情人能指點(diǎn)一下。
關(guān)於路徑的繪製，和控制動(dòng)畫，希望有大手能給一點(diǎn)思路，或者已有的、相關(guān)的解決方案。
感謝，再三感謝。

回答

編輯回答

嘟尛嘴

py不熟，給思路吧。

SVG和Canvas的區(qū)別，我覺(jué)得前者更偏重于聲明式（或者可以說(shuō)類似于HTML標(biāo)簽），而后者則更多的是命令式的（對(duì)應(yīng)Javascript語(yǔ)言）。這就導(dǎo)致了它們?cè)趹?yīng)用上，SVG使用固定/已有圖像、以及相對(duì)“固化”的動(dòng)畫效果時(shí)，會(huì)更有優(yōu)勢(shì)一些；而Canvas則足夠動(dòng)態(tài)，適用于一些需要復(fù)雜邏輯控制（舉個(gè)例子，比如繪制根據(jù)聲波變化的連續(xù)的正弦曲線）或者在2D/3D或者需要復(fù)雜圖形學(xué)參與的場(chǎng)合。至于矢量還是位圖，由于它們都具有操作位圖的能力，所以其實(shí)都無(wú)所謂。
題目中這個(gè)我覺(jué)得還是SVG更適合，前邊說(shuō)了SVG和HTML相對(duì)的會(huì)比較親和，所以如果不是特別大的文件，去掉頂部的XML和Doctype聲明之后，是可以直接嵌入到HTML之中的，比如我之前寫過(guò)的一個(gè)H5里，有幾張小圖都是單獨(dú)出現(xiàn)的，我為了避免逐個(gè)去定位，就把它們直接寫到了一個(gè)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)簽上其實(shí)就只有SVG命名空間（xmlns="http://www.w3.org/2000/svg"）、版本信息（版本號(hào)version="1.1"和相應(yīng)的語(yǔ)言集baseProfile="full"），然后再加個(gè)寬高就可以了（當(dāng)然如果有復(fù)雜縮放可以加上SVG視口屬性），定位直接用CSS定位就行。矢量的話也是一樣的思路，看你已經(jīng)寫了Demo，可以套進(jìn)去試試。

2017年7月8日 08:56