Capturar figura CANVAS - HTML - JAVASCRIPT
Publicado por Dante Miguel (7 intervenciones) el 20/04/2020 01:24:34
Buenas.
Tengo el siguiente javascript que simplemente lo q hace es poder dibujar rectangulos.
Necesito hacer 2 cosas.
1) que esto se pueda sobre una imagen, de las siguiente medidas (1280 x 1233 px). O sea, en la imagen hacer esos rectángulos.
2) Que cada figura que cree(rectángulos) pueda darle una entidad, o sea, que se pueda seleccionar, poner nombre, características, etc, para luego guardar en una bd.
DESDE YA, MUCHAS GRACIAS
Tengo el siguiente javascript que simplemente lo q hace es poder dibujar rectangulos.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<html>
<head>
<style>
#canvas { width:2000px; height:2000px; border: 10px solid transparent; }.rectangle {
border: 1px solid #FF0000;
position: absolute; }</style>
</head>
<body>
<div id="canvas"></div>
<script>
function initDraw(canvas) {
var mouse = {
x: 0,
y: 0,
startX: 0,
startY: 0 };function setMousePosition(e) {
var ev = e || window.event; //Moz || IE
if (ev.pageX) { //Moz
mouse.x = ev.pageX + window.pageXOffset;
mouse.y = ev.pageY + window.pageYOffset;
} else if (ev.clientX) { //IE
mouse.x = ev.clientX + document.body.scrollLeft;
mouse.y = ev.clientY + document.body.scrollTop;
} }; var element = null;canvas.onmousemove = function (e) {
setMousePosition(e);
if (element !== null) {
element.style.width = Math.abs(mouse.x - mouse.startX) + 'px';
element.style.height = Math.abs(mouse.y - mouse.startY) + 'px';
element.style.left = (mouse.x - mouse.startX < 0) ? mouse.x + 'px' : mouse.startX + 'px';
element.style.top = (mouse.y - mouse.startY < 0) ? mouse.y + 'px' : mouse.startY + 'px';
} }canvas.onclick = function (e) {
if (element !== null) {
element = null;canvas.style.cursor = "default";
console.log("finsihed.");
} else {
console.log("begun.");
mouse.startX = mouse.x;
mouse.startY = mouse.y;
element = document.createElement('div');
element.className = 'rectangle'
element.style.left = mouse.x + 'px';
element.style.top = mouse.y + 'px';
canvas.appendChild(element)
canvas.style.cursor = "crosshair";
} } }initDraw(document.getElementById('canvas'));
</script>
</body>
</html>
Necesito hacer 2 cosas.
1) que esto se pueda sobre una imagen, de las siguiente medidas (1280 x 1233 px). O sea, en la imagen hacer esos rectángulos.
2) Que cada figura que cree(rectángulos) pueda darle una entidad, o sea, que se pueda seleccionar, poner nombre, características, etc, para luego guardar en una bd.
DESDE YA, MUCHAS GRACIAS
Valora esta pregunta
0