Javascript/jQuery的插件SVG SketchPad怎么使用

本文小編為大家詳細介紹“Javascript/jQuery的插件SVG SketchPad怎么使用”，內容詳細，步驟清晰，細節處理妥當，希望這篇“Javascript/jQuery的插件SVG SketchPad怎么使用”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

使用代碼

要使用代碼，只需包含editor.js文件并初始化為常規 jQuery 插件。 

下面的示例代碼創建了(#content) 一個具有所需尺寸區域的簡單<div/>  。然后在 jQuerydocument.ready函數中創建一個 jQuery 對象并附加 change 事件處理程序。在此處理程序中，它使用 Scribble 的對象toText 函數將繪圖作為 svg 文本字符串，并將預覽 #res 元素的值設置為該 svg。

此外，它還獲取繪圖的 PNG 值并將預覽圖像設置為該值。由于圖像加載不是在瀏覽器中的即時操作，因此當圖像準備好時，將調用作為函數參數提供的事件處理程序。

<div id="content" 
        style='position:absolute; width:600px; height:400px; left:100px; border:solid;'></div>
<script src="Editor.js"></script>
<script>
        $(document).ready(function() {
            $('#content').Scribble().change(function() {
                $('#res').html($(this).Scribble('toText', 'svg'));
                $(this).Scribble('toText', 'png', function(img) {
                    $('#img').attr('src', img);
                });
            });
        });    
</script>
<img id='img' style='border:solid;position:absolute; top:450px; left:5px; width:200px; height:130px;'>
<div id='res' style='border:solid;position:absolute; top:450px; left:210px;'></div>

這里有三種有趣的方法：

• onchange 事件 - 每次更改圖像時生成

• toText(type, onLoad) 方法 - 一種將當前 SVG 值作為不同格式的字符串返回的方法。可能的格式：

        ○ svg - 返回值作為 SVG 字符串

        ○ base64 - SVG base64 編碼的值

        ○ mix - 如果 SVG 包含 unicode 字符 (emojii)，則使用 base64 編碼，否則返回非編碼值

        ○ png、jpeg 或任何其他沒有“imamge/”部分的圖像 mime 類型。調用時，返回值是 base64 編碼值。圖像將在 OnLoad 方法中返回（此處需要）

• fromText(val)- 使用toText上面的() 函數生成的提供的 SVG 字符串加載編輯器的值。如果容器元素將 <textarea/> 作為子元素隱藏，則此 textarea 的值將用作編輯器的初始值。如果未找到此文本區域，則會創建空的隱藏文本區域。文本區域將在任何更改時使用 SVG 內容進行更新。這是我用來在瀏覽器和后端 ASP.NET WebForms 應用程序之間傳遞值的技巧。

支持的工具

• 線 - 允許創建線

• 矩形 - 允許創建矩形

• Arrow - 允許創建箭頭

• 鉛筆 - 自由形式繪圖。最初的實現是記住所有的鼠標移動點。然而，這會導致彎曲的線條和很多點。所以如果沒有按下shift，最終版本會畫直線。您可以按 shift 鍵或暫停半秒以放下錨點或在繪制時按住 shift 以跟隨 mosemove 事件。

• 文本 - 允許文本/表情符號輸入。

• 圖像 - 要求插入圖像。圖像也可以拖/放或粘貼到繪圖區域的頂部

• 移動 - 從對象創建切換到移動/調整大小模式。

• 顏色 - 更改選定/創建對象的顏色

• 寬度 - 更改選定/創建對象的筆畫寬度

• 旋轉 - 為簡單起見，我只允許 90 度旋轉一次

興趣點

Base64 編碼

在某些時候對最終產品進行故障排除，我遇到了 emojii 無法正確重新加載的問題。我花了一段時間才意識到我的數據庫列是 varchar(max) 并且不存儲 unicode。由于其他項目使用相同的數據庫，因此我決定將SVG編碼為base 64，而不是更改列類型。不幸的是，瀏覽器中的btoa函數有問題，因此需要一些時間才能找到解決方案。

SVG 加載/兼容性

SVG 是一種完整的語言。我從來沒有打算能夠支持 SVG 規范中定義的所有功能，只是為了能夠加載我之前創建的文檔。請不要僅使用隨機的 SVG 文檔來嘗試它 - 它很可能不起作用。

讀到這里，這篇“Javascript/jQuery的插件SVG SketchPad怎么使用”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。