嵌入式 Javascript/jQuery 插件 SVG SketchPad

2021-09-10 10:38:25 浏览数 (4)

背景

对于我的一个项目，我需要实现一个草图垫。浏览谷歌的想法，很快我想出了一个基于画布的画板。但是它缺少几个功能，我不确定它们是否容易在 canvas 平台上实现：

  • 将绘图另存为图像，以便外部工具可以使用它，而无需特殊渲染器
  • 存储注意事项 - 即使是 PNG 图像也会很大
  • 能够在未来修改图像。
  • 选择现有对象进行微调。

因此，在下一次迭代中，我决定在 SVG 技术 ( svg.html) 的基础上绘制草图。它似乎解决了我在画布上遇到的所有问题。

使用代码

要使用代码，只需包含​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

0 人点赞