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

近日，在開發(fā)模擬AGV小車在場地中移動的功能時遇見了難點。

首先是路徑的繪製。AGV小車的移動通過地址標簽和磁條節(jié)點標簽控制。將地址標簽連結(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)用。

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

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

回答

編輯回答

嘟尛嘴

py不熟，給思路吧。

SVG和Canvas的區(qū)別，我覺得前者更偏重于聲明式（或者可以說類似于HTML標簽），而后者則更多的是命令式的（對應Javascript語言）。這就導致了它們在應用上，SVG使用固定/已有圖像、以及相對“固化”的動畫效果時，會更有優(yōu)勢一些；而Canvas則足夠動態(tài)，適用于一些需要復雜邏輯控制（舉個例子，比如繪制根據(jù)聲波變化的連續(xù)的正弦曲線）或者在2D/3D或者需要復雜圖形學參與的場合。至于矢量還是位圖，由于它們都具有操作位圖的能力，所以其實都無所謂。
題目中這個我覺得還是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主標簽上其實就只有SVG命名空間（xmlns="http://www.w3.org/2000/svg"）、版本信息（版本號version="1.1"和相應的語言集baseProfile="full"），然后再加個寬高就可以了（當然如果有復雜縮放可以加上SVG視口屬性），定位直接用CSS定位就行。矢量的話也是一樣的思路，看你已經(jīng)寫了Demo，可以套進去試試。

2017年7月8日 08:56