ImageViewerRubberBandInteractiveMode对象(ImageViewerRubberBandInteractiveMode) | Leadtools。控制| HTML5 JavaScript的帮助

ImageViewerRubberBandInteractiveMode对象

ImageViewer.js< / div >

RubberBandInteractiveMode.html< / div >< / div >< div id ="GenericContainerEntry5686" class="GenericContainerEntry">

进口{ImageViewer_Example}从“. . / imageview”;出口类ImageViewer_RubberBandInteractiveModeExample {私人viewerExample;构造函数(){这.viewerExample =新ImageViewer_Example (这.run);}私人运行=(观众:lt.Controls.ImageViewer) = > {常量rubberBandMode: lt.Controls。ImageViewerRubberBandInteractiveMode =新lt.Controls.ImageViewerRubberBandInteractiveMode ();rubberBandMode.rubberBandCompleted.add((发送方,e) = > {如果(e。isCanceled | | ! rubberBandMode.item)返回;常量点:lt.LeadPointD [] = e.points.map((点)= > {返回point.clone ();});让min = lt.LeadPointD.empty;让max = lt.LeadPointD.empty;为(让我= 0;我< points.length;我+ +){[我]= viewer.convertPoint (rubberBandMode点。项,lt.Controls.ImageViewerCoordinateType。控制,lt.Controls.ImageViewerCoordinateType。形象,点[我]);如果(我= = = 0){min =点[我].clone ();max =点[我].clone ();}其他的{min.x = Math.min(最小值。[我]。x x点);min.y = Math.min(最小值。[我].y y点);max。x = Math.max (max。[我]。x x点);max。y = Math.max (max。[我].y y点);}}常量中心:lt.LeadPointD = lt.LeadPointD.create(最小值。x + (max。x - min.x) / 2, min.y + (max。y - min.y) / 2);常量项目:lt.Controls。ImageViewerItem = rubberBandMode.item;常量itemCanvas =项目。帆布as HTMLCanvasElement;常量ctx: CanvasRenderingContext2D = itemCanvas.getContext (“二维”);ctx.save ();ctx.beginPath ();常量矩形:lt.LeadRectD = lt.LeadRectD.fromLTRB(点[0]。x点[0]。y点[1]。x点[1].y);ctx.rect(矩形。x rect.y rect.width rect.height)ctx.closePath ();ctx。fillStyle =“rgba (0, 0 255。2)”;ctx.fill ();ctx。strokeStyle =“黄色”;ctx.stroke ();ctx.restore ();viewer.invalidate (lt.LeadRectD.empty);});rubberBandMode。autoItemMode = lt.Controls.ImageViewerAutoItemMode.autoSet;rubberBandMode。itemPart = lt.Controls.ImageViewerItemPart.image;viewer.interactiveModes.beginUpdate ();viewer.interactiveModes.clear ();viewer.interactiveModes.add (rubberBandMode);viewer.interactiveModes.endUpdate ();}}

出口类ImageViewer_Example {/ / LEADTOOLS imageview使用这个例子受保护的imageview: lt.Controls。imageview =零;/ /通用状态值所使用的例子公共timesClicked:数量= 0;构造函数(回调?:(viewer: lt.Controls.ImageViewer) =>无效){/ /设置LEADTOOLS许可证。取代你的实际的许可文件lt.RasterSupport.setLicenseUri (“https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt”,“EVAL”,零);/ /创建一个图像浏览器内imageViewerDiv元素常量imageViewerDiv = . getelementbyid (“imageViewerDiv”);常量createOptions: lt.Controls。ImageViewerCreateOptions =新lt.Controls.ImageViewerCreateOptions (imageViewerDiv);这.imageViewer =新lt.Controls.ImageViewer (createOptions);这.imageViewer。viewVerticalAlignment = lt.Controls.ControlAlignment.center;这.imageViewer。viewHorizontalAlignment = lt.Controls.ControlAlignment.center;这.imageViewer。autoCreateCanvas =真正的;/ /添加锅/缩放交互模式/ /单击并拖动锅,按住ctrl再点击并拖动放大和缩小这.imageViewer.interactiveModes.add (新lt.Controls.ImageViewerPanZoomInteractiveMode ());/ /加载一个图像这.imageViewer。imageUrl =“https://demo.leadtools.com/images/jpeg/cannon.jpg”;这.imageViewer.zoom (lt.Controls.ControlSizeMode。健康,9,这.imageViewer.defaultZoomOrigin);常量exampleButton = . getelementbyid (“exampleButton”);exampleButton.addEventListener (“点击”,()= > {这.timesClicked + +;/ /运行示例如果(回调)回调(这.imageViewer);});}}

进口{ImageViewer_Example}从“. . / imageview”;出口类ImageViewer_RubberBandInteractiveModeExample {viewerExample;构造函数(){这.viewerExample =新ImageViewer_Example (这.run);}运行=(观众)= > {常量rubberBandMode =新lt.Controls.ImageViewerRubberBandInteractiveMode ();rubberBandMode.rubberBandCompleted.add((发送方,e) = > {如果(e。isCanceled | | ! rubberBandMode.item)返回;常量点= e.points.map((点)= > {返回point.clone ();});让min = lt.LeadPointD.empty;让max = lt.LeadPointD.empty;为(让我= 0;我< points.length;我+ +){[我]= viewer.convertPoint (rubberBandMode点。项,lt.Controls.ImageViewerCoordinateType。控制,lt.Controls.ImageViewerCoordinateType。形象,点[我]);如果(我= = = 0){min =点[我].clone ();max =点[我].clone ();}其他的{min.x = Math.min(最小值。[我]。x x点);min.y = Math.min(最小值。[我].y y点);max。x = Math.max (max。[我]。x x点);max。y = Math.max (max。[我].y y点);}}常量中心= lt.LeadPointD.create (min。x + (max。x - min.x) / 2, min.y + (max。y - min.y) / 2);常量项= rubberBandMode.item;常量itemCanvas = item.canvas;常量ctx = itemCanvas.getContext (“二维”);ctx.save ();ctx.beginPath ();常量矩形= lt.LeadRectD.fromLTRB(点[0]。x点[0]。y点[1]。x点[1].y);ctx.rect(矩形。x rect.y rect.width rect.height)ctx.closePath ();ctx。fillStyle =“rgba (0, 0 255。2)”;ctx.fill ();ctx。strokeStyle =“黄色”;ctx.stroke ();ctx.restore ();viewer.invalidate (lt.LeadRectD.empty);});rubberBandMode。autoItemMode = lt.Controls.ImageViewerAutoItemMode.autoSet;rubberBandMode。itemPart = lt.Controls.ImageViewerItemPart.image;viewer.interactiveModes.beginUpdate ();viewer.interactiveModes.clear ();viewer.interactiveModes.add (rubberBandMode);viewer.interactiveModes.endUpdate ();}}

出口类ImageViewer_Example {/ / LEADTOOLS imageview使用这个例子imageview =零;/ /通用状态值所使用的例子timesClicked = 0;构造函数(回调){/ /设置LEADTOOLS许可证。取代你的实际的许可文件lt.RasterSupport.setLicenseUri (“https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt”,“EVAL”,零);/ /创建一个图像浏览器内imageViewerDiv元素常量imageViewerDiv = . getelementbyid (“imageViewerDiv”);常量createOptions =新lt.Controls.ImageViewerCreateOptions (imageViewerDiv);这.imageViewer =新lt.Controls.ImageViewer (createOptions);这.imageViewer。viewVerticalAlignment = lt.Controls.ControlAlignment.center;这.imageViewer。viewHorizontalAlignment = lt.Controls.ControlAlignment.center;这.imageViewer。autoCreateCanvas =真正的;/ /添加锅/缩放交互模式/ /单击并拖动锅,按住ctrl再点击并拖动放大和缩小这.imageViewer.interactiveModes.add (新lt.Controls.ImageViewerPanZoomInteractiveMode ());/ /加载一个图像这.imageViewer。imageUrl =“https://demo.leadtools.com/images/jpeg/cannon.jpg”;这.imageViewer.zoom (lt.Controls.ControlSizeMode。健康,9,这.imageViewer.defaultZoomOrigin);常量exampleButton = . getelementbyid (“exampleButton”);exampleButton.addEventListener (“点击”,()= > {这.timesClicked + +;/ /运行示例如果(回调)回调(这.imageViewer);});}}

< !doctype html >< html lang =“en”><标题>控件例子| RubberBandInteractiveMode < /名称><头>< script src =“https://code.jquery.com/jquery-2.2.4.min.js”诚信=“sha256-BbhdlvQf / xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44 = "crossorigin =“匿名”> < /脚本>< script src =“. . / . . / LT / Leadtools.js”> < /脚本>< script src =“. . / . . / LT / Leadtools.Controls.js”> < /脚本>< script src =“. . / . . / LT / Leadtools.Annotations.Engine.js”> < /脚本>< script src =“. . / . . / LT / Leadtools.Annotations.Designers.js”> < /脚本>< script src =“. . / . . / LT / Leadtools.Annotations.Rendering.Javascript.js”> < /脚本>< script src =“. . / . . / LT / Leadtools.Annotations.Automation.js”> < /脚本>< script src =“. . / . . / LT / Leadtools.ImageProcessing.Main.js”> < /脚本>< script src =“. . / . . / LT / Leadtools.ImageProcessing.Color.js”> < /脚本>< script src =“. . / . . / LT / Leadtools.ImageProcessing.Core.js”> < /脚本>< script src =“. . / . . / LT / Leadtools.ImageProcessing.Effects.js”> < /脚本>< script src =“. . / . . / LT / Leadtools.Document.js”> < /脚本>< script src =“. . / . . / LT / Leadtools.Document.Viewer.js”> < /脚本><时尚>身体{字体类型:“Segoe UI”无衬线;}# imageViewerDiv {边界:1 px固体# 888;宽度:500 px;身高:500 px;background - color: # eee;}> < /风格< !——所有演示文件捆绑和附加到窗口- - >< script src =“. . / . . / bundle.js”类型=“text / javascript”> < /脚本>< / >头<身体>< p >新闻并拖动图像锅。< / p >< p >按住控制键和按下并拖动图像或捏与两个手指来放大在< / p >。< div ><按钮类型=“按钮”id =“exampleButton”> > < /按钮运行例子< / div >< div id =“imageViewerDiv”> < / div >< div id =“输出”> < / div >< /身体><脚本>窗口。onload = () = > {常量示例=新window.examples.InteractiveMode.RubberBandInteractiveMode ();};> < /脚本< / html >

ImageViewerRubberBandInteractiveMode对象

参考