是否有用于使用画布的类似 Paint 的应用程序的 Javascript 库？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7134238/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there a Javascript library for Paint-like applications using canvas?
提问by Ivan
Is there a Javascript library which has built-in features for quickly creating a Paint-like web application using the canvas element?
是否有一个 Javascript 库具有使用 canvas 元素快速创建类似 Paint 的 Web 应用程序的内置功能？
EDIT:So, far, I have found Javascript libraries that allow easy animation of canvas elements -- such as Raphael JS-- and Javascript tutorials for creating simple Paint apps, but no robust libraries for Paint-like applications.
编辑：到目前为止，我已经找到了可以轻松制作画布元素动画的 Javascript 库（例如Raphael JS）和用于创建简单 Paint 应用程序的 Javascript 教程，但没有用于类似 Paint 的应用程序的强大库。
EDIT 2:I found a Javascript tutorialon a pretty nice looking Paint app using the canvas element. I'd still like to see what others have found.
编辑 2：我在使用 canvas 元素的漂亮的 Paint 应用程序上找到了Javascript 教程。我仍然想看看其他人发现了什么。
采纳答案by Andreas K?berle
There is processingJS, but as it is port of the JAVA bassed processing you write your code in "javaish" processing language. But after all you could create what an paint like app. Another framework is fabricJSwhich is also really great to work with canvas.
有processingJS，但由于它是基于 JAVA 处理的端口，因此您可以用“javaish”处理语言编写代码。但毕竟你可以创建一个像应用程序一样的油漆。另一个框架是fabricJS，它也非常适合与画布一起使用。
回答by rsp
Rapha?l
拉斐尔
Rapha?l doesn't use Canvas. It uses SVG on browsers that support it or VML on Internet Explorer.
Rapha?l 不使用 Canvas。它在支持它的浏览器上使用 SVG 或在 Internet Explorer 上使用 VML。
SVG
SVG
If you want an SVG solution designed specifically for drawing then take a look at:
如果您想要专为绘图设计的 SVG 解决方案，请查看：
See this demo.
请参阅此演示。
Canvas
帆布
If you want to use Canvas but you need a retained moderendering then see:
如果您想使用 Canvas 但需要保留模式渲染，请参阅：
Update (February 2014)
更新（2014 年 2 月）
- ART, a retained mode vector drawing API - targets all three of HTML5 Canvas, SVG and VML?(plus some code generation). Used by the Facebookteam together with the ReactUI toolkit (see: react-artand the "art" branchof the react-pageproject on GitHub).
回答by Steve Landey
Literally Canvas fits this exact purpose: http://literallycanvas.com
字面画布正好符合这个目的：http: //literallycanvas.com
"Literally Canvas is an extensible, open source (BSD-licensed), HTML5 drawing widget...You can use it to embed drawing boards in web pages."
“从字面上看，Canvas 是一个可扩展的开源（BSD 许可）HTML5 绘图小部件……您可以使用它在网页中嵌入绘图板。”
回答by Ivan Borshchov
You can try Painterro. It can be used for pasting and processing screenshots, cropping, drawing primitives and text, rotating, resizing (changing resolution), scaling, drawing arrows, exporting with desired compression level, supports hotkeys
你可以试试Painterro。它可用于粘贴和处理屏幕截图、裁剪、绘制图元和文本、旋转、调整大小（更改分辨率）、缩放、绘制箭头、以所需的压缩级别导出、支持热键
Painterro has a browser-scriptversion and npm package
Could be easily integrated with any SPA like Vue/React, works well in electron/cordova
可以轻松地与任何 SPA 集成，例如 Vue/React，在电子/科尔多瓦中运行良好
回答by Bojangles
I think the closest you'll get is to expand on what that tutorial has gone through.
我认为您最接近的是扩展该教程所经历的内容。
It's hard to create "general purpose" paint-like functionality due to the wide range of requirements.
由于需求范围广泛，很难创建“通用”类油漆功能。
回答by deathangel908
There is an npm package spainter. Click on Run code snippetbellow and go fullscreen
有一个 npm 包spainter。单击下面的运行代码片段并全屏显示
var p = new Painter(containerPainter);</script><script src="https://cdn.jsdelivr.net/npm/[email protected]/index.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/index.css"/>
<div id="containerPainter"></div>or via webpack (or any other loader):
或通过 webpack（或任何其他加载程序）：
npm i spainter lines-logger
in your js:
在你的 js 中：
import Painter from 'spainter';
import 'spainter/index.sass'; // you can impor index.css if you don't have sass, ensure that you copy the fonts from the directory as well to production. Set `$FontelloPath: "../node_modules/spainter/font"`
import {LoggerFactory} from 'lines-logger';
const containerPainter = document.createElement('div');
document.body.appendChild(containerPainter);
const p = new Painter(containerPainter, {logger: new LoggerFactory().getLoggerColor('spainter', 'blue')});
