Skip to content

Commit 804b598

Browse files
Dynamsoft-HenryDynamsoft-Henry
authored
Merge pull request #45 from dynamsoft-docs/preview
update to internal commit 09ed44ef
2 parents 1d29ac9 + 3918db9 commit 804b598

15 files changed

+882
-26
lines changed

‎programming/javascript/api-reference/imagedrawingitem-v4.0.1.md

Lines changed: 203 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,203 @@
1+
---
2+
layout: default-layout
3+
title: ImageDrawingItem - Dynamsoft Camera Enhancer JavaScript API
4+
description: This page shows the ImageDrawingItem definitions of Dynamsoft Camera Enhancer JavaScript SDK.
5+
keywords: camera enhancer, imagedrawingitem, javascript, js
6+
needAutoGenerateSidebar: true
7+
needGenerateH3Content: true
8+
noTitleIndex: true
9+
breadcrumbText: ImageDrawingItem
10+
---
11+
12+
# Class ImageDrawingItem
13+
14+
The `ImageDrawingItem` class extends the functionality of the `DrawingItem` class and is specifically tailored to handle image-related drawing operations.
15+
16+
| Name | Description |
17+
| ----------------------------------------------------- | ---------------------------------------------------------------------------------- |
18+
| `constructor` [ImageDrawingItem()](#imagedrawingitem) | Constructor for the class. |
19+
| [maintainAspectRatio](#maintainaspectratio) | Determines whether the image's aspect ratio should be maintained when it is drawn. |
20+
| [getImage()](#getimage) | Retrieves the current image being used for drawing. |
21+
| [setImage()](#setimage) | Sets the image to be used for drawing. |
22+
| [getImageRect()](#getimagerect) | Returns the rectangle area within which the image is drawn. |
23+
| [setImageRect()](#setimagerect) | Sets the rectangle area within which the image should be drawn. |
24+
25+
## ImageDrawingItem
26+
27+
Constructor for the class.
28+
29+
```typescript
30+
constructor(
31+
image: DSImageData | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement,
32+
rect: Rect,
33+
maintainAspectRatio: boolean,
34+
drawingStyleId?: number
35+
)
36+
```
37+
38+
**Parameters**
39+
40+
`image`: the image to be drawn, which can be one of several types, including `DSImageData` or standard HTML elements for images, canvas, or video.
41+
42+
`rect`: defines the rectangle area within which the image will be drawn.
43+
44+
`maintainAspectRatio`: determines whether the image's aspect ratio should be maintained when it is drawn. If true, the height in `rect` may be adjusted to preserve the image's aspect ratio.
45+
46+
`drawingStyleId`: [Optional] the unique ID of the `DrawingStyle` to apply to this `DrawingItem`.
47+
48+
**Code Snippet**
49+
50+
```html
51+
<div style="display:none;">
52+
<img id="source" src="path-to-source-image.jpg" width="300" height="227" />
53+
</div>
54+
```
55+
56+
```js
57+
let cameraView = cameraEnhancer.getCameraView();
58+
let drawingLayer = cameraView.createDrawingLayer();
59+
const image = document.getElementById("source");
60+
let imgItem = new Dynamsoft.DCE.DrawingItem.ImageDrawingItem(
61+
image,
62+
{
63+
x: 50,
64+
y: 50,
65+
width: 640,
66+
height: 360,
67+
isMeasuredInPercentage: false
68+
},
69+
true,
70+
3
71+
);
72+
drawingLayer.addDrawingItem(imgItem);
73+
```
74+
75+
**See also**
76+
77+
[DSImageData](https://www.dynamsoft.com/capture-vision/docs/web/programming/javascript/api-reference/core/basic-structures/ds-image-data.html)
78+
79+
[Rect](https://www.dynamsoft.com/capture-vision/docs/web/programming/javascript/api-reference/core/basic-structures/rect.html)
80+
81+
## maintainAspectRatio
82+
83+
Determines whether the image's aspect ratio should be maintained when it is drawn.
84+
85+
> Invoke `renderAll()` for the change to take effect if the `DrawingItem` has already been added to a `DrawingLayer`.
86+
87+
```typescript
88+
maintainAspectRatio: boolean;
89+
```
90+
91+
**Code Snippet**
92+
93+
```js
94+
imgItem.maintainAspectRatio = true;
95+
drawingLayer.renderAll();
96+
```
97+
98+
## getImage
99+
100+
Retrieves the current image being used for drawing. The return type can be any of the specified types, depending on what was set.
101+
102+
```typescript
103+
getImage(): DSImageData | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement;
104+
```
105+
106+
**Parameters**
107+
108+
None.
109+
110+
**Return Value**
111+
112+
The current image being used for drawing.
113+
114+
**Code Snippet**
115+
116+
```js
117+
imgItem.getImage();
118+
```
119+
120+
## setImage
121+
122+
Sets the image to be used for drawing. This method allows changing the image after the object has been instantiated.
123+
124+
> Invoke `renderAll()` for the change to take effect if the `DrawingItem` has already been added to a `DrawingLayer`.
125+
126+
```typescript
127+
setImage(image: DSImageData | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement): void;
128+
```
129+
130+
**Parameters**
131+
132+
`image`: the image to be drawn, which can be one of several types, including `DSImageData` or standard HTML elements for images, canvas, or video.
133+
134+
**Return Value**
135+
136+
None.
137+
138+
**Code Snippet**
139+
140+
```js
141+
imgItem.setImage(/*A-New-Image*/);
142+
```
143+
144+
**See also**
145+
146+
[DSImageData](https://www.dynamsoft.com/capture-vision/docs/web/programming/javascript/api-reference/core/basic-structures/ds-image-data.html)
147+
148+
## getImageRect
149+
150+
Returns the rectangle area within which the image is drawn.
151+
152+
```typescript
153+
getImageRect(): Rect;
154+
```
155+
156+
**Parameters**
157+
158+
None.
159+
160+
**Return Value**
161+
162+
The rectangle area within which the image is drawn.
163+
164+
**Code Snippet**
165+
166+
```js
167+
imgItem.getImageRect();
168+
```
169+
170+
## setImageRect
171+
172+
Sets the rectangle area within which the image should be drawn. This method allows for the adjustment of position and size of the image.
173+
174+
> The change takes effect right away.
175+
176+
```typescript
177+
setImageRect(rect: Rect): void;
178+
```
179+
180+
**Parameters**
181+
182+
`rect`: defines the rectangle area within which the image should be drawn.
183+
184+
**Return Value**
185+
186+
None.
187+
188+
**Code Snippet**
189+
190+
```js
191+
imgItem.setImageRect(
192+
{
193+
height: 100,
194+
width:300,
195+
x: 200,
196+
y :200
197+
}
198+
);
199+
```
200+
201+
**See Also**
202+
203+
[Rect](https://www.dynamsoft.com/capture-vision/docs/web/programming/javascript/api-reference/core/basic-structures/rect.html)

‎programming/javascript/api-reference/imagedrawingitem.md

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ needAutoGenerateSidebar: true
77
needGenerateH3Content: true
88
noTitleIndex: true
99
breadcrumbText: ImageDrawingItem
10-
permalink: /programming/javascript/api-reference/imagedrawingitem.html
1110
---
1211

1312
# Class ImageDrawingItem
@@ -58,7 +57,7 @@ constructor(
5857
let cameraView = cameraEnhancer.getCameraView();
5958
let drawingLayer = cameraView.createDrawingLayer();
6059
const image = document.getElementById("source");
61-
let imgItem = new Dynamsoft.DCE.DrawingItem.ImageDrawingItem(
60+
let imgItem = new Dynamsoft.DrawingItem.ImageDrawingItem(
6261
image,
6362
{
6463
x: 50,

‎programming/javascript/api-reference/linedrawingitem-v4.0.1.md

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
---
2+
layout: default-layout
3+
title: LineDrawingItem - Dynamsoft Camera Enhancer JavaScript API
4+
description: This page shows the LineDrawingItem definitions of Dynamsoft Camera Enhancer JavaScript SDK.
5+
keywords: camera enhancer, linedrawingitem, javascript, js
6+
needAutoGenerateSidebar: true
7+
needGenerateH3Content: true
8+
noTitleIndex: true
9+
breadcrumbText: LineDrawingItem
10+
---
11+
12+
# Class LineDrawingItem
13+
14+
The `LineDrawingItem` class extends the functionality of the `DrawingItem` class and is specifically tailored to handle line-related drawing operations.
15+
16+
| Name | Description |
17+
| --------------------------------------------------- | -------------------------------------------------- |
18+
| `constructor` [LineDrawingItem()](#linedrawingitem) | Constructor for the class. |
19+
| [getLine()](#getline) | Retrieves the current line being used for drawing. |
20+
| [setLine()](#setline) | Sets the line to be used for drawing. |
21+
22+
## LineDrawingItem
23+
24+
Constructor for the class.
25+
26+
```typescript
27+
constructor(
28+
line: LineSegment,
29+
drawingStyleId?: number
30+
)
31+
```
32+
33+
**Parameters**
34+
35+
`line`: the line to be drawn, of type `LineSegment`.
36+
37+
`drawingStyleId`: [Optional] the unique ID of the `DrawingStyle` to apply to this `DrawingItem`.
38+
39+
**Code Snippet**
40+
41+
```js
42+
let cameraView = cameraEnhancer.getCameraView();
43+
let drawingLayer = cameraView.createDrawingLayer();
44+
let lineItem = new Dynamsoft.DCE.DrawingItem.LineDrawingItem(
45+
{
46+
startPoint:
47+
{
48+
x: 50,
49+
y: 50
50+
},
51+
endPoint:
52+
{
53+
x: 500,
54+
y: 500
55+
}
56+
}
57+
);
58+
drawingLayer.addDrawingItem(lineItem);
59+
```
60+
61+
**See also**
62+
63+
[LineSegment](https://www.dynamsoft.com/capture-vision/docs/web/programming/javascript/api-reference/core/basic-structures/line-segment.html)
64+
65+
## getLine
66+
67+
Retrieves the current line being used for drawing.
68+
69+
```typescript
70+
getLine(): LineSegment;
71+
```
72+
73+
**Parameters**
74+
75+
None.
76+
77+
**Return Value**
78+
79+
The current line being used for drawing, of type `LineSegment`.
80+
81+
**Code Snippet**
82+
83+
```js
84+
lineItem.getLine();
85+
```
86+
87+
## setLine
88+
89+
Sets the line to be used for drawing. This method allows changing the line after the object has been instantiated.
90+
91+
```typescript
92+
setLine(line: LineSegment): void;
93+
```
94+
95+
**Parameters**
96+
97+
`line`: the line to be drawn, of type `LineSegment`.
98+
99+
**Return Value**
100+
101+
None.
102+
103+
**Code Snippet**
104+
105+
```js
106+
lineItem.setLine(/*A-New-Line*/);
107+
```
108+
109+
**See also**
110+
111+
[LineSegment](https://www.dynamsoft.com/capture-vision/docs/web/programming/javascript/api-reference/core/basic-structures/line-segment.html)

‎programming/javascript/api-reference/linedrawingitem.md

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ needAutoGenerateSidebar: true
77
needGenerateH3Content: true
88
noTitleIndex: true
99
breadcrumbText: LineDrawingItem
10-
permalink: /programming/javascript/api-reference/linedrawingitem.html
1110
---
1211

1312
# Class LineDrawingItem
@@ -42,7 +41,7 @@ constructor(
4241
```js
4342
let cameraView = cameraEnhancer.getCameraView();
4443
let drawingLayer = cameraView.createDrawingLayer();
45-
let lineItem = new Dynamsoft.DCE.DrawingItem.LineDrawingItem(
44+
let lineItem = new Dynamsoft.DCE.LineDrawingItem(
4645
{
4746
startPoint:
4847
{

0 commit comments

Comments
 (0)