캔버스로 그림을 재단하다
41445 단어 canvas
1 var selectObj = null;
2 function ImageCrop(canvasId, imageSource, x, y, width, height) {
3 var canvas = $("#" + canvasId);
4 if (canvas.length == 0 && imageSource) {
5 return;
6 }
7
8 function canvasMouseDown(e) {
9 StopSelect(e);
10 canvas.css("cursor", "default");
11 }
12
13 function canvasMouseMove(e) {
14 var canvasOffset = canvas.offset();
15 var pageX = e.pageX || event.targetTouches[0].pageX;
16 var pageY = e.pageY || event.targetTouches[0].pageY;
17 iMouseX = Math.floor(pageX - canvasOffset.left);
18 iMouseY = Math.floor(pageY - canvasOffset.top);
19
20 canvas.css("cursor", "default");
21 if (selectObj.bDragAll) {
22 canvas.css("cursor", "move");
23 canvas.data("drag", true);
24 var cx = iMouseX - selectObj.px;
25 cx = cx < 0 ? 0 : cx;
26 mx = ctx.canvas.width - selectObj.w;
27 cx = cx > mx ? mx : cx;
28 selectObj.x = cx;
29 var cy = iMouseY - selectObj.py;
30 cy = cy < 0 ? 0 : cy;
31 my = ctx.canvas.height - selectObj.h;
32 cy = cy > my ? my : cy;
33 selectObj.y = cy;
34 }
35 for (var i = 0; i < 4; i++) {
36 selectObj.bHow[i] = false;
37 selectObj.iCSize[i] = selectObj.csize;
38 }
39
40 // hovering over resize cubes
41 if (iMouseX > selectObj.x - selectObj.csizeh && iMouseX < selectObj.x + selectObj.csizeh &&
42 iMouseY > selectObj.y - selectObj.csizeh && iMouseY < selectObj.y + selectObj.csizeh) {
43 canvas.css("cursor", "pointer");
44 selectObj.bHow[0] = true;
45 selectObj.iCSize[0] = selectObj.csizeh;
46 }
47 if (iMouseX > selectObj.x + selectObj.w - selectObj.csizeh && iMouseX < selectObj.x + selectObj.w + selectObj.csizeh &&
48 iMouseY > selectObj.y - selectObj.csizeh && iMouseY < selectObj.y + selectObj.csizeh) {
49 canvas.css("cursor", "pointer");
50
51 selectObj.bHow[1] = true;
52 selectObj.iCSize[1] = selectObj.csizeh;
53 }
54 if (iMouseX > selectObj.x + selectObj.w - selectObj.csizeh && iMouseX < selectObj.x + selectObj.w + selectObj.csizeh &&
55 iMouseY > selectObj.y + selectObj.h - selectObj.csizeh && iMouseY < selectObj.y + selectObj.h + selectObj.csizeh) {
56 canvas.css("cursor", "pointer");
57
58 selectObj.bHow[2] = true;
59 selectObj.iCSize[2] = selectObj.csizeh;
60 }
61 if (iMouseX > selectObj.x - selectObj.csizeh && iMouseX < selectObj.x + selectObj.csizeh &&
62 iMouseY > selectObj.y + selectObj.h - selectObj.csizeh && iMouseY < selectObj.y + selectObj.h + selectObj.csizeh) {
63 canvas.css("cursor", "pointer");
64
65 selectObj.bHow[3] = true;
66 selectObj.iCSize[3] = selectObj.csizeh;
67 }
68
69 if (iMouseX > selectObj.x && iMouseX < selectObj.x + selectObj.w && iMouseY > selectObj.y && iMouseY < selectObj.y + selectObj.h) {
70 canvas.css("cursor", "move");
71 }
72
73 // in case of dragging of resize cubes
74 var iFW, iFH, iFX, iFY, mx, my;
75 if (selectObj.bDrag[0]) {
76 iFX = iMouseX - selectObj.px;
77 iFY = iMouseY - selectObj.py;
78 iFW = selectObj.w + selectObj.x - iFX;
79 iFH = selectObj.h + selectObj.y - iFY;
80 canvas.data("drag", true);
81 }
82 if (selectObj.bDrag[1]) {
83 iFX = selectObj.x;
84 iFY = iMouseY - selectObj.py;
85 iFW = iMouseX - selectObj.px - iFX;
86 iFH = selectObj.h + selectObj.y - iFY;
87 canvas.data("drag", true);
88 }
89 if (selectObj.bDrag[2]) {
90 iFX = selectObj.x;
91 iFY = selectObj.y;
92 iFW = iMouseX - selectObj.px - iFX;
93 iFH = iMouseY - selectObj.py - iFY;
94 canvas.data("drag", true);
95 }
96 if (selectObj.bDrag[3]) {
97 iFX = iMouseX - selectObj.px;
98 iFY = selectObj.y;
99 iFW = selectObj.w + selectObj.x - iFX;
100 iFH = iMouseY - selectObj.py - iFY;
101 canvas.data("drag", true);
102 }
103
104 if (iFW > selectObj.csizeh * 2 && iFH > selectObj.csizeh * 2) {
105 selectObj.w = iFW;
106 selectObj.h = iFH;
107 selectObj.x = iFX;
108 selectObj.y = iFY;
109 }
110 drawScene();
111 }
112
113 function canvasMouseOut() {
114 $(canvas).trigger("mouseup");
115 }
116
117 function canvasMouseUp() {
118 selectObj.bDragAll = false;
119 for (var i = 0; i < 4; i++) {
120 selectObj.bDrag[i] = false;
121 }
122 canvas.css("cursor", "default");
123 canvas.data("select", {
124 x: selectObj.x,
125 y: selectObj.y,
126 w: selectObj.w,
127 h: selectObj.h
128 });
129 selectObj.px = 0;
130 selectObj.py = 0;
131 }
132
133 function Selection(x, y, w, h) {
134 this.x = x; // initial positions
135 this.y = y;
136 this.w = w; // and size
137 this.h = h;
138
139 this.px = x; // extra variables to dragging calculations
140 this.py = y;
141
142 this.csize = 4; // resize cubes size
143 this.csizeh = 6; // resize cubes size (on hover)
144
145 this.bHow = [false, false, false, false]; // hover statuses
146 this.iCSize = [this.csize, this.csize, this.csize, this.csize]; // resize cubes sizes
147 this.bDrag = [false, false, false, false]; // drag statuses
148 this.bDragAll = false; // drag whole selection
149 }
150
151 Selection.prototype.draw = function () {
152 ctx.strokeStyle = '#666';
153 ctx.lineWidth = 2;
154 ctx.strokeRect(this.x, this.y, this.w, this.h);
155
156 // draw part of original image
157 if (this.w > 0 && this.h > 0) {
158 ctx.drawImage(image, this.x, this.y, this.w, this.h, this.x, this.y, this.w, this.h);
159 }
160
161 // draw resize cubes
162 ctx.fillStyle = '#999';
163 ctx.fillRect(this.x - this.iCSize[0], this.y - this.iCSize[0], this.iCSize[0] * 2, this.iCSize[0] * 2);
164 ctx.fillRect(this.x + this.w - this.iCSize[1], this.y - this.iCSize[1], this.iCSize[1] * 2, this.iCSize[1] * 2);
165 ctx.fillRect(this.x + this.w - this.iCSize[2], this.y + this.h - this.iCSize[2], this.iCSize[2] * 2, this.iCSize[2] * 2);
166 ctx.fillRect(this.x - this.iCSize[3], this.y + this.h - this.iCSize[3], this.iCSize[3] * 2, this.iCSize[3] * 2);
167 };
168
169 var drawScene = function () {
170 ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); // clear canvas
171
172 // draw source image
173 ctx.drawImage(image, 0, 0, ctx.canvas.width, ctx.canvas.height);
174
175 // and make it darker
176 ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
177 ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
178
179 // draw selection
180 selectObj.draw();
181 canvas.mousedown(canvasMouseDown);
182 canvas.on("touchstart", canvasMouseDown);
183 };
184
185 var createSelection = function (x, y, width, height) {
186 var content = $("#imagePreview");
187 x = x || Math.ceil((content.width() - width) / 2);
188 y = y || Math.ceil((content.height() - height) / 2);
189 return new Selection(x, y, width, height);
190 };
191
192 var ctx = canvas[0].getContext("2d");
193 var iMouseX = 1;
194 var iMouseY = 1;
195 var image = new Image();
196 image.onload = function () {
197 selectObj = createSelection(x, y, width, height);
198 canvas.data("select", {
199 x: selectObj.x,
200 y: selectObj.y,
201 w: selectObj.w,
202 h: selectObj.h
203 });
204 drawScene();
205 };
206 image.src = imageSource;
207
208 canvas.mousemove(canvasMouseMove);
209 canvas.on("touchmove", canvasMouseMove);
210
211 var StopSelect = function (e) {
212 var canvasOffset = $(canvas).offset();
213 var pageX = e.pageX || event.targetTouches[0].pageX;
214 var pageY = e.pageY || event.targetTouches[0].pageY;
215 iMouseX = Math.floor(pageX - canvasOffset.left);
216 iMouseY = Math.floor(pageY - canvasOffset.top);
217
218 selectObj.px = iMouseX - selectObj.x;
219 selectObj.py = iMouseY - selectObj.y;
220
221 if (selectObj.bHow[0]) {
222 selectObj.px = iMouseX - selectObj.x;
223 selectObj.py = iMouseY - selectObj.y;
224 }
225 if (selectObj.bHow[1]) {
226 selectObj.px = iMouseX - selectObj.x - selectObj.w;
227 selectObj.py = iMouseY - selectObj.y;
228 }
229 if (selectObj.bHow[2]) {
230 selectObj.px = iMouseX - selectObj.x - selectObj.w;
231 selectObj.py = iMouseY - selectObj.y - selectObj.h;
232 }
233 if (selectObj.bHow[3]) {
234 selectObj.px = iMouseX - selectObj.x;
235 selectObj.py = iMouseY - selectObj.y - selectObj.h;
236 }
237
238 if (iMouseX > selectObj.x + selectObj.csizeh &&
239 iMouseX < selectObj.x + selectObj.w - selectObj.csizeh &&
240 iMouseY > selectObj.y + selectObj.csizeh &&
241 iMouseY < selectObj.y + selectObj.h - selectObj.csizeh) {
242 selectObj.bDragAll = true;
243 }
244
245 for (var i = 0; i < 4; i++) {
246 if (selectObj.bHow[i]) {
247 selectObj.bDrag[i] = true;
248 }
249 }
250 };
251 canvas.mouseout(canvasMouseOut);
252 canvas.mouseup(canvasMouseUp);
253 canvas.on("touchend", canvasMouseUp);
254
255 this.getImageData = function (previewID) {
256 var tmpCanvas = $("<canvas></canvas>")[0];
257 var tmpCtx = tmpCanvas.getContext("2d");
258 if (tmpCanvas && selectObj) {
259 tmpCanvas.width = selectObj.w;
260 tmpCanvas.height = selectObj.h;
261 tmpCtx.drawImage(image, selectObj.x, selectObj.y, selectObj.w, selectObj.h, 0, 0, selectObj.w, selectObj.h);
262 if (document.getElementById(previewID)) {
263 document.getElementById(previewID).src = tmpCanvas.toDataURL();
264 document.getElementById(previewID).style.border = "1px solid #ccc";
265 }
266 return tmpCanvas.toDataURL();
267 }
268 };
269 }
270
271 function autoResizeImage(maxWidth, maxHeight, objImg) {
272 var img = new Image();
273 img.src = objImg.src;
274 var hRatio;
275 var wRatio;
276 var ratio = 1;
277 var w = objImg.width;
278 var h = objImg.height;
279 wRatio = maxWidth / w;
280 hRatio = maxHeight / h;
281 if (w < maxWidth && h < maxHeight) {
282 return;
283 }
284 if (maxWidth == 0 && maxHeight == 0) {
285 ratio = 1;
286 } else if (maxWidth == 0) {
287 if (hRatio < 1) {
288 ratio = hRatio;
289 }
290 } else if (maxHeight == 0) {
291 if (wRatio < 1) {
292 ratio = wRatio;
293 }
294 } else if (wRatio < 1 || hRatio < 1) {
295 ratio = (wRatio <= hRatio ? wRatio : hRatio);
296 } else {
297 ratio = (wRatio <= hRatio ? wRatio : hRatio) - Math.floor(wRatio <= hRatio ? wRatio : hRatio);
298 }
299 if (ratio < 1) {
300 if (ratio < 0.5 && w < maxWidth && h < maxHeight) {
301 ratio = 1 - ratio;
302 }
303 w = w * ratio;
304 h = h * ratio;
305 }
306 objImg.height = h;
307 objImg.width = w;
308 }이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Jetpack Compose를 사용한 커스텀 컴포저블첫 번째 기사 시리즈에서는 Jetpack Compose에서 맞춤 보기를 만드는 방법에 대해 이야기하고 싶습니다. Labeled Ranged Slider의 예에서는 완전히 맞춤설정된 컴포저블을 만드는 데 필요한 단계를...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
