在这个话题▼

编辑文本注释后画,HTML5的JavaScript

本教程演示了如何创建一个HTML5的JavaScript应用程序,使用LEADTOOLS SDK创建文本注释,编辑默认文本后画他们。

概述
总结	本教程介绍了如何使用LEADTOOLS注释标记SDK技术在一个HTML5 JavaScript应用程序。
完成时间	30分钟
Visual Studio项目	下载教程项目(133 KB)
平台	JS的Web应用程序
IDE	Visual Studio代码——客户端
开发许可	下载LEADTOOLS

所需的知识

熟悉基本的步骤创建一个项目的审查添加引用和设置许可证——HTML5 JavaScript和使用自动注释,HTML5的JavaScript教程,在工作之前编辑文本注释后画,HTML5的JavaScript教程。

本教程使用了http服务器控制台命令,运行一个静态文件服务器。安装http服务器第一次安装node . js然后安装http服务器。

创建项目并添加LEADTOOLS引用

从项目中创建的副本使用自动注释,HTML5的JavaScript教程。如果项目是不可用,按照这个教程中的步骤创建它。

的引用需要取决于项目的目的。可以通过添加引用. js文件位于< INSTALL_DIR > \ LEADTOOLS22 \ Bin \ JS。

对于这个项目,还需要以下引用:

Leadtools.js
Leadtools.Controls.js
Leadtools.Annotations.Engine
Leadtools.Annotations.Rendering.JavaScript.js
Leadtools.Annotations.Designers.js
Leadtools.Annotations.Automation.js
Leadtools.188金宝搏beat体育官网Demos.js
Leadtools.188金宝搏beat体育官网Demos.Annotations.js

确保这些文件复制到项目的自由文件夹中。

对于一个完整的列表的JS应用程序所需文件,请参考文件包含在您的应用程序

设置许可文件

许可解锁项目需要的特性。它必须设置工具箱函数被调用之前。细节包括教程不同的平台,请参考设置一个运行时许可。

有两种类型的运行时许可证:

评估许可,评估工具包时下载获得。它允许评估工具包。
部署许可证。如果部署许可证文件和开发人员的关键是需要的,请参考获得许可证。

请注意

添加LEADTOOLS引用和设置许可中会详细介绍添加引用和设置许可证——HTML5 JavaScript教程。

编写JS文件

与项目创建、依赖关系添加许可设置,使用自动注释,HTML5的JavaScript教程代码添加,可以开始编码。

打开app.js文件位于项目文件夹。将下面的代码添加到的底部window财产事件添加功能来编辑文本注释后画他们。

automation.add_draw (函数(发送者,e) {常量drawObject = e.object;如果(e。operationStatus = = lt.Annotations.Engine.AnnDesignerOperationStatus。& & drawObject.supportsFont结束){常量矩形= automation.container.mapper.rectFromContainerCoordinates (drawObject.bounds);常量editTextEventArg = lt.Annotations.Engine.AnnEditTextEventArgs。创建(drawObject、矩形);automation_EditText (这,editTextEventArg);}});automation.add_editText (automation_EditText);函数automation_EditText(发送者,e) {常量textElement = document.createElement (“文本区域”);textElement。id =“textObject”;textElement.style。左= e.get_bounds () .get_left () +“像素”;textElement.style。顶级= e.get_bounds () .get_top () +“像素”;textElement.style。位置=“绝对”;textElement.style。zIndex =“100”;textElement.style。身高= e.get_bounds () .get_height () +“像素”;textElement.style。.get_width宽度= e.get_bounds () () +“像素”;_textObjectUserData = e.get_textObject ();textElement。.get_text value = e.get_textObject () ();textElement.style。.get_color .get_textForeground颜色= e.get_textObject () () ();textElement.style。.get_fontFamilyName .get_font fontFamily = e.get_textObject () () ();textElement.style。.get_fontSize .get_font字形大小= e.get_textObject () () () +“pt”;textElement。包=“关闭”;常量父母= imageViewer.get_mainDiv () .parentNode;parent.appendChild (textElement);automationControl.automationLostFocus.invoke (这,lt.LeadEventArgs.empty);textElement.focus ();textElement.addEventListener (“focusout”,函数(){常量父母= imageViewer.get_mainDiv () .parentNode;让孩子= . getelementbyid (“textObject”);如果(孩子){_textObjectUserData.set_text (child.value);parent.removeChild(孩子);/ / $(" #内容”).focus ();孩子=零;}});}