Indicates this mode's hit-test state.
Object.defineProperty(ImageViewerInteractiveMode.prototype, 'hitTestState',
get: function(),
set: function(value)
)
hitTestState: boolean;
true if this mode hit-test state is on; otherwise, false.
HitTestState can be used to create an interactive mode that works over an area of interest in the viewer.
Run the example. The cursor changes to a crosshair when it is over the red rectangle (only while the rectangle is inside an item - zoom in/out to see the difference).
import { ImageViewer_Example } from "../ImageViewer";
import { HoverAreaInteractiveMode } from "./HoverInteractiveMode";
export class ImageViewerInteractiveMode_HitTestStateExample {
private viewerExample;
constructor() {
this.viewerExample = new ImageViewer_Example(this.run);
}
private run = (viewer: lt.Controls.ImageViewer) => {
// Create a new instance of our custom interactive mdoe.
const hoverMode: HoverAreaInteractiveMode = new HoverAreaInteractiveMode(viewer);
// Set the rectangle that will be drawn in the interactive mode
hoverMode.rect = lt.LeadRectD.create(200, 150, 50, 50);
// When hovering over the box while the box is inside an item, show the crosshairs
hoverMode.hitTestStateCursor = "crosshair";
// Insert
viewer.interactiveModes.insert(0, hoverMode);
}
}
export class HoverAreaInteractiveMode extends lt.Controls.ImageViewerInteractiveMode {
private _moveHandler: lt.Controls.InteractiveEventHandler;
private _renderHandler: lt.Controls.ImageViewerRenderEventHandler;
private _rect: lt.LeadRectD;
constructor(viewer: lt.Controls.ImageViewer) {
super();
}
get name(): string {
return "HoverArea";
};
get id(): number {
return lt.Controls.ImageViewerInteractiveMode.userModeId;
};
public start(viewer: lt.Controls.ImageViewer): void {
super.start(viewer);
const service: lt.Controls.InteractiveService = this.interactiveService;
this._moveHandler = service.move.add((sender, e) => {
this.moving(sender, e);
});
if (this.imageViewer) {
// Draw the red rectangle on top of the viewer at all times
this._renderHandler = this.imageViewer.postRender.add((sender, e) => {
const r: lt.LeadRectD = this._rect;
if (!r || r.isEmpty)
return;
const ctx: CanvasRenderingContext2D = e.context;
ctx.save();
ctx.fillStyle = "red";
ctx.globalAlpha = .5;
ctx.fillRect(r.x, r.y, r.width, r.height);
ctx.restore();
});
this.imageViewer.invalidate(lt.LeadRectD.empty);
}
};
public stop(viewer: lt.Controls.ImageViewer): void {
// Check if we have started
if (this.isStarted) {
// Unsubscribe from the events
const service: lt.Controls.InteractiveService = this.interactiveService;
service.move.remove(this.moving);
// Call the base class Stop method
super.stop(viewer);
}
};
set rect(rect: lt.LeadRectD) {
// Set a new rect, and invalidate to draw it
this._rect = rect.clone();
if (this.imageViewer)
this.imageViewer.invalidate(lt.LeadRectD.empty);
};
// Check if the position is inside the rect
private _hitTestRect(position): boolean {
if (this._rect && !this._rect.isEmpty) {
if (this._rect.containsPoint(position))
return true;
}
return false;
}
// Called when moving
private moving(sender, e): void {
if (!this.isEnabled) {
return;
}
// Check if our cursor is inside our rect
// *Only if we are also inside the item*
let hitTestState: boolean = false;
const imageViewer: lt.Controls.ImageViewer = this.imageViewer;
const item: lt.Controls.ImageViewerItem = imageViewer.hitTestItem(e.position);
if (item)
hitTestState = this._hitTestRect(e.position);
// Update our hitTestState, and output a message to the console
// The cursor should update to the hitTestStateCursor
if (this.hitTestState !== hitTestState) {
this.hitTestState = hitTestState;
const text: string = hitTestState ? "Hovering" : "Not Hovering";
// Note that hitTestStateInteractiveMode is automatically updated to "null" or "this"
console.log(text, this.imageViewer.hitTestStateInteractiveMode);
}
}
};
export class ImageViewer_Example {
// LEADTOOLS ImageViewer to be used with this example
protected imageViewer: lt.Controls.ImageViewer = null;
// Generic state value used by the examples
public timesClicked: number = 0;
constructor(callback?: (viewer: lt.Controls.ImageViewer) => void) {
// Set the LEADTOOLS license. Replace this with your actual license file
lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt", "EVAL", null);
// Create an image viewer inside the imageViewerDiv element
const imageViewerDiv = document.getElementById("imageViewerDiv");
const createOptions: lt.Controls.ImageViewerCreateOptions = new lt.Controls.ImageViewerCreateOptions(imageViewerDiv);
this.imageViewer = new lt.Controls.ImageViewer(createOptions);
this.imageViewer.viewVerticalAlignment = lt.Controls.ControlAlignment.center;
this.imageViewer.viewHorizontalAlignment = lt.Controls.ControlAlignment.center;
this.imageViewer.autoCreateCanvas = true;
// Add Pan/Zoom interactive mode
// Click and drag to pan, CTRL-Click and drag to zoom in and out
this.imageViewer.interactiveModes.add(new lt.Controls.ImageViewerPanZoomInteractiveMode());
// Load an image
this.imageViewer.imageUrl = "https://demo.leadtools.com/images/jpeg/cannon.jpg";
this.imageViewer.zoom(lt.Controls.ControlSizeMode.fit, .9, this.imageViewer.defaultZoomOrigin);
const exampleButton = document.getElementById("exampleButton");
exampleButton.addEventListener("click", () => {
this.timesClicked++;
// Run the example
if (callback)
callback(this.imageViewer);
});
}
}
import { ImageViewer_Example } from "../ImageViewer";
import { HoverAreaInteractiveMode } from "./HoverInteractiveMode";
export class ImageViewerInteractiveMode_HitTestStateExample {
viewerExample;
constructor() {
this.viewerExample = new ImageViewer_Example(this.run);
}
run = (viewer) => {
// Create a new instance of our custom interactive mode.
const hoverMode = new HoverAreaInteractiveMode(viewer);
// Set the rectangle that will be drawn in the interactive mode
hoverMode.rect = lt.LeadRectD.create(200, 150, 50, 50);
// When hovering over the box while the box is inside an item, show the crosshairs
hoverMode.hitTestStateCursor = "crosshair";
// Insert
viewer.interactiveModes.insert(0, hoverMode);
}
}
export class HoverAreaInteractiveMode extends lt.Controls.ImageViewerInteractiveMode {
_moveHandler;
_renderHandler;
_rect;
constructor(viewer) {
super();
}
get name() {
return "HoverArea";
};
get id() {
return lt.Controls.ImageViewerInteractiveMode.userModeId;
};
start(viewer) {
super.start(viewer);
const service = this.interactiveService;
this._moveHandler = service.move.add((sender, e) => {
this.moving(sender, e);
});
if (this.imageViewer) {
// Draw the red rectangle on top of the viewer at all times
this._renderHandler = this.imageViewer.postRender.add((sender, e) => {
const r = this._rect;
if (!r || r.isEmpty)
return;
const ctx = e.context;
ctx.save();
ctx.fillStyle = "red";
ctx.globalAlpha = .5;
ctx.fillRect(r.x, r.y, r.width, r.height);
ctx.restore();
});
this.imageViewer.invalidate(lt.LeadRectD.empty);
}
};
stop(viewer) {
// Check if we have started
if (this.isStarted) {
// Unsubscribe from the events
const service = this.interactiveService;
service.move.remove(this.moving);
// Call the base class Stop method
super.stop(viewer);
}
};
set rect(rect) {
// Set a new rect, and invalidate to draw it
this._rect = rect.clone();
if (this.imageViewer)
this.imageViewer.invalidate(lt.LeadRectD.empty);
};
// Check if the position is inside the rect
_hitTestRect(position) {
if (this._rect && !this._rect.isEmpty) {
if (this._rect.containsPoint(position))
return true;
}
return false;
}
// Called when moving
moving(sender, e) {
if (!this.isEnabled) {
return;
}
// Check if our cursor is inside our rect
// *Only if we are also inside the item*
let hitTestState = false;
const imageViewer = this.imageViewer;
const item = imageViewer.hitTestItem(e.position);
if (item)
hitTestState = this._hitTestRect(e.position);
// Update our hitTestState, and output a message to the console
// The cursor should update to the hitTestStateCursor
if (this.hitTestState !== hitTestState) {
this.hitTestState = hitTestState;
const text = hitTestState ? "Hovering" : "Not Hovering";
// Note that hitTestStateInteractiveMode is automatically updated to "null" or "this"
console.log(text, this.imageViewer.hitTestStateInteractiveMode);
}
}
};
export class ImageViewer_Example {
// LEADTOOLS ImageViewer to be used with this example
imageViewer = null;
// Generic state value used by the examples
timesClicked = 0;
constructor(callback) {
// Set the LEADTOOLS license. Replace this with your actual license file
lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt", "EVAL", null);
// Create an image viewer inside the imageViewerDiv element
const imageViewerDiv = document.getElementById("imageViewerDiv");
const createOptions = new lt.Controls.ImageViewerCreateOptions(imageViewerDiv);
this.imageViewer = new lt.Controls.ImageViewer(createOptions);
this.imageViewer.viewVerticalAlignment = lt.Controls.ControlAlignment.center;
this.imageViewer.viewHorizontalAlignment = lt.Controls.ControlAlignment.center;
this.imageViewer.autoCreateCanvas = true;
// Add Pan/Zoom interactive mode
// Click and drag to pan, CTRL-Click and drag to zoom in and out
this.imageViewer.interactiveModes.add(new lt.Controls.ImageViewerPanZoomInteractiveMode());
// Load an image
this.imageViewer.imageUrl = "https://demo.leadtools.com/images/jpeg/cannon.jpg";
this.imageViewer.zoom(lt.Controls.ControlSizeMode.fit, .9, this.imageViewer.defaultZoomOrigin);
const exampleButton = document.getElementById("exampleButton");
exampleButton.addEventListener("click", () => {
this.timesClicked++;
// Run the example
if (callback)
callback(this.imageViewer);
});
}
}
<!doctype html>
<html lang="en">
<title>Controls Example | HitTestState</title>
<head>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="../../LT/Leadtools.js"></script>
<script src="../../LT/Leadtools.Controls.js"></script>
<script src="../../LT/Leadtools.Annotations.Engine.js"></script>
<script src="../../LT/Leadtools.Annotations.Designers.js"></script>
<script src="../../LT/Leadtools.Annotations.Rendering.Javascript.js"></script>
<script src="../../LT/Leadtools.Annotations.Automation.js"></script>
<script src="../../LT/Leadtools.ImageProcessing.Main.js"></script>
<script src="../../LT/Leadtools.ImageProcessing.Color.js"></script>
<script src="../../LT/Leadtools.ImageProcessing.Core.js"></script>
<script src="../../LT/Leadtools.ImageProcessing.Effects.js"></script>
<script src="../../LT/Leadtools.Document.js"></script>
<script src="../../LT/Leadtools.Document.Viewer.js"></script>
<style>
body {
font-family: 'Segoe UI', sans-serif;
}
#imageViewerDiv {
border: 1px solid #888;
width: 500px;
height: 500px;
background-color: #eee;
}
</style>
<!-- All demo files are bundled and appended to the window -->
<script src="../../bundle.js" type="text/javascript"></script>
</head>
<body>
<p>Press and drag on the image to pan.</p>
<p>Hold down the control key and press and drag on the image or pinch with two fingers to zoom in and out.</p>
<div>
<button type="button" id="exampleButton">Run Example</button>
</div>
<div id="imageViewerDiv"></div>
<div id="output"></div>
</body>
<script>
window.onload = () => {
const example = new window.examples.InteractiveMode.HitTestState();
};
</script>
</html>
Help Collections
Raster .NET | C API | C++ Class Library | HTML5 JavaScript
Document .NET | C API | C++ Class Library | HTML5 JavaScript
Medical .NET | C API | C++ Class Library | HTML5 JavaScript
Medical Web Viewer .NET
Multimedia
Direct Show .NET | C API | Filters
Media Foundation .NET | C API | Transforms
Supported Platforms
.NET, Java, Android, and iOS/macOS Assemblies
Imaging, Medical, and Document
C API/C++ Class Libraries
Imaging, Medical, and Document
HTML5 JavaScript Libraries
Imaging, Medical, and Document