RenderRedirect方法(imageview) | Leadtools。控制| HTML5 JavaScript的帮助

renderRedirect方法

ImageViewer.js< / div >

RenderRedirect.html< / div >< / div >< div id ="GenericContainerEntry3632" class="GenericContainerEntry">

进口{ImageViewer_Example}从“. . / imageview”;出口类ImageViewer_RenderRedirectExample {私人viewerExample;构造函数(){这.viewerExample =新ImageViewer_Example (这.run);}私人运行=(观众:lt.Controls.ImageViewer) = > {查看器。itemBorderThickness = 5;/ /创建画布我们将呈现常量redirectCanvas = document.createElement (“画布”);redirectCanvas.style。边境=“2 px固体黑色”;常量redirectWidth:数量= 300;常量redirectHeight:数量= 300;redirectCanvas。宽度= redirectWidth;redirectCanvas。身高= redirectHeight;/ /将其添加到页面常量输出= . getelementbyid (“输出”);output.appendChild (redirectCanvas);/ /添加一个20 px利润在重定向呈现区域常量三角洲:数量= 20;常量destRect: lt.LeadRectD = lt.LeadRectD。创建(0,0,redirectWidth redirectHeight);destRect。在flate(-delta, -delta);常量选项:lt.Controls。ImageViewerRenderRedirectOptions =新lt.Controls.ImageViewerRenderRedirectOptions ();查看器。rotateAngle = 35;/ /使用“零”整个imageview画/ /让项=零;常量项目:lt.Controls。ImageViewerItem = viewer.activeItem;如果(项目){/ /不要担心呈现以下选项。renderBackgrounds =假;选项。renderBorders =假;选项。renderItemStates =假;选项。renderShadows =假;选项。renderText =假;}/ / imageview渲染…viewer.redirectRender.add (() = > {让sourceRect: lt.LeadRectD;让sourceRectClipped: lt.LeadRectD;如果(项目){/ /画出整个imageviewsourceRect = viewer.getViewBounds (真正的,假);sourceRectClipped = viewer.getViewBounds (真正的,真正的);}其他的{/ /只画的矩形活动项目sourceRect =观众。lt.Controls.ImageViewerItemPart.image getItemViewBounds(项目,假);sourceRectClipped =观众。lt.Controls.ImageViewerItemPart.image getItemViewBounds(项目,真正的);}常量ctx: CanvasRenderingContext2D = redirectCanvas.getContext (“二维”);ctx。clearRect (0, 0, redirectWidth redirectHeight);/ /画一个矩形最大渲染面积ctx。strokeStyle =“绿色”;ctx.strokeRect (destRect。x, destRect。y, destRect。宽度,destRect.height);/ /创建这个矩形的转换选项。createTransform(观众、destRect sourceRect lt.Controls.ControlSizeMode。健康,lt.Controls.ControlAlignment。中心,lt.Controls.ControlAlignment.center);/ /画一个矩形周围实际呈现区域常量clipRect: lt.LeadRectD = options.transform.transformRect (sourceRect);ctx。strokeStyle =“橙色”;ctx.strokeRect (clipRect。x, clipRect。y, clipRect。宽度,clipRect.height);/ /重定向呈现查看器。renderRedirect (ctx、期权、lt.LeadRectD.empty);/ /显示如何绘制项目的边界常量manuallyComputeRedirectedBorder = () = > {常量点:lt.LeadPointD [] = [lt.LeadPointD.create (sourceRectClipped。离开,sourceRectClipped.top), lt.LeadPointD.create (sourceRectClipped。右,sourceRectClipped.bottom)];options.transform.transformPoints(点);让xmin = [0]。x点;让ymin[0] =点.y;让xmax = xmin;让ymax = ymin;为(让我= 1;我< points.length;我+ +){如果(点[我]。x < xmin) xmin =[我]。x点;如果(点[我]。x > xmax) xmax =点[我]方式;如果(点[我]。y < ymin) ymin =[我].y点;如果(点[我]。y > ymax) ymax =点[我].y;}常量范围:lt.LeadRectD = lt.LeadRectD.fromLTRB (xmin、ymin xmax, ymax);ctx。strokeStyle =“蓝色”;ctx.strokeRect(界限。x,界限。y,界限。宽度,bounds.height);};manuallyComputeRedirectedBorder ();});viewer.invalidate (lt.LeadRectD.empty);}}

出口类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_RenderRedirectExample {viewerExample;构造函数(){这.viewerExample =新ImageViewer_Example (这.run);}运行=(观众)= > {查看器。itemBorderThickness = 5;/ /创建画布我们将呈现常量redirectCanvas = document.createElement (“画布”);redirectCanvas.style。边境=“2 px固体黑色”;常量redirectWidth = 300;常量redirectHeight = 300;redirectCanvas。宽度= redirectWidth;redirectCanvas。身高= redirectHeight;/ /将其添加到页面常量输出= . getelementbyid (“输出”);output.appendChild (redirectCanvas);/ /添加一个20 px利润在重定向呈现区域常量δ= 20;常量destRect = lt.LeadRectD。创建(0,0,redirectWidth redirectHeight);destRect。在flate(-delta, -delta);常量选择=新lt.Controls.ImageViewerRenderRedirectOptions ();查看器。rotateAngle = 35;/ /使用“零”整个imageview画/ /让项=零;常量项= viewer.activeItem;如果(项目){/ /不要担心呈现以下选项。renderBackgrounds =假;选项。renderBorders =假;选项。renderItemStates =假;选项。renderShadows =假;选项。renderText =假;}/ / imageview渲染…viewer.redirectRender.add (() = > {让sourceRect;让sourceRectClipped;如果(项目){/ /画出整个imageviewsourceRect = viewer.getViewBounds (真正的,假);sourceRectClipped = viewer.getViewBounds (真正的,真正的);}其他的{/ /只画的矩形活动项目sourceRect =观众。lt.Controls.ImageViewerItemPart.image getItemViewBounds(项目,假);sourceRectClipped =观众。lt.Controls.ImageViewerItemPart.image getItemViewBounds(项目,真正的);}常量ctx = redirectCanvas.getContext (“二维”);ctx。clearRect (0, 0, redirectWidth redirectHeight);/ /画一个矩形最大渲染面积ctx。strokeStyle =“绿色”;ctx.strokeRect (destRect。x, destRect。y, destRect。宽度,destRect.height);/ /创建这个矩形的转换选项。createTransform(观众、destRect sourceRect lt.Controls.ControlSizeMode。健康,lt.Controls.ControlAlignment。中心,lt.Controls.ControlAlignment.center);/ /画一个矩形周围实际呈现区域常量clipRect = options.transform.transformRect (sourceRect);ctx。strokeStyle =“橙色”;ctx.strokeRect (clipRect。x, clipRect。y, clipRect。宽度,clipRect.height);/ /重定向呈现查看器。renderRedirect (ctx、期权、lt.LeadRectD.empty);/ /显示如何绘制项目的边界常量manuallyComputeRedirectedBorder = () = > {常量点= [lt.LeadPointD.create (sourceRectClipped。离开,sourceRectClipped.top), lt.LeadPointD.create (sourceRectClipped。右,sourceRectClipped.bottom)];options.transform.transformPoints(点);让xmin = [0]。x点;让ymin[0] =点.y;让xmax = xmin;让ymax = ymin;为(让我= 1;我< points.length;我+ +){如果(点[我]。x < xmin) xmin =[我]。x点;如果(点[我]。x > xmax) xmax =点[我]方式;如果(点[我]。y < ymin) ymin =[我].y点;如果(点[我]。y > ymax) ymax =点[我].y;}常量边界= lt.LeadRectD.fromLTRB (xmin ymin、xmax ymax);ctx。strokeStyle =“蓝色”;ctx.strokeRect(界限。x,界限。y,界限。宽度,bounds.height);};manuallyComputeRedirectedBorder ();});viewer.invalidate (lt.LeadRectD.empty);}}

出口类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”><标题>控件例子| RenderRedirect < /名称><头>< 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.ImageViewer.RenderRedirect ();};> < /脚本< / html >

renderRedirect方法

参数

参考