Skip to content
This repository was archived by the owner on Oct 11, 2024. It is now read-only.

Commit 0934cee

Browse files
Cube-JCube-J
authored
Merge pull request #5 from Dynamsoft/_dev
Dev
2 parents 5b75bf0 + c02f556 commit 0934cee

5 files changed

Lines changed: 191 additions & 2 deletions

File tree

2.customize-the-ui/index.html renamed to customize-the-ui/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>2.customize-the-ui</title>
7-
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@3.0.0/dist/dce.js"></script>
7+
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@3.0.1/dist/dce.js"></script>
88
</head>
99
<body>
1010
<script>

2.customize-the-ui/ui.html renamed to customize-the-ui/ui.html

File renamed without changes.

‎draw-shapes/image.png‎

6.48 KB
Loading

‎draw-shapes/index.html‎

Lines changed: 189 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,189 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@3.0.1/dist/dce.js"></script>
7+
<title>drawing-shapes</title>
8+
</head>
9+
<body>
10+
<select id="select-shapes">
11+
<option value="rect">rectangle</option>
12+
<option value="polygon">polygon</option>
13+
<option value="arc">arc</option>
14+
<option value="line">line</option>
15+
<option value="text">text</option>
16+
<option value="image">image</option>
17+
</select>
18+
<button id="btn-add-shape">add shape</button>
19+
<button id="btn-remove-all-shapes">remove all shapes</button>
20+
<br />
21+
<button id="btn-use-custom-style">use custom style</button>
22+
<button id="btn-switch-mode">switch mode</button>
23+
<label id="label-mode"></label>
24+
<div id="div-ui-container" style="width: 100%; height: 70vh"></div>
25+
<script>
26+
const lable = document.querySelector("#label-mode");
27+
let cameraEnhancer = null;
28+
let drawingLayer = null;
29+
30+
(async () => {
31+
cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance();
32+
await cameraEnhancer.open();
33+
document
34+
.querySelector("#div-ui-container")
35+
.appendChild(cameraEnhancer.getUIElement());
36+
drawingLayer = cameraEnhancer.createDrawingLayer();
37+
lable.textContent = drawingLayer.getMode();
38+
})();
39+
40+
document.querySelector("#btn-add-shape").addEventListener("click", () => {
41+
if (!drawingLayer) {
42+
console.error(`The initialization is not complete.`);
43+
return;
44+
}
45+
const shape = document.querySelector("#select-shapes").value;
46+
switch (shape) {
47+
case "rect":
48+
{
49+
const x = 0,
50+
y = 0,
51+
width = 100,
52+
height = 200;
53+
const rect = new Dynamsoft.DCE.DrawingItem.DT_Rect(
54+
x,
55+
y,
56+
width,
57+
height
58+
);
59+
drawingLayer.addDrawingItems([rect]);
60+
}
61+
break;
62+
case "polygon":
63+
{
64+
const points = [
65+
{
66+
x: 200,
67+
y: 200,
68+
},
69+
{
70+
x: 400,
71+
y: 150,
72+
},
73+
{
74+
x: 500,
75+
y: 400,
76+
},
77+
{
78+
x: 200,
79+
y: 300,
80+
},
81+
];
82+
const polygon = new Dynamsoft.DCE.DrawingItem.DT_Polygon(points);
83+
drawingLayer.addDrawingItems([polygon]);
84+
}
85+
break;
86+
case "arc":
87+
{
88+
const x = 100,
89+
y = 0,
90+
radius = 50,
91+
startAngle = 0,
92+
endAngle = 125;
93+
const arc = new Dynamsoft.DCE.DrawingItem.DT_Arc(
94+
x,
95+
y,
96+
radius,
97+
startAngle,
98+
endAngle
99+
);
100+
drawingLayer.addDrawingItems([arc]);
101+
}
102+
break;
103+
case "line":
104+
{
105+
const startPoint = { x: 400, y: 100 },
106+
endPoint = { x: 600, y: 300 };
107+
const line = new Dynamsoft.DCE.DrawingItem.DT_Line(
108+
startPoint,
109+
endPoint
110+
);
111+
drawingLayer.addDrawingItems([line]);
112+
}
113+
break;
114+
case "text":
115+
{
116+
const content = "I am a Text.",
117+
x = 700,
118+
y = 100;
119+
const text = new Dynamsoft.DCE.DrawingItem.DT_Text(content, x, y);
120+
drawingLayer.addDrawingItems([text]);
121+
}
122+
break;
123+
case "image":
124+
{
125+
const content = new Image(192, 192),
126+
x = 900,
127+
y = 200;
128+
content.src = "image.png";
129+
content.decode().then(() => {
130+
const image = new Dynamsoft.DCE.DrawingItem.DT_Image(
131+
content,
132+
x,
133+
y
134+
);
135+
drawingLayer.addDrawingItems([image]);
136+
});
137+
}
138+
break;
139+
default:
140+
break;
141+
}
142+
});
143+
144+
document
145+
.querySelector("#btn-remove-all-shapes")
146+
.addEventListener("click", () => {
147+
if (!drawingLayer) {
148+
console.error(`The initialization is not complete.`);
149+
return;
150+
}
151+
drawingLayer.clearDrawingItems();
152+
});
153+
154+
document
155+
.querySelector("#btn-use-custom-style")
156+
.addEventListener("click", () => {
157+
if (!drawingLayer) {
158+
console.error(`The initialization is not complete.`);
159+
return;
160+
}
161+
const styleDefinition = {
162+
lineWidth: 5,
163+
fillStyle: "rgba(254, 180, 32, 0.3)",
164+
strokeStyle: "rgba(254, 180, 32, 0.9)",
165+
paintMode: "strokeAndFill",
166+
fontFamily: "sans-serif",
167+
fontSize: 20,
168+
};
169+
const styleId = cameraEnhancer.createDrawingStyle(styleDefinition);
170+
drawingLayer.setDrawingStyle(styleId);
171+
});
172+
173+
document
174+
.querySelector("#btn-switch-mode")
175+
.addEventListener("click", () => {
176+
if (!drawingLayer) {
177+
console.error(`The initialization is not complete.`);
178+
return;
179+
}
180+
if (drawingLayer.getMode() === "viewer") {
181+
drawingLayer.setMode("editor");
182+
} else if (drawingLayer.getMode() === "editor") {
183+
drawingLayer.setMode("viewer");
184+
}
185+
lable.textContent = drawingLayer.getMode();
186+
});
187+
</script>
188+
</body>
189+
</html>

1.explore-the-features.html renamed to try-basic-features.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@3.0.0/dist/dce.js"></script>
6+
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@3.0.1/dist/dce.js"></script>
77
<title>1.explore-the-features</title>
88
<style>
99
* {

0 commit comments

Comments
 (0)