LEADTOOLS JavaScript（Leadtools.Annotations.Core）
フレームを表示
LEADTOOLSアノテーションフレームワークで独自のアノテーションオブジェクトを簡単に作成できます。このチュートリアルは、2つの新しいアノテーションオブジェクトを作成する方法とこれらのオブジェクトをLEADTOOLSアノテーションオートメーションフレームワークに接続するために必須のデザイナーを書き込む方法を示します。
以下のマークアップで新しいHTMLファイルを作成することによって、開始します：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
<style> #imageViewerDiv { border: 1px solid #000000; width: 400px; height: 400px; background-color: #7F7F7F; } </style>
</head>
<body onload="pageLoad()">
<div id="imageViewerDiv"></div>
</body>
</html>
LEADTOOLS JavaScriptライブラリのために、ページの頭部タグの中に、addはタグのスクリプトを書きます。注意：この例では、LEADTOOLS .jsファイルは、サブフォルダにScriptsあります：
<script type="text/javascript" src="Scripts/Leadtools.js"></script>
<script type="text/javascript" src="Scripts/Leadtools.Controls.js"></script>
<script type="text/javascript" src="Scripts/Leadtools.Annotations.Core.js"></script>
<script type="text/javascript" src="Scripts/Leadtools.Annotations.Automation.js"></script>
<script type="text/javascript" src="Scripts/Leadtools.Annotations.Designers.js"></script>
<script type="text/javascript" src="Scripts/Leadtools.Annotations.Rendering.JavaScript.js"></script>
<script type="text/javascript" src="Scripts/Leadtools.Annotations.JavaScript.js"></script>
作成されているオブジェクトは、単純なオブジェクト（三角形）です。このオブジェクトは三角形の終点のために3ポイントを持っています、そして、それは内部のために三角形エッジと塗りつぶしのためにストロークを使います。
カスタムアノテーションオブジェクトタイプを作成する必要があります。三角形は3つの頂点を持つ多角形なので、AnnPolylineObjectクラスから派生できます。スクリプトタグに以下を追加します：
////////////////////////////////////////////////////////////////////////////////
// AnnTriangleObject
AnnTriangleObject = function AnnTriangleObject() {
AnnTriangleObject.initializeBase(this);
this.set_isClosed(true); // triangle is a closed figure
this.setId(-99); // set the object id
this.set_tag(null);
}
AnnTriangleObject.prototype = {
create: function AnnTriangleObject$create() {
// define the custom annotation object (the triangle is a polyline with only 3 points)
return new AnnTriangleObject();
}
}
AnnTriangleObject.registerClass('AnnTriangleObject', lt.Annotations.Core.AnnPolylineObject);
AnnTriangleObjectで使用できる既存の描画や編集のデザイナがないため、独自に作成する必要があります。1番目に、描画デザイナクラス（AnnDrawDesignerに由来する）を作成します。AnnTriangleObjectが:をコード化したあと、スクリプトタグに以下を追加します
////////////////////////////////////////////////////////////////////////////////
// AnnTriangleDrawDesigner
AnnTriangleDrawDesigner = function AnnTriangleDrawDesigner(automationControl, container, annPolyineObject) {
AnnTriangleDrawDesigner.initializeBase(this, [automationControl, container, annPolyineObject]);
}
AnnTriangleDrawDesigner.prototype = {
// override the onPointerDown method and add 3 points for our triangle
onPointerDown: function AnnTriangleDrawDesigner$onPointerDown(sender, e) {
var handled = AnnTriangleDrawDesigner.callBaseMethod(this, 'onPointerDown', [sender, e]);
if (this.get_targetObject().get_points().get_count() < 3) {
this.get_targetObject().set_tag('drawing');
if (e.get_button() === lt.Annotations.Core.AnnMouseButton.left) {
if (this.startWorking()) {
this.get_targetObject().get_points().add(e.get_location());
}
handled = true;
}
}
return handled;
},
// override the onPointerUp method and end the drawing when we have our 3 points
onPointerUp: function AnnTriangleDrawDesigner$onPointerUp(sender, e) {
var handled = AnnTriangleDrawDesigner.callBaseMethod(this, 'onPointerUp', [sender, e]);
handled = true;
if (this.get_targetObject().get_points().get_count() >= 3) {
this.get_targetObject().set_tag(null);
this.endWorking();
}
this.invalidate(lt.LeadRectD.empty);
return handled;
}
}
AnnTriangleDrawDesigner.registerClass('AnnTriangleDrawDesigner', lt.Annotations.Designers.AnnDrawDesigner);
次に、AnnPolylineEditDesignerクラスから派生した編集デザイナクラスを作成します。AnnTriangleDrawDesignerが:をコード化したあと、スクリプトに以下のcodeを追加します
////////////////////////////////////////////////////////////////////////////////
// AnnTriangleEditDesigner
// We won't actually need to do any customization of this class.
AnnTriangleEditDesigner = function AnnTriangleEditDesigner(automationControl, container, annPolylineObject) {
AnnTriangleEditDesigner.initializeBase(this, [automationControl, container, annPolylineObject]);
}
AnnTriangleEditDesigner.registerClass('AnnTriangleEditDesigner', lt.Annotations.Designers.AnnPolylineEditDesigner);
ここで、AnnTriangleObjectのためにカスタムレンダラーを作成することができます。そして、AnnPolylineEditDesignerに由来します」クラス。AnnTriangleDrawDesignerが:をコード化したあと、スクリプトに以下のcodeを追加します
////////////////////////////////////////////////////////////////////////////////
// AnnTriangleRenderer
AnnTriangleRenderer = function AnnTriangleRenderer() {
AnnTriangleRenderer.initializeBase(this);
}
AnnTriangleRenderer.prototype = {
// Override the Render method in order to draw the 3 points as the user creates them.
render: function AnnTriangleRenderer$render(mapper, annObject) {
AnnTriangleRenderer.callBaseMethod(this, 'render', [mapper, annObject]);
// if we are finished 'drawing', allow the base class AnnPolylineObjectRenderer to handle the job
if (annObject.get_tag() !== 'drawing') {
return;
}
var engine = Type.safeCast(this.get_renderingEngine(), lt.Annotations.Rendering.AnnHtml5RenderingEngine);
if (engine != null) {
var context = engine.get_context();
if (context != null) {
context.save();
var points = mapper.pointsFromContainerCoordinates(annObject.get_points().toArray(), annObject.get_fixedStateOperations());
lt.Annotations.Rendering.AnnHtml5RenderingEngine.setStroke(context, lt.Annotations.Core.AnnStroke.create(lt.Annotations.Core.AnnSolidColorBrush.create('green'), lt.LeadLengthD.create(1)));
context.beginPath();
for (var x = 0; x < points.length; x++) {
var point = points[x];
if (!point.get_isEmpty()) {
var rect = lt.LeadRectD.create(point.get_x() - 10, point.get_y() - 10, 20, 20);
lt.Annotations.Rendering.AnnHtml5RenderingEngine.drawEllipse(context, rect);
}
}
context.closePath();
context.stroke();
context.restore();
}
}
}
}
AnnTriangleRenderer.registerClass('AnnTriangleRenderer', lt.Annotations.Rendering.AnnPolylineObjectRenderer);
最終的な手順は、LEADTOOLS ImageViewerとオートメーション化したアノテーションオブジェクトを接着するcodeを書き込むことです。
// Create the custom automation object and hook the designers
function createTriangleAutomationObject(annObject) {
var automationObj = new lt.Annotations.Automation.AnnAutomationObject();
automationObj.set_id(annObject.get_id());
automationObj.set_name("Triangle");
automationObj.set_drawDesignerType(AnnTriangleDrawDesigner); // hook the custom draw designer
automationObj.set_editDesignerType(AnnTriangleEditDesigner); // hook the custom edit designer
automationObj.set_runDesignerType(lt.Annotations.Designers.AnnRunDesigner);
// set up the thumbs
var annTriangleRenderer = new AnnTriangleRenderer();
var annPolylineRenderer = this._renderingEngine.get_renderers()[lt.Annotations.Core.AnnObject.polylineObjectId];
annTriangleRenderer.set_locationsThumbStyle(annPolylineRenderer.get_locationsThumbStyle());
annTriangleRenderer.set_rotateCenterThumbStyle(annPolylineRenderer.get_rotateCenterThumbStyle());
annTriangleRenderer.set_rotateGripperThumbStyle(annPolylineRenderer.get_rotateGripperThumbStyle());
this._renderingEngine.get_renderers()[annObject.get_id()] = annTriangleRenderer; // hook the custom renderer
automationObj.set_objectTemplate(annObject);
return automationObj;
}
function newTriangle() {
// Create the triangle object
var triangle = new AnnTriangleObject();
var brush = new lt.Annotations.Core.AnnSolidColorBrush();
brush.set_color("blue");
triangle.set_fill(brush);
// Create a user defined automation object
var automation = createTriangleAutomationObject(triangle);
this._manager.get_objects().add(automation);
}
function pageLoad() {
// Create the viewer
var createOptions = new lt.Controls.ImageViewerCreateOptions(document.getElementById('imageViewerDiv'));
this._viewer = new lt.Controls.ImageViewer(createOptions);
// Watch item changed event to set container size and the current object id when the image get loaded
_viewer.add_itemChanged(automationControl_ItemChanged);
// Set the image URL - load using browser support
this._viewer.set_imageUrl("http://demo.leadtools.com/images/jpeg/cactus.jpg");
// Set viewer image resolution
var resolution = lt.LeadSizeD.create(72, 72);
_viewer.set_imageResolution(resolution);
// Create the annotation automation control and attach image viewer to it
this._imageViewerAutomationControl = new lt.Annotations.JavaScript.ImageViewerAutomationControl();
this._imageViewerAutomationControl.imageViewer = _viewer;
// Create the automation manager, and default objects
this._manager = new lt.Annotations.Automation.AnnAutomationManager();
this._manager.createDefaultObjects();
// Create Html5 rendering engine and bind it to the automation manager
this._renderingEngine = new lt.Annotations.Rendering.AnnHtml5RenderingEngine();
this._manager.set_renderingEngine(this._renderingEngine);
// Create Automation interactive mode instance and bind automation control to it
this._automationInteractiveMode = new lt.Annotations.JavaScript.AutomationInteractiveMode();
this._automationInteractiveMode.automationControl = _imageViewerAutomationControl;
// Add automation interactive mode to the viewer interactive modes list and enable it
_viewer.get_interactiveModes().beginUpdate();
_viewer.get_interactiveModes().add(_automationInteractiveMode);
_automationInteractiveMode.set_isEnabled(true);
_viewer.get_interactiveModes().endUpdate();
// Create the annotation automation object and set it to active
this._automation = new lt.Annotations.Automation.AnnAutomation(this._manager, _imageViewerAutomationControl);
this._automation.set_active(true);
newTriangle();
}
function automationControl_ItemChanged(sender, e) {
if (e.reason == lt.Controls.ImageViewerItemChangedReason.url) {
// Get loaded image size
var imageSize = this._viewer.get_activeItem().get_imageSize();
// Set container size with loaded image size
var container = this._automation.get_container();
container.set_size(container.get_mapper().sizeToContainerCoordinates(lt.LeadSizeD.create(imageSize.get_width(), imageSize.get_height())));
// Set traingle object id to the current object id
this._manager.set_currentObjectId(-99);
}
}
HTMLファイルを保存して、お気に入りのブラウザでそれをロードします。その後、AnnTriangleObjectを描画するために、ビューワコントロールの中に3つの別々のポイントをクリックして/タップします。