背景

对于我的一个项目，我需要实现一个SketchPad。浏览谷歌的想法，很快我想出了一个基于SketchPad的画板（见canvas.html附件zip文件）。但是它缺少几个功能，我不确定它们是否容易在canvas平台上实现：

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

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

使用代码

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

下面的示例代码将创建一个SketchPad区域(#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的值将用作编辑器的初始值。如果未找到此文本区域，则会创建空的隐藏文本区域。文本区域将在任何更改时使用SVG内容进行更新。这是我用来在浏览器和后端ASP.NET WebForms应用程序之间传递值的技巧。

支持的工具

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

兴趣点

Base64编码

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

SVG加载/兼容性

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

https://www.codeproject.com/Articles/5312319/SVG-SketchPad-Editor-Imbeddable-jQuery-Plugin

VG SketchPad编辑器——可嵌入的jQuery插件相关推荐

1000个JQuery插件（转载）
超强1000个jquery极品插件!(转) 花N长时间积累的Jquery插件,希望大家喜欢.大家还有什么新的插件,请留言,我们一并收录. 感谢大家的支持. ++++++++++++++++++++++ ...
jquery插件课程2 放大镜、多文件上传和在线编辑器插件如何使用
jquery插件课程2 放大镜.多文件上传和在线编辑器插件如何使用一.总结一句话总结:插件使用真的还是比较简单的,引包,初始化,配置参数(json),配置数据(json),而后两步不是必须的.而且 ...
jquery插件整理篇（六）HTML编辑器插件
(1)jwysiwyg WYSIWYG jQuery插件.整个编辑器文件大小只有17Kb. (2)Damn Small Rich Text Editor 基于jQuery开发,能够从IFRAME元素创 ...
jQuery：收集一些基于jQuery框架开发的控件/jquery插件2
Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件. 主页:http://letmehaveblog.blogspot.com/2007/10/ ...
1000个jquery插件
1.导航类 (1)Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件.二手图书二手书特价书旧书网 (2)jQuery-Horizontal ...
Web开发者必备的12款超赞jQuery插件
jQuery插件能够增强网站的可用性,有效地改善用户体验,还可以大大减少创建一个新站点的开发时间.现在的jQuery插件很多,尽可以根据您的项目要求来选择,不过也有一些插件很好用,几乎各种项目都能够用 ...
w3cschool教程 - jQuery插件总结
w3cschool教程 jQuery插件总结 http://www.w3cschool.cc/jquery/jquery-plugin-validate.html 一 jQuery Validate ...
转 jquery插件--241个jquery插件—jquery插件大全
241个jquery插件-jquery插件大全 jquery插件jqueryautocompleteajaxjavascriptcoldfusion jQuery由美国人John Resig创建,至今 ...
10款精选的用于构建良好易用性网站的jQuery插件
这篇随笔收集了10款非常给力的jquery 插件,帮助你构建易用性良好的网站,希望对你有用! Embedded help system 看过该插件demo后,感叹道,真是太棒了! 点demo里的How ...

VG SketchPad编辑器——可嵌入的jQuery插件

背景

使用代码

支持的工具

兴趣点

Base64编码

SVG加载/兼容性

VG SketchPad编辑器——可嵌入的jQuery插件相关推荐

最新文章

热门文章