AnnContainer Object (original) (raw)
This example creates a new container, adds a line object and a rectangle object to it, saves it, and then loads it back.
import { EngineHelper } from "../../utilities/EngineHelper";
export class AnnEngine_AnnContainerExample {
constructor() {
const helper = new EngineHelper();
helper.run(this.run);
}
run = () => {
const inch = 720.0;
// Create a new annotation container, 8.5 by 11 inches
let container: lt.Annotations.Engine.AnnContainer = new lt.Annotations.Engine.AnnContainer();
// Size must be in annotation units (1/720 of an inch)
container.size = lt.LeadSizeD.create(8.5 * inch, 11 * inch);
const showContainer = (message, container) => {
let str = message + "\nContainer size: ";
// Add the size
const inch = 720;
const width: number = container.size.width / inch;
const height: number = container.size.height / inch;
str += width + " by " + height + " inches" + "\n";
// Add the objects
str += "Contains " + container.children.count + " objects(s)\n";
for (let i = 0; i < container.children.count; i++) {
const annObj = container.children.item(i);
str += "Object: " + annObj.get_friendlyName() + " at ";
for (let j = 0; j < annObj.get_points().get_count(); j++) {
const pt: lt.LeadPointD = annObj.points.item(j);
const x: number = pt.x / inch;
const y: number = pt.y / inch;
str += "(" + x + ", " + y + ") ";
}
str += "\n";
}
alert(str);
}
// Add a red line object, from 1in 1in to 2in 2in
const lineObj: lt.Annotations.Engine.AnnPolylineObject = new lt.Annotations.Engine.AnnPolylineObject();
lineObj.points.add(lt.LeadPointD.create(1 * inch, 1 * inch));
lineObj.points.add(lt.LeadPointD.create(2 * inch, 2 * inch));
lineObj.stroke = lt.Annotations.Engine.AnnStroke.create(lt.Annotations.Engine.AnnSolidColorBrush.create("red"), lt.LeadLengthD.create(1));
container.children.add(lineObj);
// Add a blue on yellow rectangle from 3in 3in to 4in 4in
const rectObj: lt.Annotations.Engine.AnnRectangleObject = new lt.Annotations.Engine.AnnRectangleObject();
rectObj.rect = lt.LeadRectD.create(3 * inch, 3 * inch, 1 * inch, 1 * inch);
rectObj.stroke = lt.Annotations.Engine.AnnStroke.create(lt.Annotations.Engine.AnnSolidColorBrush.create("blue"), lt.LeadLengthD.create(1));
rectObj.fill = lt.Annotations.Engine.AnnSolidColorBrush.create("yellow");
container.children.add(rectObj);
// Show the container
showContainer("Before save", container);
// Create the codecs object to save and load annotations
const codecs: lt.Annotations.Engine.AnnCodecs = new lt.Annotations.Engine.AnnCodecs();
// Save the container
const xmlData: string = codecs.save(container, lt.Annotations.Engine.AnnFormat.annotations, null, 1);
// delete the container
container = null;
// Show information about the data we just saved
const info: lt.Annotations.Engine.AnnCodecsInfo = codecs.getInfo(xmlData);
let message: string;
if (info.format == lt.Annotations.Engine.AnnFormat.annotations) {
message = "Version: ";
message += info.version;
message += " No. of pages: ";
message += info.pages.length;
message += " page nos: ";
for (let i = 0; i < info.pages.length; i++) {
message += info.pages[i] + " ";
}
}
else {
message = "Invalid annotations data";
}
alert(message);
// Load the container we just saved
container = codecs.load(xmlData, 1);
// Show it
showContainer("After load", container);
}
}
import { EngineHelper } from "../../utilities/EngineHelper";
export class AnnEngine_AnnContainerExample {
constructor() {
const helper = new EngineHelper();
helper.run(this.run);
}
run = () => {
const inch = 720.0;
// Create a new annotation container, 8.5 by 11 inches
let container = new lt.Annotations.Engine.AnnContainer();
// Size must be in annotation units (1/720 of an inch)
container.size = lt.LeadSizeD.create(8.5 * inch, 11 * inch);
const showContainer = (message, container) => {
let str = message + "\nContainer size: ";
// Add the size
const inch = 720;
const width = container.size.width / inch;
const height = container.size.height / inch;
str += width + " by " + height + " inches" + "\n";
// Add the objects
str += "Contains " + container.children.count + " objects(s)\n";
for (let i = 0; i < container.children.count; i++) {
const annObj = container.children.item(i);
str += "Object: " + annObj.get_friendlyName() + " at ";
for (let j = 0; j < annObj.get_points().get_count(); j++) {
const pt = annObj.points.item(j);
const x = pt.x / inch;
const y = pt.y / inch;
str += "(" + x + ", " + y + ") ";
}
str += "\n";
}
alert(str);
}
// Add a red line object, from 1in 1in to 2in 2in
const lineObj = new lt.Annotations.Engine.AnnPolylineObject();
lineObj.points.add(lt.LeadPointD.create(1 * inch, 1 * inch));
lineObj.points.add(lt.LeadPointD.create(2 * inch, 2 * inch));
lineObj.stroke = lt.Annotations.Engine.AnnStroke.create(lt.Annotations.Engine.AnnSolidColorBrush.create("red"), lt.LeadLengthD.create(1));
container.children.add(lineObj);
// Add a blue on yellow rectangle from 3in 3in to 4in 4in
const rectObj = new lt.Annotations.Engine.AnnRectangleObject();
rectObj.rect = lt.LeadRectD.create(3 * inch, 3 * inch, 1 * inch, 1 * inch);
rectObj.stroke = lt.Annotations.Engine.AnnStroke.create(lt.Annotations.Engine.AnnSolidColorBrush.create("blue"), lt.LeadLengthD.create(1));
rectObj.fill = lt.Annotations.Engine.AnnSolidColorBrush.create("yellow");
container.children.add(rectObj);
// Show the container
showContainer("Before save", container);
// Create the codecs object to save and load annotations
const codecs = new lt.Annotations.Engine.AnnCodecs();
// Save the container
const xmlData = codecs.save(container, lt.Annotations.Engine.AnnFormat.annotations, null, 1);
// delete the container
container = null;
// Show information about the data we just saved
const info = codecs.getInfo(xmlData);
let message;
if (info.format == lt.Annotations.Engine.AnnFormat.annotations) {
message = "Version: ";
message += info.version;
message += " No. of pages: ";
message += info.pages.length;
message += " page nos: ";
for (let i = 0; i < info.pages.length; i++) {
message += info.pages[i] + " ";
}
}
else {
message = "Invalid annotations data";
}
alert(message);
// Load the container we just saved
container = codecs.load(xmlData, 1);
// Show it
showContainer("After load", container);
}
}
<!doctype html>
<html lang="en">
<title>AnnContainer Example | AnnContainer</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.Annotations.BatesStamp.js"></script>
<script src="../../LT/Leadtools.Demos.js"></script>
<script src="../../LT/Leadtools.Demos.Annotations.js"></script>
<style>
#imageViewerDiv {
border: 1px solid #000000;
width: 800px;
height: 800px;
background-color: #7F7F7F;
}
</style>
<!-- All demo files are bundled and appended to the window -->
<script src="../../bundle.js" type="text/javascript"></script>
</head>
<body>
<p>Either Pan/Zoom or Annotations mode. In annotations mode, draw new objects or edit them.</p>
<div>
<select id="currentObjectIdSelect"></select>
</div>
<div>
<input type="button" id="exampleButton" value="Example" />
<label id="exampleLabel" />
</div>
<div id="imageViewerDiv" />
</body>
<script>
window.onload = () => new window.examples.AnnContainer.AnnContainerExample();
</script>
</html>