jQuery绘制插件
Posted
tags:
中文标题：jQuery绘制插件 原文标题：jQuery Paint Plugin 项目评级：Star:349 Fork:131 下载地址：https://github.com/websanova/wPaint 详情介绍wPaint.js
一个jQuery绘画插件，用于一个简单的绘图表面，你可以很容易地弹出到你的页面中，类似于基本的windows绘画程序。
相关插件
支持
如果你喜欢这个插件，请在Gittip上留下一点贡献。我完全在空闲时间开发这些插件，任何贡献都将不胜感激。
设置
每个插件都有可用的设置。这意味着只有当包含该插件时，这些设置才可用。
果心
主要的
文本
形状
没有设置。
文件
请注意，file的回调在很大程度上是用户生成的，因为它们大量处理客户端/服务器端代码。您可以查看演示代码，了解它们的设置方式。
示例
首先，您需要包括任何依赖项（路径和版本可能不同）：
然后需要包含wPaint核心文件：
从这里开始，我们需要包括我们想要支持的任何菜单图标的插件文件。这可以包括此插件发布时提供的插件，也可以包括您可以自己编写的任何其他插件。
路径
如果您将wPaint放入根目录以外的路径（很可能会），则需要设置path选项，因为图像和光标图标路径是在JavaScript中设置的，而不是在CSS中设置的。这意味着我们不能像在CSS文件中那样使它们相对于包含的文件，而是相对于显示页面。默认路径只是根文件夹/，但可以为wpaint设置路径。
保存/加载
关于使用wPaint保存/加载图像，存在许多问题。由于具有跨源策略的浏览器限制，无法在本地或从其他域加载图像。使用CORS有一些潜在的解决方案，但尚未实现。
目前，最好的方法是首先将图像上传到服务器，保存它，然后使用服务器的url在将来设置图像。您可以使用php示例检查test文件夹中的upload.php文件以保存图像。但是请注意，在服务器上保存图像将取决于所使用的语言/框架。
主题
在这个版本中，通过简单地用空格分隔多个主题关键字，引入了多个主题。例如“标准经典”。这是为了让我们能够分别主题颜色和尺寸，并可以互换使用。
图像数据
动态设置图像。这可以是base64编码的图像，也可以只是同一域上任何图像的路径。
获取图像数据：
回调
对于down、move和up的每次绘图操作，有三个回调可用。可用的是this对象，它指的是wPaint对象，并允许访问所有内部功能。
图像/bg
随时使用图像或颜色设置图像或背景。
调整大小
如果您想调整画布的大小，有一个resize实用程序功能可用。在更改画布元素的尺寸后调用此命令。查看test/fullscreen.html演示中的示例代码。
清楚的
手动清除画布。
撤消/重做
我们也可以手动运行undo或redo。
延伸
使用2.0版本，现在可以通过设置以下所有或部分属性轻松扩展wPaint：
最重要的
当调用$.fn.wPaint.extend()函数时，函数的值不会覆盖现有函数，而只是用打孔技术扩展它们。这意味着原始函数将始终在扩展函数之后运行。
这使我们可以将多个generate或init函数串在一起，而不必担心覆盖任何代码。
菜单
附加的第一个菜单将始终自动变为primary菜单，这意味着它是在init上显示的菜单。所有其他菜单将变为secondary菜单，这意味着它们可以通过图标进行切换。
我们可以通过更新我们想要的对象来扩展、修改或添加菜单中的项目。因此，例如，如果我们想在主菜单中添加一个新图标，我们可以这样做：
同样，我们可以覆盖或向现有对象添加属性。例如，下面我们修改了标题，并添加了after属性，以更改undo图标将出现在菜单中的位置。
图标属性
下面只是一个示例，列出了所有可能的图标属性。请注意，undo等图标名称是用于CSS样式和内部命名的key名称。
如果你想创建一个新的图标类型，你需要扩展wPaint以包括对这个新图标的处理。应写出以下形式的函数：
图标图像
每个插件的图像应保存在一个文件中，可以由顶级的img值指定，也可以在图标级别覆盖
每个图标还应该指定关于图标在图像中的位置的索引值，该索引值从0开始。图标应具有相同的大小，并且尺寸应设置在size主题中。
游标
现在有一个主cursors对象用于存储光标引用。
pencil:'url（“/plugins/main/img/cursor pencil.png”）0 11.99，默认值'，
);
我们可以通过调用setCursor()并传递要使用的光标名称来分隔要使用的游标。请注意，这是一个设置函数，我们可以随时设置光标。
请注意，当您设置光标的位置时，永远不要将其设置为精确的尺寸。例如，如果iamage为12x12，并且您希望其位置为12，则将其设置为11.99。这是针对Chrome中的一些奇怪错误所做的，如果设置正确，它将无法定位curosr。
谢谢
感谢所有在上一版本中贡献代码并对插件表现出兴趣的人。下面是对这个插件中使用的代码的一些感谢和归因（如果我把你排除在外，请告诉我）。
资源
许可证
麻省理工学院许可
版权所有（C）2011-2012 Websanovahttp://www.websanova.com
基于jquery类库的绘制二维码的插件jquery.qrcode.js