重定向画布属性(ImageViewerSpyGlassInteractiveMode) | Leadtools。控制| HTML5 JavaScript帮助

redirectCanvas财产

ImageViewer.js< / div >

RedirectCanvas.html< / div >< / div >< div id ="GenericContainerEntry2370" class="GenericContainerEntry">

进口{ImageViewer_Example}从“. . / imageview”；出口类SpyGlassInteractiveMode_RedirectCanvasExample {私人viewerExample;构造函数() {这.viewerExample =新ImageViewer_Example (这.run);｝私人run =(查看器:lt.Controls.ImageViewer) => {常量output = document.getElementById(“输出”）;//重定向画布的宽度和高度常量canvasWidth:数量= 250;常量canvasHeight:数量= 250;//创建重定向画布常量redirectCanvas = document.createElement(“画布”) HTMLCanvasElement;redirectCanvas.style.border =1px纯黑；redirectCanvas。宽度= canvasWidth;redirectCanvas。height = canvasHeight;//创建SpyGlass模式常量模式:lt.Controls.ImageViewerSpyGlassInteractiveMode =新lt.Controls.ImageViewerSpyGlassInteractiveMode ();mode.workCompleted。Add ((sender, e) => {如果(mode.redirectCanvas) {//在重定向的画布上绘制后清除常量ctx: CanvasRenderingContext2D = mode.redirectCanvas.getContext(“二维”）;ctx。clearRect(0,0, mode.redirectCanvas。宽度,mode.redirectCanvas.height)｝})；模式。铅大小。创建(canvasWidth canvasHeight);模式。redirectCanvas = redirectCanvas;模式。写成backgroundColor =“黄色”；模式。crosshairColor =“红色”；mode.drawImage。Add ((sender, e) => {常量rect: lt.LeadRectD = e.destinationRectangle;常量ctx: CanvasRenderingContext2D = e.context;ctx.save ();//取消望远镜的偏移量ctx.translate(矩形。x, -rect.y);//我们可以在这里做任何事情。例如，ImageViewerMagnifyGlassInteractiveMode会放大。//我们将在图像上绘制额外的文本。//剪辑到ImageViewer(可选)常量bounds: lt.LeadRectD = viewer.getViewBounds(假，真正的）;ctx.beginPath ();ctx.rect(界限。x,界限。y,界限。宽度,bounds.height);ctx.closePath ();ctx.clip ();//绘制视图viewer.renderRedirect (ctx,新lt.Controls.ImageViewerRenderRedirectOptions (), lt.LeadRectD.empty);//在顶部绘制一些文本ctx。fillStyle =“白色”；ctx。strokeStyle =“白色”；ctx。字体="75px Times New Roman"；ctx.fillText (“望远镜”,范围。X +(边界。宽度/ 2)- 100，边界。Y +(边界。身高/ 2));ctx.restore ();})；//添加一个切换按钮常量button = document.createElement(“按钮”）;按钮。Onclick = () => {如果(mode.redirectCanvas)模式。redirectCanvas =零；其他的模式。redirectCanvas = redirectCanvas;updateButtonText ();｝output.appendChild(按钮);常量updateButtonText = () => {按钮。在nerHTML = !mode.redirectCanvas ?“重定向渲染”：“在查看器上渲染”；｝updateButtonText ();//添加模式到查看器viewer.interactiveModes.clear ();viewer.interactiveModes.add(模式);//为形状添加一个选择元素常量shapeSelect = document.createElement(“选择”）;output.appendChild (shapeSelect);让钥匙:字符串[] = Object.keys(lt.Controls.ImageViewerSpyGlassShape);keys.forEach((key) => {如果(!isNaN(Number(lt.Controls.ImageViewerSpyGlassShape[key])) && key !==“__enum”) {常量option = document.createElement(“选项”）;选择。在nerHTML = key;shapeSelect.appendChild(选项);｝})；shapeSelect。selectedIndex = lt.Controls.ImageViewerSpyGlassShape.ellipse;模式。shape = lt.Controls.ImageViewerSpyGlassShape.ellipse;shapeSelect.addEventListener (“改变”， () => {模式。shape = shapeSelect.selectedIndex;})；//添加画布常量container = document.createElement(" div "）;container.appendChild (redirectCanvas);output.appendChild(容器);｝｝

出口类ImageViewer_Example {//在这个例子中使用的LEADTOOLS ImageViewer受保护的imageViewer: lt.Controls.ImageViewer =零；//示例使用的一般状态值公共timesClicked:数量= 0;构造函数(回调?：(viewer: lt.Controls.ImageViewer) =>无效) {//设置LEADTOOLS license。用实际的许可证文件替换此文件lt.RasterSupport.setLicenseUri (“https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt”，“EVAL”，零）;//在imageViewerDiv元素中创建一个图像查看器常量imageViewerDiv = document.getElementById(“imageViewerDiv”）;常量createOptions: lt.Controls.ImageViewerCreateOptions =新lt.Controls.ImageViewerCreateOptions (imageViewerDiv);这.imageViewer =新lt.Controls.ImageViewer (createOptions);这.imageViewer。viewverticalalign = lt. controls . controlalign .center;这.imageViewer。viewhizontalalignment = lt.Controls.ControlAlignment.center;这.imageViewer。autoCreateCanvas =真正的；//增加Pan/Zoom交互模式//点击拖动可平移，CTRL-Click拖动可放大缩小这.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 = document.getElementById(“exampleButton”）;exampleButton.addEventListener (“点击”， () => {这.timesClicked + +;//运行示例如果(回调)回调(这.imageViewer);})；｝｝

进口{ImageViewer_Example}从“. . / imageview”；出口类SpyGlassInteractiveMode_RedirectCanvasExample {viewerExample;构造函数(){这.viewerExample =新ImageViewer_Example (这.run);｝Run = (viewer) => {常量output = document.getElementById(“输出”）;//重定向画布的宽度和高度常量canvasWidth = 250;常量canvasHeight = 250;//创建重定向画布常量redirectCanvas = document.createElement(“画布”）;redirectCanvas.style.border =1px纯黑；redirectCanvas。宽度= canvasWidth;redirectCanvas。height = canvasHeight;//创建SpyGlass模式常量模式=新lt.Controls.ImageViewerSpyGlassInteractiveMode ();mode.workCompleted。Add ((sender, e) => {如果(mode.redirectCanvas) {//在重定向的画布上绘制后清除常量ctx = mode.redirectCanvas.getContext(“二维”）;ctx。clearRect(0,0, mode.redirectCanvas。宽度,mode.redirectCanvas.height)｝})；模式。铅大小。创建(canvasWidth canvasHeight);模式。redirectCanvas = redirectCanvas;模式。写成backgroundColor =“黄色”；模式。crosshairColor =“红色”；mode.drawImage。Add ((sender, e) => {常量rect = e.destinationRectangle;常量CTX = e.context;ctx.save ();//取消望远镜的偏移量ctx.translate(矩形。x, -rect.y);//我们可以在这里做任何事情。例如，ImageViewerMagnifyGlassInteractiveMode会放大。//我们将在图像上绘制额外的文本。//剪辑到ImageViewer(可选)常量bounds = viewer.getViewBounds(假，真正的）;ctx.beginPath ();ctx.rect(界限。x,界限。y,界限。宽度,bounds.height);ctx.closePath ();ctx.clip ();//绘制视图viewer.renderRedirect (ctx,新lt.Controls.ImageViewerRenderRedirectOptions (), lt.LeadRectD.empty);//在顶部绘制一些文本ctx。fillStyle =“白色”；ctx。strokeStyle =“白色”；ctx。字体="75px Times New Roman"；ctx.fillText (“望远镜”,范围。X +(边界。宽度/ 2)- 100，边界。Y +(边界。身高/ 2));ctx.restore ();})；//添加一个切换按钮常量button = document.createElement(“按钮”）;按钮。Onclick = () => {如果(mode.redirectCanvas)模式。redirectCanvas =零；其他的模式。redirectCanvas = redirectCanvas;updateButtonText ();｝output.appendChild(按钮);常量updateButtonText = () => {按钮。在nerHTML = !mode.redirectCanvas ?“重定向渲染”：“在查看器上渲染”；｝updateButtonText ();//添加模式到查看器viewer.interactiveModes.clear ();viewer.interactiveModes.add(模式);//为形状添加一个选择元素常量shapeSelect = document.createElement(“选择”）;output.appendChild (shapeSelect);let keys = Object.keys(lt.Controls.ImageViewerSpyGlassShape);keys.forEach((key) => {如果(!isNaN(Number(lt.Controls.ImageViewerSpyGlassShape[key])) && key !==“__enum”) {常量option = document.createElement(“选项”）;选择。在nerHTML = key;shapeSelect.appendChild(选项);｝})；shapeSelect。selectedIndex = lt.Controls.ImageViewerSpyGlassShape.ellipse;模式。shape = lt.Controls.ImageViewerSpyGlassShape.ellipse;shapeSelect.addEventListener (“改变”， () => {模式。shape = shapeSelect.selectedIndex;})；//添加画布常量container = document.createElement(" div "）;container.appendChild (redirectCanvas);output.appendChild(容器);｝｝

出口类ImageViewer_Example {//在这个例子中使用的LEADTOOLS ImageViewerimageview =零；//示例使用的一般状态值timesClicked = 0;构造函数(回调){//设置LEADTOOLS license。用实际的许可证文件替换此文件lt.RasterSupport.setLicenseUri (“https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt”，“EVAL”，零）;//在imageViewerDiv元素中创建一个图像查看器常量imageViewerDiv = document.getElementById(“imageViewerDiv”）;常量createOptions =新lt.Controls.ImageViewerCreateOptions (imageViewerDiv);这.imageViewer =新lt.Controls.ImageViewer (createOptions);这.imageViewer。viewverticalalign = lt. controls . controlalign .center;这.imageViewer。viewhizontalalignment = lt.Controls.ControlAlignment.center;这.imageViewer。autoCreateCanvas =真正的；//增加Pan/Zoom交互模式//点击拖动可平移，CTRL-Click拖动可放大缩小这.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 = document.getElementById(“exampleButton”）;exampleButton.addEventListener (“点击”， () => {这.timesClicked + +;//运行示例如果(回调)回调(这.imageViewer);})；｝｝

<！doctype html >< html lang =“en”>控件示例| RedirectCanvas




 . RedirectCanvas< >头< 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 {边框:1px实体#888;宽度:500 px;身高:500 px;background - color: # eee;｝> < /风格<！——所有的演示文件都被捆绑并附加到窗口——>< script src =“. . / . . / bundle.js”类型=“text / javascript”> < /脚本>> < /头<身体>按下并拖动图像平移
按住控制键并在图像上拖动或捏与用两个手指缩放在。< / p >< div ><按钮类型=“按钮”id =“exampleButton”> > < /按钮运行示例< / div >< div id =“imageViewerDiv”> < / div >< div id =“输出”> < / div >身体< / >< >脚本窗口。Onload = () => {常量示例=新window.examples.ImageViewer.RedirectCanvas ();}；> < /脚本< / html >

redirectCanvas财产

属性值

参考