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

我的 SVG 编辑器

MichaelChen_
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.51/5 (13投票s)

2017年1月1日

CPOL

4分钟阅读

viewsIcon

27479

downloadIcon

1551

一个程序员视角的简单 SVG 编辑器。

引言

本文介绍了一个简单的 SVG 编辑器，希望能简化 SVG 风格网页的设计。示例代码是一个起点，您可以根据需要进行改进。

背景

  • SVG (可缩放矢量图形)、HTML/CSS/Javascript。
  • Windows Forms 开发。

就是这样。

为什么？

目前市面上有很多 SVG 设计工具，例如 Adobe Illustrator、Inkscape、SVG-Edit 等。但其中大多数是从设计师而非程序员的角度出发的。作为一名开发者，我需要一个工具来集成 Javascript、HTML 和 SVG，以创建功能完整的网页。此外，即时预览和调试对于快速开发也是必需的。

什么？

组件及其功能描述如下：

  1. 一个支持语法高亮的编辑器，方便 SVG/HTML/Javascript 编码。
  2. 一个嵌入式浏览器，用于预览代码结果。
  3. 一个轻量级 HTTP 服务器，用于解析网页。
  4. 轻松地从数百个网站复制粘贴 SVG 图形片段，例如 openclipart、IconFinder。

 

如何做到？

首先，我选择了 ICSharpCode.TextEditor 作为 SVG/HTML/Javascript 编辑器，它具有很好的语法高亮功能，但缺少 SVG 文件设置。我在源代码中修改了 SyntaxModes.xml，只需在 XML 设置中添加 .svg 扩展名。重新构建项目后，SVG 文件将显示语法高亮。

其次，我使用 CefSharp.WinForms 作为浏览器，而不是 VS 标准的 WebBrowser，因为 CefSharp 采用了 Google Chrome，它可以比 IE 更好地渲染复杂的 SVG。但存在一些限制。它需要指定 x86 或 x64 作为项目的平台目标，并且只支持 .net framework 5.5.2。您可以使用 NuGet 包管理器控制台中的以下命令将引用添加到您的项目中：

PM> Install-Package CefSharp.WinForms

第三，我将上述组件封装在 SplitContainer 控件中，并打包成一个名为 MyUserControl.cs 的用户控件。

        public MyUserControl() {
            InitializeComponent();

            // add ICSharpCode.TextEditor into panel1
            editor = new TextEditorControl();
            editor.Dock = DockStyle.Fill;
            editor.FileName = defaultNewFileName;
            editor.IsReadOnly = false;
            editor.Text = File.ReadAllText(Path.Combine(Application.StartupPath, "template.svg")).Replace("@content", "");

            editor.Document.DocumentChanged +=
                new DocumentEventHandler((sender, e) => { SetModifiedFlag(true); });
            this.splitContainer1.Panel1.Controls.Add(editor);

            // add chrome into panel2
            browser = new ChromiumWebBrowser("");
            this.splitContainer1.Panel2.Controls.Add(browser);
            splitContainer1.Panel2.Resize += Panel2_Resize;

            // Allow the use of local resources in the browser
            BrowserSettings browserSettings = new BrowserSettings();
            browserSettings.FileAccessFromFileUrls = CefState.Enabled;
            browserSettings.UniversalAccessFromFileUrls = CefState.Enabled;
            browser.BrowserSettings = browserSettings;
            browser.IsBrowserInitializedChanged += BrowserInitializedChanged; 
        }

 

最后，我使用了 SimpleHTTPServer 作为轻量级服务器，非常易于调用。将该类复制到项目中，并在 Form_load/Form_Closing 事件处理程序中调用 start/stop。如果出现“拒绝访问”错误，请以管理员身份运行以下命令：

netsh http add urlacl url=https://:8085/ user=Everyone listen=yes 

在集成所有组件后，我创建了一个 Windows Forms 项目来打包它们，并在该项目中提供了新建/打开/保存/刷新等功能。我不想浪费您的时间去解释细节，您可以运行并跟踪每个功能来了解详情。

使用该工具

所有功能都在工具栏中定义。

  • 新建：为 SVG 模板添加新文件。您可以使用“切换”按钮切换到 HTML 模板。在模板中，我使用了 raphael.js 和 svg-pan-zoom.js 来演示以编程方式操作 SVG 元素的技巧。
  • 切换 SVG/HTML 模板。HTML 模板包含 SVG 用法和操作 SVG 对象的 Javascript。
  • 打开：加载现有文件，可以是 SVG/HTML/Javascript 文件。
  • 保存/另存为：保存活动选项卡中的文件，并将文件及包含的文件复制到 HTTP 服务器，然后在嵌入式浏览器（右侧面板）中进行渲染。该工具会自动查找源代码中的 svg/css/javascript 文件并将它们复制到服务器。
  • 关闭：关闭活动选项卡。
  • 刷新：刷新浏览器以预览最新代码的结果。
  • 幻灯片：最大化浏览区域以预览结果。
  • 浏览器：激活默认浏览器以查看结果。
  • XPath 表达式：这对于搜索 SVG 文件片段非常有用，因为 SVG 是基于 XML 的内容。您可以通过 ID 或其他属性在 SVG 中搜索标签。找到结果后，工具会将其复制到剪贴板。之后，您可以将其粘贴到另一个文件中。
  • Javascript：CefSharp 浏览器支持 Javascript 来更改其中的页面，因此您可以在工具栏中运行 Javascript。测试后，您可以将这些代码添加到您的页面中。
  • 显示开发者工具：您可以按此按钮或按 F12 显示 Chrome 开发者工具，用于跟踪源代码或调试。

此外，还为编辑器添加了上下文菜单，大部分代码来自 ICSharpCode 的示例项目。它提供了书签、查找/替换和 XML 片段提取功能。

最后，我想通过 YouTube 视频与您分享我如何使用这个工具从其他 SVG 图形中剪切/粘贴 SVG 片段到我自己的作品中。

https://www.youtube.com/watch?v=R9Jn4YIoNeI

视频中的示例文件来自 openclipart.org。

关注点

我发现的一些有趣的 SVG 应用

以上所有应用，您都可以轻松地在 MySvgEditor 中下载、运行/修改/测试。别忘了在必要时更改脚本/CSS/SVG 文件的路径。

尽管所有组件都由 GitHub 专家贡献，但我仍然遇到了许多棘手的问题。我享受逐步征服它们的整个过程。

历史

版本 0.0.1。用户界面简陋。

版本 0.0.2。修复了 Bug。

版本 0.0.3 为编辑器添加了上下文菜单。

 

© . All rights reserved.