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

使用HTML5 Canvas的画笔应用程序

derinpdavis
starIconstarIconstarIconstarIconstarIcon

5.00/5 (10投票s)

2012年7月24日

MIT

5分钟阅读

viewsIcon

77603

downloadIcon

4538

一个使用 HTML5 Canvas 的基于 Web 的画笔应用程序。

Screenshot Main Page

引言

我认为开发软件应用程序的最佳方式是“开发一个基于 Web 的应用程序并将其托管在云上”，这样我们就无需担心安装问题，因为它易于更新且易于管理版本。而且我们的应用程序可以支持 Windows、Linux、iOS、Android 等不同平台……这意味着用户也可以在平板电脑/移动 PC 上运行应用程序（这在如今非常重要，因为它们在市场上很受欢迎）。

云中有许多基于浏览器的应用程序，但其中一些需要安装插件或 Silverlight，我认为这些不是平台无关的应用程序，因为有些平台不支持插件或 Silverlight 并且不允许安装。

HTML5 技术可以解决其中大部分问题，这是一个使用 HTML5 和 JavaScript 的基本画笔应用程序。

背景

我从不同的代码共享网站和博客收集了零散的代码。要继续学习本教程，您需要对 C#、ASP.NET、JavaScript 和客户端-服务器技术有所了解。

请参考 www.w3schools.com 以获取有关每个 HTML5 对象属性和事件的详细信息。

入门

下载本文附带的源代码和可执行文件。解压缩 zip 文件。

下载并安装 Ajax Toolkit [AjaxControlToolkit.dll]。将 AjaxControlToolkit.dll 复制到 \bin 文件夹。

您需要配置 IIS 来运行此应用程序。配置 IIS 的步骤如下

  1. 打开“控制面板”->“管理工具”->“Internet Information Services (IIS) 管理器”。或者在“开始”->“运行”中键入“inetmgr”并单击“确定”。
  2. 在“Internet Information Services (IIS) 管理器”中，右键单击“网站”并选择“添加网站”。
  3. 输入网站名称[例如：paintbrushapp]、主机名[例如：mylocalmachine]、端口号[例如：8080]。
  4. 选择解压缩可执行文件的物理路径[Default.aspx 的路径]。
  5. 按“确定”创建您的网站

IIS 现已配置。现在为您的默认浏览器启用弹出窗口和 JavaScript。在浏览器地址栏中输入：http://mylocalmachine:8080/ 并按 Enter 键。[替换为您自己的主机名和端口号。]

现在 PaintBrush 应用程序将启动。[您可以在 Visual Studio 中打开解决方案文件 [.sln] 或项目文件 [.csprj] 并运行它]。通过运行此应用程序，您将获得一个独立的浏览器窗口，左侧有一个 Canvas 和工具箱。绘制、线条和正方形按钮是自由绘制项目。您可以单击相应的按钮并在画布上开始绘制。

单击“打开”按钮将打开一个 AJAX 弹出窗口，用于选择图像文件。选择任何图像文件打开，然后单击“确定”。选定的图像文件将被加载到画布上。

Screenshot Open File

对于新的 Canvas，您可以通过单击“页面大小”按钮来调整宽度和高度。

Screenshot Adjust Page Size

您可以通过单击“文本”按钮并在画布上所需位置单击来在画布中添加文本。在弹出框中键入文本，然后按“确定”。

Screenshot Add Text

最后，您还有“保存”和“退出”选项。单击“保存”将在新窗口中打开一个图像。您可以通过右键单击[右键单击并保存图像]来保存图像，或者可以打印它。单击“退出”按钮将在用户确认后关闭应用程序。

Screenshot Confirm Exit

使用代码

我们正在创建一个应用程序，[而不是一个网站]，即使它在浏览器中运行。

我们不需要浏览器的地址栏、状态栏、前进-后退按钮。因此，从 Default.aspx 页面，我们为应用程序打开了一个新窗口，没有所有这些额外的元素[PaintBrushCanvas.aspx]。

//
// Load Complete Event of Default.aspx Page
//
protected void Load_Complete(object sender, EventArgs e)
{
    ScriptManager.RegisterStartupScript(this.Page, this.GetType(),
                "Script", " <script  language='javascript'>" +
                " NewWin=window.open('PaintBrushCanvas.aspx',null, 'resizable=yes,menubar=no,toolbar=no," +
                " location=no,directories=no,status=no');" +
                " window.open('','_self','');" +
                " setTimeout('self.close();',1000);</script>", false);
}

页面设计

在 PaintBrushCanvas.aspx 页面中，我们有一个带两列的表格：一列是工具箱[左边]，另一列是 Canvas[右边]。

Canvas 应该放在一个容器 <div id="container"> 中，并定义了 position、overflow 和 scrollbar-base-color 样式。如果 Canvas 大小超过屏幕大小，这将启用滚动条。

#container { position: relative; overflow: auto; scrollbar-base-color:#ffeaff;  }

最大化状态

对于我们应用程序窗口的初始最大化状态，应将以下脚本添加到 head 部分。

<script type="text/javascript">
    window.moveTo(0, 0);
    window.resizeTo(screen.width, screen.height);
</script>

初始化

我们所有的 JavaScript 代码都在 CanvasUtils.js 文件中。所有样式都在 StyleSheet.css 文件中定义。我们应该在 body 标签的 onload 事件中调用 init() 来初始化我们的应用程序 [onload="init();"]。Init () 函数将获取我们 Canvas 对象的 2D 上下文，调整 Canvas 和容器的大小，连接所有 Canvas 事件，并选择默认工具。我们有一个工具数组来保存所有 Canvas 绘图工具 [var tools = {};] 并且 ev_canvas 处理 Canvas 的所有鼠标事件并将其重定向到选定的工具函数。

try {
if (ev.layerX || ev.layerX == 0) {  // Firefox
    ev._x = ev.layerX;
    ev._y = ev.layerY;
} else if (ev.offsetX || ev.offsetX == 0) { // Opera
    ev._x = ev.offsetX;
    ev._y = ev.offsetY;
}

    // Call the event handler of the tool.
    var func = tool[ev.type];

    if (func) {
        func(ev);
    }
}
catch (err) {
    alert(err.message);
}

我们只使用基本的 Canvas 函数来实现所有绘图工具，例如：

  • lineTo - 画线
  • clearRect - 清除 Canvas 中的矩形区域
  • moveTo - 将活动位置移动到给定像素
  • fillText - 在 Canvas 上绘制文本
  • strokeRect - 画矩形

Canvas 图层

我们使用了两个 Canvas 图层，顶层 Canvas 是一个透明的 Canvas。

所有手绘工具最初都绘制在顶层[透明] Canvas 上，并在鼠标抬起时[即我们完成连续绘制]。我们使用 img_update() 函数更新到背景 Canvas 并清除临时的顶层 Canvas。

function img_update() {
    contexto.drawImage(canvas, 0, 0);
    context.clearRect(0, 0, canvas.width, canvas.height);
}

保存图像/Canvas

当用户单击“保存”按钮时，我们使用 toDataURL() 函数将 Canvas 转换为 Image 对象，并在新窗口中打开 Image

var img = destinationCanvas.toDataURL("image/png");

WindowObject = window.open('', "PrintPaintBrush", "toolbars=no,scrollbars=yes,status=no,resizable=no");
WindowObject.document.open();
WindowObject.document.writeln('<img src="' + img + '"/>);
WindowObject.document.close();
WindowObject.focus();
WindowObject.print();

关注点

许多软件应用程序已开始在其 Web 表单中使用 HTML5，用于各种目的。我在一个流行的 CRM 系统中看到了一个用于在线审批流程的“签名板”，它是使用 HTML5-Canvas 开发的。

历史

  • 草稿版本：2012 年 7 月 24 日。
© . All rights reserved.