LEADTOOLS JavaScript(Leadtools.Controls)

フレームを表示

LEADTOOLS HTML5とJavaScript SDKは、JavaScriptの強力なコレクションとウェブ開発者はドキュメントとメディカルイメージング機能性でゼロフットプリント、クロスプラットフォームのアプリケーションを作成することができるウェブサービスです。開発者は強力なディスプレイと処理を特徴としている単一のアプリケーションで、iPad、iPhone、Androidとより多くなどの、デスクトップPCとモバイル機器を目標とすることができます、そして、マウスとマルチタッチのサポートは身振りをします。詳細については、「LEADTOOLS HTML5ブラウザサポート」を参照してください。

ウェブ開発者は、任意のブラウザでゼロフットプリント、クロスプラットフォームのimageアノテーションと使えるマークアップアプリケーションを提供するLEADTOOLS HTML5アノテーションまたはInternet Explorer、Firefox、Chrome、iOSとAndroidを含むHTML5をサポートするデバイスを使うことができます。

LEADTOOLS HTML5 DICOMビューワアプリケーションは、任意のPACSからDICOMイメージを示すためにゼロフットプリント、プラットフォームに依存しないウェブアプリケーションを作成するために、JavaScriptライブラリとウェブサービスを結合します。このOEM対応のフルカスタマイズ可能なWebサイトは、高速かつ軽量で、なおかつ医療専門家が必要とするすべての機能を備えたDICOM表示を求める開発者に最適です。

いくつかのLEADTOOLS SDKは、JSONとプラットフォームに依存しないソリューションのために任意のアプリケーションによって簡単にアクセスされるように設計されているSOAPウェブサービスの形でイメージングと認識機能性を提供します。

ウェブサービスは、単純なJSONインターフェースをHTML5/JavaScriptアプリケーションに提供します。.NETとJavaなどの高レベルな環境を使っている開発者は、LEADTOOLS SOAPウェブサービスを利用することができます。

すべてのLEADTOOLS JavaScriptライブラリは、Microsoft TypeScript技術を用いてHTML5/JavaScriptアプリケーションを開発するために必要なTypeScript定義ファイル(.d.ts)を含みます。

LEADTOOLS HTML5画像ビューワSDKの概要

LEADTOOLS HTML5ゼロフットプリントDICOMビューワSDKの概要

LEADTOOLS HTML5アノテーションSDKの概要

LEADTOOLS JavaScriptライブラリは、マイクロソフトドットネットまたはJavaオブジェクトクラスライブラリに類似したオブジェクトモジュールを使用します。

以下のメンバは他のプロパティに加えて各々のLEADTOOLS型で利用できます、そして、メソッドはメンバページで説明しました。

lt.Controls.ImageViewerなどの、はLEADTOOLS型に言及します。下記のすべての関数は、型自体と型のインスタンスの上ででない直接呼び出されなければならない「静的な」メソッドです。

Type.prototype

[Type].registerNamespace(名前)

 

新しいLEADTOOLS名前空間を登録します

パラメーター

名前:名前空間の完全修飾された名前を格納しているString。省略されてはならないか、無効でしてはいけません

戻り値

戻り値でない

サンプル

このドキュメントの終わりのサンプルソースコードを参照してください

[Type].registerClass(名前、ベースタイプ、インターフェースタイプ)

新しいLEADTOOLSクラスタイプを登録します。

パラメーター

名前:完全修飾タイプ名(namespace.name)を格納しているString。省略されてはならないか、無効でしてはいけません。

ベースタイプ:ベース型。省略されることがありえるか、クラスがLEADTOOLSベースクラスに由来しないならば無効でありえます。

インターフェースタイプ:インターフェース型は、クラスによって実装しました。省略されることがありえるか、クラスがLEADTOOLSインターフェースを実装しないならば無効でありえます

戻り値

戻り値でない

サンプル

このドキュメントの終わりのサンプルソースコードを参照してください

[Type].registerInterface(名前)

新しいLEADTOOLSクラスタイプを登録します。

パラメーター

名前:完全修飾名前空間名を格納しているString。省略されてはならないか、無効でしてはいけません

戻り値

戻り値でない

[Type].registerEnum(名前)

新しいLEADTOOLS列挙体を登録します。

パラメーター

名前:完全修飾列挙体名を格納しているString。省略されてはならないか、無効でしてはいけません

フラグ:この列挙体のメンバにOR演算子を指定できる場合はTrue。そうでない場合false。省略されるか無効であるならば、falseとみなされます

戻り値

戻り値でない

[Type].initializeBase(インスタンス、変数)

コンストラクタからLEADTOOLS派生クラスのベースクラスを初期化します。

パラメーター

インスタンス:派生クラスインスタンス。ほとんどの場合、これは「this」に設定できます。省略されてはならないか、無効でしてはいけません

変数:ベースクラスに渡すために引数を格納している配列。ベースクラスコンストラクタが必須の他の引数をしないならば、ミットでありえるか、無効でありえます。

LEADTOOLSクラスから新しいクラスを得るならば、ベースクラスを初期化するためにコンストラクタでこのメソッドを呼び出さなければなりません。

戻り値

戻り値でない

サンプル

このドキュメントの終わりのサンプルソースコードを参照してください

[Type].callBaseMethod(インスタンス、名前、変数)

LEADTOOLS派生クラスのベースクラスから、関数を呼び出します

パラメーター

インスタンス:派生クラスインスタンス。ほとんどの場合、これは「this」に設定できます。省略されてはならないか、無効でしてはいけません

名前:呼び出す関数の名前を格納しているString。省略されてはならないか、無効でしてはいけません

変数:ベースクラスメソッドに渡すために引数を格納している配列。省略されることがありえるか、ベースクラスコンストラクタに引数がないならば無効でありえます。

戻り値

ベースメソッド(任意であるならば)からの戻り値

サンプル

このドキュメントの終わりのサンプルソースコードを参照してください

[Type].get_baseType()

これの基本型型を取得します。

パラメーター

None

戻り値

ベース型。

サンプル

//これが、ImageViewerPanZoomInteractiveModeから『lt.Controls.ImageViewerInteractiveMode』を示します

//ImageViewerInteractiveModeから由来する

アラート(lt.Controls.ImageViewerPanZoomInteractiveMode.get_baseType().get_fullName());

[Type].get_fullName()

完全なものはこれの名をつける(namespace.name)戻り値型。

パラメーター

None

戻り値

型の完全修飾された名前

サンプル

//これが、『lt.Controls.ImageViewerPanZoomInteractiveMode』を示します

アラート(lt.Controls.ImageViewerPanZoomInteractiveMode.get_fullName());

[Type].get_name()

このタイプの名前を返します。

パラメーター

None

戻り値

型の完全修飾された名前

サンプル

//これが、『ImageViewerPanZoomInteractiveMode』を示します

アラート(lt.Controls.ImageViewerPanZoomInteractiveMode.get_name());

[Type].prototype.isInstanceOfType(インスタンス)

指定されたオブジェクトがこのクラスのインスタンスかその派生クラスの1つであるかどうか決定します。

パラメーター

インスタンス:確認するオブジェクトインスタンス。

戻り値

指定されたオブジェクトがこのクラスのインスタンスまたは派生クラスのインスタンスである場合はTrue。それ以外の場合false。

サンプル

バールインスタンス=新しいlt.Controls.ImageViewerPanZoomInteractiveMode();

//これが、true、同じ型を示します

アラート(lt.Controls.ImageViewerPanZoomInteractiveMode.isInstanceOfType(インスタンス));

//これが、true(派生型)を示します

アラート(lt.Controls.ImageViewerInteractiveMode.isInstanceOfType(インスタンス));

インスタンス=新しいlt.LeadPointD();

//これが、falseを示します

<スパン>

 

サンプル

このサンプルは、ユーザーがビューワをクリックしてドラッグするとき、回転を実装するためにImageViewerInteractiveModeに由来するクラスを作成する方法を示します。

example.html


<!DOCTYPE html>
<html>
<head>
<title>Rotate Interactive Mode</title>
<link href="example.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="Leadtools.js"></script>
<script type="text/javascript" src="Leadtools.Controls.js"></script>
<script type="text/javascript" src="example.js"></script>
</head>
<body onload="run()">
<div id="controlsDiv">
<div>
<label for="interactiveModeSelect">Interactive mode:</label>
<select id="interactiveModeSelect">
<option>PanZoom</option>
<option>Rotate</option>
</select>
<input id="testButton" type="button" value="Test"/>
</div>
</div>
<div>
<textarea name="debugTextArea" cols="80" rows="10"></textarea>
<input type="button" id="debugClearButton" value="Clear" />
</div>
<div id="imageViewerDiv"/>
</body>
</html>

example.css


html, body
{
margin: 0px;
padding: 0px;
min-height: 100%;
height: 100%;
overflow: hidden;
overflow: hidden;
background: white;
font-family: helvetica;
font-size: 10pt;
-ms-touch-action: none;
-webkit-user-select: none;
-webkit-text-size-adjust: none;
}
#imageViewerDiv
{
border: 1px solid #000000;
background-color: #7F7F7F;
width: 400px;
height: 400px;
}


example.js


'use strict';



// Register the namespace
Type.registerNamespace('demo');

// RotateInteractiveModeEventArgs begin
// Data for the custom event
// ctor
demo.RotateInteractiveModeEventArgs = function
demo_RotateInteractiveModeEventArgs(rotateAngle) {

// Call initializeBase since deriving from a LEADTOOLS type requires it demo.RotateInteractiveModeEventArgs.initializeBase(this);
this._rotateAngle = rotateAngle;
}
demo.RotateInteractiveModeEventArgs.prototype = {
// function to return the rotation angle
get_rotateAngle: function () {
return this._rotateAngle;
}
};

// Define the properties
Object.defineProperty(demo.RotateInteractiveModeEventArgs.prototype, 'rotateAngle', { get:
demo.RotateInteractiveModeEventArgs.prototype.get_rotateAngle, enumerable: true, configurable: true });

// Register this class
demo.RotateInteractiveModeEventArgs.registerClass('demo.RotateInteractiveModeEventArgs', lt.LeadEventArgs);
// RotateInteractiveModeEventArgs end
// RotateInteractiveMode begin
// Class that derives from a LEADTOOLS lt.Controls.ImageViewerInteractiveMode class
demo.RotateInteractiveMode = function demo_RotateInteractiveMode() {
demo.RotateInteractiveMode.initializeBase(this);
// Create the event
this._rotate = lt.LeadEvent.create(this, 'rotate');

// Event handlers
this._dragStartedHandler = null;
this._dragDeltaHandler = null;
this._dragCompletedHandler = null;
}



demo.RotateInteractiveMode.prototype = {

// We must provide an implementation for name
get_name: function () {
return 'Rotate';
},




// The event
get_rotate: function () {
return this._rotate;
},


// Called when the mode is started
// This is an overridden method
start: function (viewer) {
// Call the base class Start method
demo.RotateInteractiveMode.callBaseMethod(this, 'start', [viewer]);


// Subscribe to the dragStarted, dragDelta and dragCompleted events
var service = this.interactiveService;
var _this = this;


this._dragStartedHandler = service.dragStarted.add(function (sender, e) {
_this.dragStarted(sender, e);
});


this._dragDeltaHandler = service.dragDelta.add(function (sender, e) {
_this.dragDelta(sender, e);
});


this._dragCompletedHandler = service.dragCompleted.add(function (sender, e) {
_this.dragCompleted(sender, e);
});
},

// Called when the mode is stopped
stop: function (viewer) {
// Check if we have started
if (this.isStarted) {
// Unsubscribe from the events
var service = this.interactiveService;
service.dragStarted.remove(this._dragStartedHandler);
service.dragDelta.remove(this._dragDeltaHandler);
service.dragCompleted.remove(this._dragCompletedHandler);


// Call the base class Stop method
demo.RotateInteractiveMode.callBaseMethod(this, 'stop', [viewer]);
}
},


// Called when the user starts a drag operation
dragStarted: function (sender, e) {
// This will check if the mouse button (if any) is correct and if we are on top of the image
if (this.canStartWork(e)) {
// Inform whomever is listening that we have started working
this.onWorkStarted(lt.LeadEventArgs.empty);
}
},

// Called when the user is dragging
dragDelta: function (sender, e) {
// If we are not working (for example, the user has clicked the mouse outside the image) then
// nothing to do
if (!this.isWorking) {
return;
}


// Perform the operation. Get the change of the drag then increase
// or decrease the current rotation angle depending on the direction
var viewer = this.imageViewerControl;
var change = e.change;
// this is a lt.LeadPointD object
var delta = 2;
var oldRotateAngle = viewer.rotateAngle;
if (change.x > 0) {
viewer.rotateAngle = viewer.rotateAngle - delta;
} else if (change.x < 0) {
viewer.rotateAngle = viewer.rotateAngle + delta;
}
if (viewer.rotateAngle != oldRotateAngle) {
// The rotate angle has changed, fire our event
this._rotate.invoke(this, new demo.RotateInteractiveModeEventArgs(viewer.rotateAngle));
}
},

// Called when the user stops dragging
dragCompleted: function (sender, e) {
// If we are working, signal completion
if (this.isWorking) {
this.onWorkCompleted(lt.LeadEventArgs.empty);
}
}
};

// Define the properties
Object.defineProperty(demo.RotateInteractiveMode.prototype, 'name', { get: demo.RotateInteractiveMode.prototype.get_name, enumerable: true, configurable: true });
Object.defineProperty(demo.RotateInteractiveMode.prototype, 'rotate', { get: demo.RotateInteractiveMode.prototype.get_rotate, enumerable: true, configurable: true });

// Register this class
demo.RotateInteractiveMode.registerClass('demo.RotateInteractiveMode', lt.Controls.ImageViewerInteractiveMode);
// RotateInteractiveMode end
function run() {
// Create the viewer
var imageViewerCreateOptions = new lt.Controls.ImageViewerCreateOptions('imageViewerDiv', 'myViewer');
var viewer = new lt.Controls.ImageViewer(imageViewerCreateOptions);

// Create a new instance of the custom interactive mode
var rotateInteractiveMode = new demo.RotateInteractiveMode();
// Subscribe to the custom event
var rotateEventHandler = rotateInteractiveMode.rotate.add(function (sender, e) {
console.log('Rotate angle: ' + e.rotateAngle);
});

// Set up interactive modes, pan zoom and the custom rotation mode
var interactiveModes = [
new lt.Controls.ImageViewerPanZoomInteractiveMode(),
rotateInteractiveMode
];

var interactiveModeSelect = document.getElementById('interactiveModeSelect');
interactiveModeSelect.addEventListener('change', function () {
viewer.defaultInteractiveMode = interactiveModes[interactiveModeSelect.selectedIndex];
if (demo.RotateInteractiveMode.isInstanceOfType(viewer.defaultInteractiveMode)) {
alert('rotate');
} else if (lt.Controls.ImageViewerPanZoomInteractiveMode.isInstanceOfType(viewer.defaultInteractiveMode)) {
alert('pan zoom');
}
}, false);
viewer.defaultInteractiveMode = interactiveModes[0];

// Finally, set an image into the viewer (change this to a valid URL)
viewer.imageUrl = 'http://example/image.jpg';
}

ライブラリ

Leadtools 概要 入門 JavaScript
Leadtools.Annotations.Automation 概要 入門 JavaScript
Leadtools.Annotations.Core 概要 入門 JavaScript
Leadtools.Annotations.Documents 概要 入門 JavaScript
Leadtools.Annotations.Designers 概要 入門 JavaScript
Leadtools.Annotations.Rendering 概要 入門 JavaScript
Leadtools.Ccow 概要 入門 JavaScript
Leadtools.Controls 概要 入門 JavaScript
Leadtools.Controls.Medical 概要 入門 JavaScript
Leadtools.Documents 概要 入門 JavaScript
Leadtools.Documents.UI 概要 入門 JavaScript

環境

対応環境

参照

参照

概要-Leadtools JavaScript
概要-Leadtools.Annotations.Automation JavaScript
概要-Leadtools.Annotations.Core JavaScript
概要-Leadtools.Ccow
概要-Leadtools.Annotations.Designers JavaScript
概要-Leadtools.Annotations.Documents
概要-Leadtools.Annotations.Rendering JavaScript
概要-Leadtools.Controls JavaScript
概要-Leadtools.Controls.Medical JavaScript
概要-Leadtools.Documents
概要-Leadtools.Documents.UI