引用▼
您可以轻松地创建自己的注释LEADTOOLS注释的对象框架。本教程展示了如何创建两个新注释对象和如何编写所需的设计师为他们的对象可以插入LEADTOOLS注释自动化框架。
首先创建一个新的HTML文件以下标记:
< !DOCTYPE html >< html xmlns =“http://www.w3.org/1999/xhtml”><头><标题>实现用户定义的对象与LEADTOOLS注释< /名称>< meta http-equiv =“X-UA-Compatible”内容=“IE = 9”/ >< meta http-equiv =“内容类型”内容=“text / html;charset = utf - 8”/ >< meta name =“视口”内容=“宽度=设备宽度,初始= 1.0,user-scalable = 0,最小规模= 1.0,最大范围= 1.0 "/ ><时尚> # imageViewerDiv{边界:1 px固体# 000000;宽度:600 px;身高:400 px;background - color: # 7 f7f7f;}> < /风格< / >头<身体onload =“新()”>< div id =“imageViewerDiv”> < / div >< /身体>< / html >
添加脚本标签,标签在页面的头,LEADTOOLS JavaScript库。注意:在这个例子中,LEADTOOLS. js文件位于一个自由子文件夹:
<脚本类型=“text / javascript”src =“lib / Leadtools.js”> < /脚本><脚本类型=“text / javascript”src =“lib / Leadtools.Controls.js”> < /脚本><脚本类型=“text / javascript”src =“lib / Leadtools.Annotations.Engine.js”> < /脚本><脚本类型=“text / javascript”src =“lib / Leadtools.Annotations.Rendering.JavaScript.js”> < /脚本><脚本类型=“text / javascript”src =“lib / Leadtools.Annotations.Designers.js”> < /脚本><脚本类型=“text / javascript”src =“lib / Leadtools.Annotations.Automation.js”> < /脚本><脚本类型=“text / javascript”src =“lib / Leadtool188金宝搏beat体育官网s.Demos.js”> < /脚本><脚本类型=“text / javascript”src =“lib / Leadtool188金宝搏beat体育官网s.Demos.Annotations.js”> < /脚本>
要创建的对象是一个简单的对象,一个三角形。这个对象有三个点三角形的结束点,它会使用一个中风的三角形边缘和内部填充。
我们需要创建一个自定义注释对象类型。因为一个三角形是一个多边形只有三分,我们可以得到的AnnPolylineObject类。将下面的代码添加到您的脚本标记:
/ / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / // / AnnTriangleObjectAnnTriangleObject =函数AnnTriangleObject () {AnnTriangleObject.initializeBase (这);这.isClosed =真正的;/ /三角形是一个封闭的图这.setId (-99);/ /设置对象ID}AnnTriangleObject。原型= {创建:函数AnnTriangleObject美元create () {/ /定义自定义注释对象(三角形是一个多段线只有3分)返回新AnnTriangleObject ();}}AnnTriangleObject.registerClass (“AnnTriangleObject”,lt.Annotations.Engine.AnnPolylineObject);
因为没有现有的绘制和编辑设计师可以使用AnnTriangleObject类,需要创建一个。首先,创建设计师画类,来自AnnDrawDesigner。将下面的代码添加到您的脚本标记,之后AnnTriangleObject代码:
/ / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / // / AnnTriangleDrawDesignerAnnTriangleDrawDesigner =函数AnnTriangleDrawDesigner (automationControl容器,annPolyineObject) {AnnTriangleDrawDesigner.initializeBase (这(automationControl容器,annPolyineObject]);}AnnTriangleDrawDesigner。原型= {/ /覆盖onPointerDown三角形法和加3分onPointerDown:函数AnnTriangleDrawDesigner onPointerDown美元(发送者,e) {var处理= AnnTriangleDrawDesigner.callBaseMethod (这,“onPointerDown”(发送者,e));如果(这.targetObject.points。数< 3)如果(e。按钮= = = lt.Annotations.Engine.AnnMouseButton.left) {如果(这.startWorking ())这.targetObject.points.add (e.location);处理=真正的;}返回处理;},/ /覆盖onPointerUp方法和所绘制的图纸3点时结束onPointerUp:函数AnnTriangleDrawDesigner onPointerUp美元(发送者,e) {var处理= AnnTriangleDrawDesigner.callBaseMethod (这,“onPointerUp”(发送者,e));处理=真正的;如果(这.targetObject.points。数> = 3)这.endWorking ();这.invalidate (lt.LeadRectD.empty);返回处理;}}AnnTriangleDrawDesigner.registerClass (“AnnTriangleDrawDesigner”,lt.Annotations.Designers.AnnDrawDesigner);
接下来,创建编辑设计类,派生的AnnPolylineEditDesigner类。后,将下面的代码添加到您的脚本AnnTriangleDrawDesigner代码。注意,这个对象与LEADTOOLS设计工作AnnHtml5RenderingEngine渲染引擎。的代码创建一个渲染引擎AnnSvgRenderingEngine本教程的最后实现。
/ / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / // / AnnTriangleEditDesigner/ /不需要这个类的定制。AnnTriangleEditDesigner =函数AnnTriangleEditDesigner (automationControl容器,annPolylineObject) {AnnTriangleEditDesigner.initializeBase (这(automationControl容器,annPolylineObject]);}AnnTriangleEditDesigner.registerClass (“AnnTriangleEditDesigner”,lt.Annotations.Designers.AnnPolylineEditDesigner);
现在创建一个自定义渲染器AnnTriangleObject,来自AnnPolylineEditDesigner类。后,将下面的代码添加到您的脚本AnnTriangleDrawDesigner代码:
/ / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / // / AnnTriangleRenderer (HTML5画布版)AnnTriangleRenderer =函数AnnTriangleRenderer () {AnnTriangleRenderer.initializeBase (这);}AnnTriangleRenderer。原型= {/ /覆盖渲染方法为了画3点为用户创建它们。呈现:函数AnnTriangleRenderer美元呈现(annObject mapper) {AnnTriangleRenderer.callBaseMethod (这,“呈现”映射器,annObject]);/ /如果图纸已经完成,使基类AnnPolylineObjectRenderer处理工作如果(annObject.points。数= = = 3)返回;var引擎= Type.safeCast (这.renderingEngine lt.Annotations.Rendering.AnnHtml5RenderingEngine);如果(引擎! =零){var上下文= engine.context;如果(上下文! =零){context.save ();var点= mapper.pointsFromContainerCoordinates (annObject.points.toArray (), annObject.fixedStateOperations);lt.Annotations.Rendering.AnnHtml5RenderingEngine。setStroke(上下文,lt.Annotations.Engine.AnnStroke.create (lt.Annotations.Engine.AnnSolidColorBrush.create (“绿色”),lt.LeadLengthD.create (1)));context.beginPath ();为(varx = 0;x < points.length;x + +) {var点=点[x];如果(! point.isEmpty) {var矩形= lt.LeadRectD.create(点。x - 10点。y - 10、20、20);lt.Annotations.Rendering.AnnHtml5RenderingEngine。drawEllipse(上下文、矩形);}}context.closePath ();context.stroke ();context.restore ();}}}}AnnTriangleRenderer.registerClass (“AnnTriangleRenderer”,lt.Annotations.Rendering.AnnPolylineObjectRenderer);
最后一步是编写代码,胶水LEADTOOLS imageview和自动注释对象在一起。
/ /共享变量var自动化;/ /创建自定义自动化对象和钩的设计师函数createTriangleAutomationObject (annObject) {/ /创建自动化对象varautomationObj =新lt.Annotations.Automation.AnnAutomationObject ();automationObj。id = annObject.id;automationObj.name =“三角形”;automationObj。drawDesignerType = AnnTriangleDrawDesigner;/ /自定义画钩设计师automationObj。editDesignerType = AnnTriangleEditDesigner;/ /钩自定义编辑设计师automationObj.runDesignerType = lt.Annotations.Designers.AnnRunDesigner;/ /得到当前的渲染引擎varrenderingEngine = annAutomation.manager.renderingEngine;/ /设置拇指varannTriangleRenderer =新AnnTriangleRenderer ();varannPolylineRenderer = renderingEngine.renderers [lt.Annotations.Engine.AnnObject.polylineObjectId];annTriangleRenderer。locationsThumbStyle = annPolylineRenderer.locationsThumbStyle;annTriangleRenderer。rotateCenterThumbStyle = annPolylineRenderer.rotateCenterThumbStyle;annTriangleRenderer。rotateGripperThumbStyle = annPolylineRenderer.rotateGripperThumbStyle;renderingEngine.renderers [annObject。id] = annTriangleRenderer;/ /自定义渲染器automationObj。objectTemplate = annObject;返回automationObj;}函数setupTriangleAnnotation () {/ /创建三角形对象var三角=新AnnTriangleObject ();三角形。填补= lt.Annotations.Engine.AnnSolidColorBrush.create (“蓝色”);/ /创建一个用户定义的自动化对象varautomationObj = createTriangleAutomationObject(三角形);annAutomation.manager.objects.add (automationObj);}函数新(){/ /创建查看器varcreateOptions =新lt.Controls.ImageViewerCreateOptions (. getelementbyid (“imageViewerDiv”));varimageview =新lt.Controls.ImageViewer (createOptions);/ /表项改变事件设置容器的大小和当前对象id当映像被加载imageViewer.itemChanged.add (imageViewer_ItemChanged);/ /设置图像URL -负载使用浏览器支持imageview。imageUrl =“https://demo.leadtools.com/images/jpeg/cactus.jpg”;/ /符合内的图像查看器imageViewer.zoom (lt.Controls.ControlSizeMode。健康,1.0,imageViewer.defaultZoomOrigin);/ /创建注释自动化控制和附加一个图像浏览器varimageViewerAutomationControl =新lt.188金宝搏beat体育官网Demos.Annotations.ImageViewerAutomationControl ();imageViewerAutomationControl。imageview = imageview;/ /创建automation manager和默认对象var经理=新lt.Annotations.Automation.AnnAutomationManager ();manager.createDefaultObjects ();/ /创建一个注释的渲染引擎,并将其绑定到自动化管理器/ /在这个例子中,使用一个HTML5 5渲染引擎。/ /替换这个AnnSvgRenderingEngine使用SVG引擎。varrenderingEngine =新lt.Annotations.Rendering.AnnHtml5RenderingEngine ();经理。renderingEngine = renderingEngine;/ /创建一个自动化交互模式实例并结合自动化控制varautomationInteractiveMode =新lt.188金宝搏beat体育官网Demos.Annotations.AutomationInteractiveMode ();automationInteractiveMode。automationControl = imageViewerAutomationControl;/ /添加自动化交互模式列表和观众互动模式启用它imageViewer.interactiveModes.beginUpdate ();imageViewer.interactiveModes.add (automationInteractiveMode);automationInteractiveMode。isEnabled =真正的;imageViewer.interactiveModes.endUpdate ();/ /创建注释自动化对象annAutomation =新lt.Annotations.Automation。AnnAutomation(经理,imageViewerAutomationControl);/ /设置三角形注释setupTriangleAnnotation ();/ /激活注释自动化annAutomation。活跃的=真正的;}函数imageViewer_ItemChanged(发送者,e) {如果(e。原因= = lt.Controls.ImageViewerItemChangedReason.url) {/ /加载图像大小var图象尺寸= sender.activeItem.imageSize;/ /设置容器大小和加载图像大小var容器= annAutomation.container;容器。大小= container.mapper.sizeToContainerCoordinates (lt.LeadSizeD.create(图象尺寸。宽度,imageSize.height));/ /设置当前对象ID的三角形annAutomation.manager。currentObjectId = -99;}}
保存您的HTML文件和加载在你最喜欢的浏览器。然后,单击/利用三个不同的点在画一个查看器控制AnnTriangleObject。
使用自定义AnnTriangleObject与LEADTOOLSAnnSvgRenderingEngine第6步,更新如下:
/ / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / // / AnnTriangleRenderer (SVG版本)AnnTriangleRenderer =函数AnnTriangleRenderer () {这._activeId = 2美元”;AnnTriangleRenderer.initializeBase (这);}AnnTriangleRenderer。原型= {setActivePolyLineID:函数AnnTriangleRenderer setActivePolyLineID美元(Id) {这._activeId 2美元= Id;},createObject:函数AnnTriangleRenderer createObject美元(annObject) {AnnTriangleRenderer.callBaseMethod (这,“createObject”[annObject]);varg = lt.Annotations.Rendering.AnnSvgHelpers.getElementById (annObject.get_stateId ());var多段线= lt.Annotations.Rendering.AnnSvgHelpers.createPolyline ();varpolylineId = lt.Annotations.Rendering.AnnSvgHelpers.getPolylineId (annObject.get_stateId ());多段线。id = polylineId;varclipPathPolyline = lt.Annotations.Rendering.AnnSvgHelpers.createPolyline ();varclipPathId = lt.Annotations.Rendering.AnnSvgHelpers.getClipPathId (annObject.get_stateId ());clipPathPolyline。id = lt.Annotations.Rendering.AnnSvgHelpers.getPolylineId (clipPathId);var元素= lt.Annotations.Rendering.AnnSvgHelpers.getElementById (clipPathId);element.appendChild (clipPathPolyline);这.setActivePolyLineID (”);g.appendChild(多线);},removeObject:函数AnnTriangleRenderer removeObject美元(annObject) {varid = annObject.get_stateId ();如果(! String.isNullOrEmpty (id)) {varclipPathId = lt.Annotations.Rendering.AnnSvgHelpers.getClipPathId (annObject.get_stateId ());如果(! String.isNullOrEmpty (clipPathId)) {var元素= lt.Annotations.Rendering.AnnSvgHelpers.getElementById (clipPathId);如果(元素! =零){lt.Annotations.Rendering.AnnSvgHelpers。removeElement(元素,lt.Annotations.Rendering.AnnSvgHelpers.getElementById (lt.Annotations.Rendering.AnnSvgHelpers.getPolylineId (clipPathId)));}}varobjectElement = lt.Annotations.Rendering.AnnSvgHelpers.getElementById (id);如果(objectElement ! =零){lt.Annotations.Rendering.AnnSvgHelpers。removeElement (objectElement lt.Annotations.Rendering.AnnSvgHelpers.getElementById (lt.Annotations.Rendering.AnnSvgHelpers.getPolylineId (id)));}}AnnTriangleRenderer.callBaseMethod (这,“removeObject”[annObject]);},呈现:函数AnnTriangleRenderer美元呈现(annObject mapper) {如果(mapper = =零){lt.Annotations.Engine.ExceptionHelper.argumentNullException (“映射”);}如果(annObject = =零){lt.Annotations.Engine.ExceptionHelper.argumentNullException (“annObject”);}varsvgEngine = Type.safeCast (这.get_renderingEngine (), lt.Annotations.Rendering.AnnSvgRenderingEngine);如果(svgEngine ! =零){varstateId = annObject.get_stateId ();varoldStateID = annObject.get_stateId ();varobjectElement = lt.Annotations.Rendering.AnnSvgHelpers.getElementById (stateId);如果(objectElement ! =零){如果(svgEngine.get_element () .contains (objectElement)) {如果(String.isNullOrEmpty (这._activeId 2美元)){这._activeId 2美元= lt.Annotations.Rendering.AnnSvgHelpers.getPolylineId (stateId);}var多段线= lt.Annotations.Rendering.AnnSvgHelpers.getElementById (这._activeId 2美元);如果(这.get_clipPath ()) {varclipPathId = lt.Annotations.Rendering.AnnSvgHelpers.getClipPathId (stateId);lt.Annotations.Rendering.SvgDrawingHelper.drawPolyline (lt.Annotations.Rendering.AnnSvgHelpers.getElementById (lt.Annotations.Rendering.AnnSvgHelpers.getPolylineId (clipPathId)),映射器,annObject);}lt.Annotations.Rendering.SvgDrawingHelper。drawPolyline(折线,映射器,annObject);}其他的{这.addObject (annObject);这.render (mapper annObject);annObject.set_stateId (oldStateID);}}AnnTriangleRenderer.callBaseMethod (这,“呈现”映射器,annObject]);这._activeId = 2美元”;}}}AnnTriangleRenderer.registerClass (“AnnTriangleRenderer”,lt.Annotations.Rendering.AnnSvgObjectRenderer);