65.9K
CodeProject 正在变化。 阅读更多。
Home

SVG SketchPad 编辑器 - 可嵌入的 jQuery 插件

作者：gstolarov
starIconstarIconstarIconstarIconstarIcon

5.00/5 (2投票s)

2021年9月7日

CPOL

4分钟阅读

viewsIcon

7107

downloadIcon

179

一个可嵌入的 SVG 编辑器 - jQuery 插件。

背景

为了我的一个项目，我需要实现一个画板。 在 Google 上浏览了一些想法后，我很快就想出了一个基于 canvas 的画板（请参阅附加 zip 文件中的 canvas.html）。 然而，它缺少一些功能，我不确定它们是否容易在 canvas 平台上实现。

  • 将绘图保存为图像，以便外部工具可以在没有特殊渲染器的情况下使用
  • 存储考虑 - 即使是 PNG 图像也会非常大
  • 将来修改图像的能力。
  • 选择现有对象进行微调。

因此，在下一次迭代中，我决定将画板基于 SVG 技术（svg.html）。 它似乎解决了我在 canvas 上遇到的所有问题。

使用代码

要使用该代码，只需包含 editor.js 文件并像常规 jQuery 插件一样初始化它。

下面的示例代码创建了一个scratchpad区域 (#content) 作为一个简单的 <div/> 带有期望的尺寸。 然后在 jQuery document.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 或任何其他没有“image/”部分的图像 mime 类型。 调用时，返回值是 base64 编码的值。 图像将在 OnLoad 方法中返回（此处需要）
  • fromText(val) - 使用上面 toText() 函数生成的提供的 SVG 字符串加载编辑器的值。 如果容器元素具有隐藏的 <textarea/> 作为子元素，则此 textarea 的值将用作编辑器的初始值。 如果未找到此 textarea，则将创建一个空的隐藏 textarea。 只要发生更改，文本区域就会使用 SVG 内容更新。 这是我用来在浏览器和后端 ASP.NET WebForms 应用程序之间传递值的一种技巧。

支持的工具

  • 线 - 允许创建线
  • 矩形 - 允许创建矩形
  • 箭头 - 允许创建箭头
  • 铅笔 - 自由形式绘图。 最初的实现是记住所有 mousemove 点。 然而，这导致弯弯曲曲的线条和大量的点。 因此，如果未按下 shift 键，则最终版本会绘制直线。 您可以按住 shift 键或暂停半秒钟来放置锚点，或在绘图时按住 shift 键以跟随 mosemove 事件。
  • 文本 - 允许输入文本/表情符号。
  • 图像 - 请求插入图像。 图像也可以拖放或粘贴在绘图区域顶部
  • 移动 - 从对象创建切换到移动/调整大小模式。
  • 颜色 - 更改所选/创建对象的颜色
  • 宽度 - 更改所选/创建对象的笔触宽度
  • 旋转 - 为了简单起见，我只允许一次 90 度旋转

关注点

Base64 编码

在对最终产品进行故障排除时，我遇到了表情符号无法正确重新加载的问题。 我花了一段时间才意识到我的数据库列是 varchar(max) 并且不存储 unicode。 由于同一个数据库用于其他项目，因此我没有更改列类型，而是决定将 SVG 编码为 base 64。 不幸的是，浏览器中的 btoa 函数存在问题，因此花了一些时间才找到解决方案。 你可以在 https://mdn.org.cn/en-US/docs/Web/API/btoa 查看它。

SVG 加载/兼容性

SVG 是一种完整的语言。 我从未打算支持 SVG 规范中定义的所有功能，而仅仅是为了能够加载我之前创建的文档。 请不要尝试使用随机 SVG 文档 - 它很可能无法工作。

 

 

© . All rights reserved.