本教程展示如何创建一个使用LEADTOOLS自动注释的JavaScript应用程序。
概述 | |
---|---|
总结 | 本教程将介绍如何使用自动注释。 |
完成时间 | 20分钟 |
Visual Studio项目 | 下载教程计划(1mb) |
平台 | JS Web应用程序 |
IDE | Visual Studio代码-客户端 |
开发许可 | 下载LEADTOOLS |
在开始之前使用自动注释- HTML5 JavaScript本教程中,通过回顾添加引用和设置许可证- HTML5 JavaScript而且在图像查看器中显示图像- HTML5 JavaScript教程。
本教程将使用http服务器
,用于运行静态文件服务器的控制台命令。安装http服务器
第一次安装node . js
然后安装http服务器
.
创建一个包含以下内容的项目文件夹:
index . html
文件app.js
文件自由
文件夹LEADTOOLS
文件夹所需要的参考资料取决于项目的目的。本教程需要以下JS文件:
它们可以在这里找到:< INSTALL_DIR > \ LEADTOOLS21 \ 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
请确保将这些文件复制到自由
文件夹,并将它们导入index . html
文件。
请注意
的
Leadtools.188金宝搏beat体育官网Demos.js
而且Leadtools.188金宝搏beat体育官网Demos.Annotations.js
Libraries在这个目录下:< INSTALL_DIR > \ LEADTOOLS21 \ Bin \ JS \ DemoLibraries \
.
许可证解锁项目所需的特性。它必须在调用任何工具箱函数之前设置。有关包括针对不同平台的教程的详细信息,请参阅设置运行时License.
有两种类型的运行时许可证:
请注意
中更详细地介绍了添加LEADTOOLS引用和设置许可添加引用和设置许可证- HTML5 JavaScript教程。
注释框架允许用户定义用于各种注释(戳记、点、锁和热点)的图像。工具箱中包含了这些对象的默认映像集。在本教程中,我们将使用这里的默认图像:< INSTALL_DIR > \ LEADTOOLS21 \ \ JS \常见例子\资源
.
为使这些对象对应用程序可用,请复制资源
目录到项目文件夹。
创建项目、添加依赖项和资源、设置许可证并添加显示图像代码之后,就可以开始编码了。
打开index . html
文件中,并将以下行添加到< >头
标签:
<头>
<meta charset="UTF-8" />
<元名称="viewport" content="width=device-width, initial-scale=1.0" />
<标题>LEADTOOLS演示</标题>
<script type="text/javascript" src="./lib/Leadtools.js"></脚本>
<script type="text/javascript" src="./lib/Leadtools.Controls.js"></脚本>
<script type="text/javascript" src="./lib/Leadtools.Annotations.Engine.js"></脚本>
<script type="text/javascript" src="./lib/Leadtools.Annotations.Rendering.JavaScript.js"></脚本>
<script type="text/javascript" src="./lib/Leadtools.Annotations.Designers.js"></脚本>
<script type="text/javascript" src="./lib/Leadtools.Annotations.Automation.js"></脚本>
<script type="text/javascript" src="./lib/Leadtools.188金宝搏beat体育官网Demos.js"></脚本>
<script type="text/javascript" src="./lib/Leadtools.188金宝搏beat体育官网Demos.Annotations.js"></脚本>
<脚本类型="text/javascript" src="./app.js"></脚本>
</头>
将LEADTOOLS依赖项附加到index . html
页面。
然后添加以下内容<选择>
元素的体index . html
:
<身体>
<——DIV用作LEADTOOLS图像查看器的容器——>
<div
id = " imageViewerDiv "
风格= "宽度:600 px;身高:600 px;background - color: darkgray”
></ div>
<标签= " currentObject ">注释对象:</标签>
<选择id = " currentObject "></选择>
<标签= " userMode ">用户模式:</标签>
<选择id = " userMode ">
<选项>设计</选项>
<选项>运行</选项>
</选择>
</身体>
这些选项将用于选择当前用户模式和各种类型的注释对象。
要为应用程序设置自动化管理器和自动化对象,请打开app.js
文件并将其内容替换为以下代码:
窗口。onload =函数(){
//获取容器DIV
varimageViewerDiv = document.getElementById(“imageViewerDiv”);
//在里面创建图像查看器
varcreateOptions =新lt.Controls.ImageViewerCreateOptions (imageViewerDiv);
varimageview =新lt.Controls.ImageViewer (createOptions);
//添加处理程序以显示错误警报
imageViewer.itemError.add (函数(发件人,e) {
alert (“加载错误”+ e.data.srcElement.src);
});
imageview。imageUrl =“https://demo.leadtools.com/images/png/pngimage.png”;
//使用HTML5渲染引擎创建并设置自动化管理器
varrenderingEngine =新lt.Annotations.Rendering.AnnHtml5RenderingEngine ();
var经理=新lt.Annotations.Automation.AnnAutomationManager.create (
renderingEngine
);
//创建默认的注释对象
manager.createDefaultObjects ();
varcurrentObject = document.getElementById(“currentObject”);
varautomationObjCount = manager.objects.count;
为(varI = 0;i < automationObjCount;我+ +){
//获取对象
varautomationObj = manager.objects.item(i);
//添加它的名字到选择元素
varname = automationObj.name;
varid = automationObj.id;
currentObject.options [currentObject.options。长度]=新选项(名称、id);
}
//钩子到它的变化事件
currentObject.addEventListener (“改变”,函数(){
//获取对象ID
varid = parseInt(currentObject.options[currentObject.selectedIndex].value);
//设置为管理器中的当前对象
经理。currentobectid = id;
});
//当当前对象ID改变时,我们需要更新我们的select
manager.currentObjectIdChanged.add (函数(发件人,e) {
varcurrentobectid = manager. currentobectid;
为(varI = 0;i < currentObject.options.length;我+ +){
varid = parseInt(currentObject.options[i].value);
如果(id === currentobectid) {
currentObject。selectedIndex = i;
打破;
}
}
});
varuserMode = document.getElementById(“userMode”);
//钩子到它的变化事件
userMode.addEventListener (“改变”,函数(){
//获取所选模式
varmode = userMode.options[userMode.selectedIndex].innerHTML;
如果(模式= =“设计”) {
经理。userMode = lt.Annotations.Engine.AnnUserMode.design;
}其他的{
经理。userMode = lt.Annotations.Engine.AnnUserMode.run;
}
});
//创建一个使用LEADTOOLS ImageViewer的自动化控制对象实例
varautomationControl =新lt.188金宝搏beat体育官网Demos.Annotations.ImageViewerAutomationControl ();
//附加图像查看器
automationControl。imageview =imageViewer;
//设置图像查看器交互模式
varautomationInteractiveMode =新lt.188金宝搏beat体育官网Demos.Annotations.AutomationInteractiveMode ();
automationInteractiveMode。automationControl =automationControl;
imageViewer.defaultInteractiveMode = automationInteractiveMode;
//设置自动化(同时创建容器)
var自动化=新lt.Annotations.Automation.AnnAutomation (
经理,
automationControl
);
//添加处理程序,当图像大小改变时更新容器大小
imageViewer.itemChanged.add (函数(发件人,e) {
varContainer = automation.container;
容器。size = container.mapper.sizeToContainerCoordinates(
imageViewer.imageSize
);
});
//将此自动化设置为活动的自动化
自动化。活跃的=真正的;
//钩子到运行模式,以便我们知道对象何时进入运行模式
automation.run.add (函数(发件人,e) {
// e类型为annrdesignignereventargs
如果(
e.operationStatus = =
lt.Annotations.Engine.AnnDesignerOperationStatus.start
) {
//获取正在运行的对象
alert ("在运行模式下,你点击了id的对象"+ e.object.id);
}
});
//可选:将资源添加到自动化管理器
addresource(经理);
};
函数addresource(经理){
//为戳、点、热点和锁注释添加图像
var资源=新lt.Annotations.Engine.AnnResources ();
经理。资源=资源;
var橡皮图章资源=资源。橡皮图章;
varimagesResources = resources.images;
rubberStampsResources [
lt.Annotations.Engine.AnnRubberStampType.stampApproved
] =新lt.Annotations.Engine.AnnPicture (
“资源/对象/验证/ approved.png”
);
rubberStampsResources [
lt.Annotations.Engine.AnnRubberStampType.stampAssigned
] =新lt.Annotations.Engine.AnnPicture (
“资源/对象/验证/ Assigned.png”
);
rubberStampsResources [
lt.Annotations.Engine.AnnRubberStampType.stampClient
] =新lt.Annotations.Engine.AnnPicture (
“资源/对象/验证/ Client.png”
);
rubberStampsResources [
lt.Annotations.Engine.AnnRubberStampType.stampChecked
] =新lt.Annotations.Engine.AnnPicture (
“资源/对象/验证/ checked.png”
);
rubberStampsResources [
lt.Annotations.Engine.AnnRubberStampType.stampCopy
] =新lt.Annotations.Engine.AnnPicture (
“资源/对象/验证/ Copy.png”
);
rubberStampsResources [
lt.Annotations.Engine.AnnRubberStampType.stampDraft
] =新lt.Annotations.Engine.AnnPicture (
“资源/对象/验证/ Draft.png”
);
rubberStampsResources [
lt.Annotations.Engine.AnnRubberStampType.stampExtended
] =新lt.Annotations.Engine.AnnPicture (
“资源/对象/验证/ Extended.png”
);
rubberStampsResources [
lt.Annotations.Engine.AnnRubberStampType.stampFax
] =新lt.Annotations.Engine.AnnPicture (
“资源/对象/验证/ Fax.png”
);
rubberStampsResources [
lt.Annotations.Engine.AnnRubberStampType.stampFaxed
] =新lt.Annotations.Engine.AnnPicture (
“资源/对象/验证/ Faxed.png”
);
rubberStampsResources [
lt.Annotations.Engine.AnnRubberStampType.stampImportant
] =新lt.Annotations.Engine.AnnPicture (
“资源/对象/验证/ Important.png”
);
rubberStampsResources [
lt.Annotations.Engine.AnnRubberStampType.stampInvoice
] =新lt.Annotations.Engine.AnnPicture (
“资源/对象/验证/ Invoice.png”
);
rubberStampsResources [
lt.Annotations.Engine.AnnRubberStampType.stampNotice
] =新lt.Annotations.Engine.AnnPicture (
“资源/对象/验证/ Notice.png”
);
rubberStampsResources [
lt.Annotations.Engine.AnnRubberStampType.stampPaid
] =新lt.Annotations.Engine.AnnPicture (
“资源/对象/验证/ Paid.png”
);
rubberStampsResources [
lt.Annotations.Engine.AnnRubberStampType.stampOfficial
] =新lt.Annotations.Engine.AnnPicture (
“资源/对象/验证/ Official.png”
);
rubberStampsResources [
lt.Annotations.Engine.AnnRubberStampType.stampOnFile
] =新lt.Annotations.Engine.AnnPicture (
“资源/对象/验证/ Onfile.png”
);
rubberStampsResources [
lt.Annotations.Engine.AnnRubberStampType.stampPassed
] =新lt.Annotations.Engine.AnnPicture (
“资源/对象/验证/ Passed.png”
);
rubberStampsResources [
lt.Annotations.Engine.AnnRubberStampType.stampPending
] =新lt.Annotations.Engine.AnnPicture (
“资源/对象/验证/ Pending.png”
);
rubberStampsResources [
lt.Annotations.Engine.AnnRubberStampType.stampProcessed
] =新lt.Annotations.Engine.AnnPicture (
“资源/对象/验证/ Processed.png”
);
rubberStampsResources [
lt.Annotations.Engine.AnnRubberStampType.stampReceived
] =新lt.Annotations.Engine.AnnPicture (
“资源/对象/验证/ Received.png”
);
rubberStampsResources [
lt.Annotations.Engine.AnnRubberStampType.stampRejected
] =新lt.Annotations.Engine.AnnPicture (
“资源/对象/验证/ rejected.png”
);
rubberStampsResources [
lt.Annotations.Engine.AnnRubberStampType.stampRelease
] =新lt.Annotations.Engine.AnnPicture (
“资源/对象/验证/ Release.png”
);
rubberStampsResources [
lt.Annotations.Engine.AnnRubberStampType.stampSent
] =新lt.Annotations.Engine.AnnPicture (
“资源/对象/验证/ Sent.png”
);
rubberStampsResources [
lt.Annotations.Engine.AnnRubberStampType.stampShipped
] =新lt.Annotations.Engine.AnnPicture (
“资源/对象/验证/ Shipped.png”
);
rubberStampsResources [
lt.Annotations.Engine.AnnRubberStampType.stampTopSecret
] =新lt.Annotations.Engine.AnnPicture (
“资源/对象/验证/ topsecret.png”
);
rubberStampsResources [
lt.Annotations.Engine.AnnRubberStampType.stampUrgent
] =新lt.Annotations.Engine.AnnPicture (
“资源/对象/验证/ urgent.png”
);
rubberStampsResources [
lt.Annotations.Engine.AnnRubberStampType.stampVoid
] =新lt.Annotations.Engine.AnnPicture (
“资源/对象/验证/ void.png”
);
imagesResources.add (
新lt.Annotations.Engine.AnnPicture (“资源/对象/ Point.png”)
);
imagesResources.add (
新lt.Annotations.Engine.AnnPicture (“资源/对象/ lock.png”)
);
imagesResources.add (
新lt.Annotations.Engine.AnnPicture (“资源/对象/ hotspot.png”)
);
}
打开命令行,并导航到项目文件夹。使用以下命令运行静态文件服务器。
http服务器
服务器应该启动并运行http: localhost: 8080
.控制台中应该出现一条消息,指出服务器可用的所有端口。
在设计模式下,用户可以选择各种注释对象,并将它们绘制在显示的图像上。在运行模式下单击对象时,将显示一个警告,指示单击了哪个对象。应用程序可以通过处理自动化运行事件来处理注释在运行模式下的行为。
本教程展示了如何在HTML5/JS应用程序中使用自动注释。