2019年2月20日,星期三

几个月前,我们已经开始与Electron进行实验。在工作概念验证之后,我们的目标是为Delphi开发人员尽可能多地包装Electron API。但当然不仅仅是可以使用的Electron API,您可以轻松地传输已有的代码,使其成为桌面应用程序!我们已经在之前的博文中给出了一个小小的预告片。
现在,我们想借此机会对即将推出的新TMS Web电子申请支持提供更多见解。

IDE集成

您可能已经熟悉创建TMS Web应用程序或渐进式Web应用程序。程序是相同的,创建新的Electron应用程序所需要做的就是从向导中选择TMS Web Electron Application:

它生成一个类似于TMS Web PWA应用程序的项目,但不是清单和serviceworker文件,它生成了一个主JavaScript文件,一个包文件和3个不同平台的图标。默认生成的package.json和main.js都能够创建,运行和打包应用程序,但可以通过编辑它们进一步自定义它们。也可以通过项目选项更改图标文件。

您现在可以像通常使用TMS Web应用程序一样开发应用程序。
在调试模式下按F9,项目将照常编译,然后Electron引擎启动并启动应用程序。
在构建模式方面,几乎没有差异和平台限制。在Windows 32/64位构建模式下按F9 将打包应用程序并启动它。在Linux 32/64位构建模式下按F9 将创建Linux的打包应用程序,然后可以将其移动到Linux机器上并启动。虽然添加了macOS 32/64位构建模式,但遗憾的是,目前无法从Windows机器创建打包的macOS应用程序。但好消息是一个打包的macOS 64位应用程序仍然可以通过将源文件复制到准备好的Mac计算机并运行单个命令来完成。更不用说如果你想分发一个macOS应用程序,那么建议你签名,这只能在Mac上完成。

创建照片编辑器应用程序

Electron为TMS Web应用程序提供了一种创建跨平台(Windows / macOS / Linux)桌面应用程序并使用本机操作系统调用并直接访问本地文件系统的方法。所以我们想通过创建一个基本的照片编辑器应用程序来展示它的强大功能。
为了保持这个简单,我们只允许通过CSS过滤器属性对选定的照片应用过滤器,这比在VCL中编写它更简单快捷,因为图像过滤器如模糊,对比度,灰色-scale ...不是开箱即用的VCL。作为第一步,我们在照片编辑器中添加了我们需要的所有组件。 当然,如果我们没有图像,我们就无法编辑图像。要解决这个问题,我们将使用 TWebImageControl,TElectronMainMenu和TElectronOpenDialog

。使用TElectronMainMenu,我们可以添加菜单栏,其中包含“打开”或“另存为...”等菜单项。在Open菜单项的OnClick事件中,我们可以执行TElectronOpenDialog并使用检索到的文件名从本地文件系统加载图像。

  1. 程序 TForm1 。Open1Click(发件人:TObject);
  2. 开始
  3. 如果是 ElectronOpenDialog1 。然后执行
  4. 开始
  5. WebImageControl1 。图片。LoadFromFile(ElectronOpenDialog1 。文件名);
  6. 结束;
  7. 结束;

有了图像,我们仍然需要一些可以应用过滤器的东西。幸运的是,TJSHTMLElement正是我们所寻找的,因为它具有样式属性。让我们在创建表单时检索我们的TWebImageControl的TJSHTMLElement。

  1. 程序 TForm1 。WebFormCreate(发件人:TObject);
  2. 开始
  3. FImgEl:= TJSHTMLElement(文件。的getElementById(WebImageControl1 。ElementID));
  4. 结束;

现在我们有了应用CSS过滤器的所有内容。更简单的解决方案是将所有过滤器存储在自己的字符串属性中,而不是在更改时添加和删除过滤器。当过滤器轨迹栏发生更改时,我们会更新给定的字符串属性,并将其与其余的过滤器字符串连接起来。作为最后一步,我们将此单个过滤字符串应用于我们的图像。

  1. 程序 TForm1 。BrightnessTBChange(发件人:TObject);
  2. 开始
  3. FBrightnessFilter:=  '亮度('  + IntToStr(BrightnessTB 。位置)+  '%)' ;
  4. CreateFilter;
  5. 结束;
  6. 程序 TForm1 。CreateFilter;
  7. 开始
  8. FFilter:= FBlurFilter + FBrightnessFilter + FContrastFilter + FGrayscaleFilter + FHueRotateFilter + FInvertFilter + FOpacityFilter + FSaturateFilter + FSepiaFilter;
  9. FImgEl 。风格。setProperty('filter' ,FFilter);
  10. 结束;

使用此方法,重置滤镜也很简单,只需将单个滤镜字符串设置为基本值并将轨迹栏重置为其原始位置即可。

到目前为止,这并不复杂,我们的应用程序已经基本完成,但仍然缺少保存功能。为此,我们将使用TElectronSaveDialog,TElectronBinaryDataStream和TJSHTMLCanvasElement。
我们可以在菜单栏中添加“另存为...”菜单项,就像我们使用“打开”菜单项一样,然后在OnClick事件中,我们将逻辑写入图像保存。

  1. 程序 TForm1 。Save1Click(发件人:TObject);
  2. 开始
  3. 如果是 ElectronSaveDialog1 。然后执行
  4. 开始
  5. //保存图片
  6. 结束;
  7. 结束;

默认情况下,如果您尝试保存已应用过滤器的图片,则会在没有过滤器的情况下保存原始图像。更糟糕的是,每个浏览器都不支持普遍接受的方法。幸运的是Chromium支持它,它允许我们创建我们的应用程序没有任何缺点。
我们需要采取以下5个步骤:将图像检索为TJSHTMLCanvasElement,创建新的TJSHTMLCanvasElement以进行渲染,将过滤器分配给新画布的上下文,渲染图像,并将其保存到本地文件系统中的文件中。分配过滤器需要一些JavaScript,但正如您将在下面的代码中看到的那样,这对于一个好的结果来说是微不足道的。为了实现图像的实际保存,我们将使用TElectronBinaryDataStream。TElectronBinaryDataStream有一个名为Base64的属性,所以我们要做的就是将canvasUR中的dataURL分配给它,然后调用SaveToFile方法。到现在为止,代码看起来像这样:

  1. 程序 TForm1 。Save1Click(发件人:TObject);
  2. VAR
  3. canvas,el:TJSHTMLCanvasElement;
  4. ctx:TJSCanvasRenderingContext2D;
  5. bd:TElectronBinaryDataStream;
  6. w,h:整数;
  7. 开始
  8. 如果是 ElectronSaveDialog1 。然后执行
  9. 开始
  10. // 1:将图像作为TJSHTMLCanvasElement
  11. EL:= TJSHTMLCanvasElement(文件。的getElementById(WebImageControl1 。ElementID));
  12. ASM
  13. w = el 。naturalWidth;
  14. h = el 。naturalHeight;
  15. 结束;
  16. // 2:创建canvas元素
  17. 帆布:= TJSHTMLCanvasElement(文件。的createElement('画布' ));
  18. 帆布。width:= w;
  19. 帆布。身高:= h;
  20. ctx:= canvas 。getContextAs2DContext('2d' );
  21. ASM
  22. ctx 。填充样式= “RGBA(255 ,  255 ,  255 ,  0.0 )”; //设置透明背景
  23. ctx 。filter = el 。风格。过滤; // 3:添加过滤器
  24. 结束;
  25. ctx 。fillRect(0 ,  0 ,W,H);
  26. // 4:渲染我们的形象
  27. ctx 。的drawImage(TJSObject(EL),  0 ,  0 ,W,H);
  28. // 5:保存到文件
  29. bd:= TElectronBinaryDataStream 。创建;
  30. bd 。Base64:=画布。toDataURL;
  31. bd 。的SaveToFile(ElectronSaveDialog1 。文件名);
  32. 结束;
  33. 结束;

现在,如果您看一下我们到目前为止所做的事情,您迟早会注意到即使没有图像加载到我们的应用程序中,也可以点击“另存为...”菜单项,这不是我们想要的。通过引入标志可以快速解决这个问题。
修改我们的“另存为...”菜单项后,默认情况下将其设置为禁用,我们可以在打开第一个图像后执行以下操作:

  1. 程序 TForm1 。WebFormCreate(发件人:TObject);
  2. 开始
  3. FImgEmpty:= True;  //旗
  4. FImgEl:= TJSHTMLElement(文件。的getElementById(WebImageControl1 。ElementID));
  5. 结束;
  6. 程序 TForm1 。Open1Click(发件人:TObject);
  7. 开始
  8. 如果是 ElectronOpenDialog1 。然后执行
  9. 开始
  10. WebImageControl1 。图片。LoadFromFile(ElectronOpenDialog1 。文件名);
  11. 如果 FImgEmpty  那么
  12. 开始
  13. 保存1 。启用:=真;
  14. ElectronMainMenu1 。EndUpdate;
  15. FImgEmpty:= False;
  16. 结束;
  17. 结束;
  18. 结束;

您可能想知道为什么需要TElectronMainMenu.EndUpdate调用。这是Electron的缺点,您无法动态修改菜单。每次修改菜单时,都需要将其重新分配给窗口。为了使这个过程对Delphi开发人员的问题减少,调用EndUpdate将重新创建菜单栏并将其重新分配给窗口。

通过这最后一个小小的补充,我们可以说我们已经创建了一个基本且简单的跨平台照片编辑器应用程序,它能够:
- 通过本机打开对话框打开本地文件系统映像
- 使用CSS应用过滤器
- 并将图像保存到本地文件系统通过本机保存对话框。
当然,它运行在3个主要操作系统上:使用单一源代码库的Windows,macOS和Linux! 如果这让您感到兴奋,那么我们会有更多好消息:我们的Electron PhotoEditor演示版中将提供更多功能,例如从JPEG中提取照片EXIF信息并将其显示在子窗口中。用于从JPEG文件中提取EXIF信息的现有JavaScript库

  

使用,在几分钟内为我们提供此功能,因为我们可以轻松地从TMS WEB Core应用程序中使用此JavaScript库。从EXIF信息中,我们可以提取拍摄照片的地理坐标。TMS WEB Core的强大功能和灵活性使我们能够使用TWebGoogleMaps组件在地图上将其可视化。再次,目标和功能在几分钟内完成,并且最少的代码行。 构建跨平台Electron应用程序支持将成为TMS WEB Core v1.2 Padua版本的一部分,很快我们将为TMS ALL-ACCESS用户提供第一个BETA !今天不要错过使用TMS WEB Core的方法

!您可以下载通常可用的试用版,继续使用您购买的独立版本或使用TMS WEB Core以及TMS ALL-ACCESS中包含的其他工具。我们的团队期待您的所有意见,反馈和功能请求,以帮助指导TMS WEB Core的发展到下一阶段!

https://www.tmssoftware.com/site/blog.asp?post=521

TMS WEB Core v1.2预览版:新的Electron应用程序支持的更多相关文章

  1. 微软.NET CORE 3.0 预览版 7 发布:大幅减少 SDK 空间大小

    据悉,这个预览版是 .Net Core 3 中重要的版本,可以视为原计划在 7 月发布的 RC 版本 (引自微软 .NET Core 首席 Program Manager Richard 先生原话), ...

  2. ASP.NET Core 3.0预览版体验

    目前.NET Core 3.0的版本为.NET Core 3.0 Preview 3,对应ASP.NET Core 3.0 Preview 3. ASP.NET Core 3.0 之后将不再支持.NE ...

  3. 安装.NET Core 3.0预览版后VS项目目标框架中不显示的解决方法

    下载了微软在GitHub上的cSharpSamples项目后发现其中一些项目使用框架为.NET Core3.0,就下载了.NET Core3.0,但发现项目依然不可用,编译时提示如下 当前 .net ...

  4. .NET 4.5.1 预览版新特性

    上个月的微软Build大会上宣布了.NET 4.5.1的推出,Heydarian的这个演讲题为".NET开发中的新内容",涵盖了.NET Framework中一些重要的新特性. H ...

  5. .NET Core 3.0预览版7中的ASP.NET Core和Blazor更新

    .NET Core 3.0 Preview 7现已推出,它包含一系列ASP.NET Core和Blazor的新更新. 以下是此预览中的新功能列表: 最新的Visual Studio预览包括.NET C ...

  6. 5个难以置信的VS 2015预览版新特性

    Visual Studio 2015 Preview包含了很多强大的新特性,无论你是从事WEB应用程序开发,还是桌面应用程序开发,甚至是移动应用开发,VS 2015都将大大提高你的开发效率.有几个特性 ...

  7. Asp.net Core中SignalR Core预览版的一些新特性前瞻,附源码(消息订阅与发送二进制数据)

    目录 SignalR系列目录(注意,是ASP.NET的目录.不是Core的) 前言 一晃一个月又过去了,上个月有个比较大的项目要验收上线.所以忙的脚不沾地.现在终于可以忙里偷闲,写一篇关于Signal ...

  8. 官宣.NET 6 预览版4

    我们很高兴发布 .NET 6 Preview 4.我们现在大约完成了 .NET 6 发布的一半.现在是一个很好的时机,可以再次查看.NET6的完整范围.许多功能都接近最终形式,而其他功能将很快推出,因 ...

  9. 【译】.NET 7 预览版 1 中的 ASP.NET Core 更新

    原文 | Daniel Roth 翻译 | 郑子铭 .NET 7 预览版 1 现已推出!这是 .NET 下一个主要版本的第一个预览版,其中将包括使用 ASP.NET Core 进行 Web 开发的下一 ...

随机推荐

  1. 【iCore1S 双核心板_FPGA】例程十:乘法器实验——乘法器的使用

    实验现象: 通过FPGA 的一个I/O 口连接LED:设定I/O 为输出模式.内部乘法器完成乘法计算后改变输出LED 的状态(红色LED 闪烁). 核心代码: module MULT( input C ...

  2. java.util.concurrent介绍【转】

    java.util.concurrent介绍   java.util.concurrent 包含许多线程安全.测试良好.高性能的并发构建块.不客气地说,创建 java.util.concurrent ...

  3. Java知多少(7)类与对象

    Java是一门面向对象的编程语言,理解Java,首先要理解类与对象这两个概念. Java中的类可以看做C语言中结构体的升级版.结构体是一种构造数据类型,可以包含不同的成员(变量),每个成员的数据类型可 ...

  4. Mac获取公网ip

    终端输入 curl http://members.3322.org/dyndns/getip way 2: ➜ ~ wget http://ipecho.net/plain -O - -q ; ech ...

  5. js实现选中文字 分享功能

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  6. Linux下跑程序,防止命令终端(断网,断电)

    有时候我们在服务器上跑程序,会发现当我们离开窗口时,正在执行的程序中断了,这让人非常郁闷.下面介绍防止程序中断的方法: 新建一个名为yourname的Screen窗口: screen -S yourn ...

  7. 解决Win10 Virtualbox5.2.18桥接不能联网小记

    1.设备管理器,右键没添加过时硬件(如果没有,则在cmd中键入命令hdwwiz C:\windows\system32>hdwwiz),按照如下图操作 如此安装Microsoft KM-TEST ...

  8. Android SAX解析XML

    本篇讲解一下SAX解析XML这种方式,首先来看一下它的基本介绍: SAX是一种以事件驱动的XML API,由它定义的事件流可以指定从解析器传到专门的处理程序的代码的XML结构,简单的讲,它是种解析速度 ...

  9. C# windows程序应用与JavaScript 程序交互实现例子

    C# windows程序应用与JavaScript 程序交互实现例子 最近项目中又遇到WinForm窗体内嵌入浏览器(webBrowser)的情况,而且涉及到C#与JavaScript的相互交互问题, ...

  10. 电子书阅读(epub) --- calibre

    https://calibre-ebook.com/download   calibre https://www.fosshub.com/Calibre.html   win 64 bit calib ...