Hola a todos
Tengo una duda sobre un proyecto que empece, estoy modificando un collage en canvas que baje de internet ([URL="http://radikalfx.com/2011/12/12/text-addition-for-image-collage-with-html5-and-canvas/"]http://radikalfx.com/2011/12/12/text-addition-for-image-collage-with-html5-and-canvas/[/URL] ) he estado moviendo muchas cosas hasta dejarlo de esta manera:
al momento de querer modificar el tamaño y girar la imagen quiero que salga con un marco algo asi:
[URL="http://imageshack.us/a/img443/4893/8uzf.jpg"]http://imageshack.us/a/img443/4893/8uzf.jpg[/URL]
Hasta ahorita he podido hacer esto:
[URL="http://imageshack.us/a/img716/9526/84o9.jpg"]http://imageshack.us/a/img716/9526/84o9.jpg[/URL]
me faltan las lineas pues no puedo hacer que se agusten al tamaño de la imagen cuando este cambia.
Como se muestra en la imagen siguiente la linea se pasa o se ve corta como se modifica la imagen:
el codigo es demasiado largo pero con este pequeño pedazo de codigo creo que se ha de entender:
Código:
function drawMarker(layer) {
redrawCanvas();
context.save();
context.lineWidth=1;
context.strokeStyle = "#fff";
context.globalAlpha = 0.75;
context.translate(layer.offsetX + (layer.width / 2), layer.offsetY + (layer.height / 2));
context.rotate(layer.getAngle());
context.strokeRect(0 - (layer.width / 2), 0 - (layer.height / 2),
layer.width, layer.height);
/***********************************************Aqui se dibujan los nodos a la imagen*********************************************************************/
if (layer instanceof Layer) { /////Primer nodo (Derecha inferior)
context.drawImage(scaleImg,
(layer.width / 2) - scaleImg.width,
(layer.height / 2) - scaleImg.height);
}
if (layer instanceof Layer) { /////2do nodo (izquierda inferior)
context.drawImage(scaleImg,
(layer.width /-2),
(layer.height / 2) - scaleImg.height);
}
if (layer instanceof Layer) { /////3ro nodo (Izquierda arriba)
context.drawImage(scaleImg,
(layer.width / -2),
(layer.height / -2));
}
if (layer instanceof Layer) { /////4to nodo (Derecha medio)
context.drawImage(scaleImg,
(layer.width / 2) - scaleImg.width,
(layer.height / 20) - scaleImg.height);
}
if (layer instanceof Layer) { /////5to nodo (abajo medio)
context.drawImage(scaleImg,
(layer.width / 20) - scaleImg.width,
(layer.height / 2) - scaleImg.height);
}
if (layer instanceof Layer) { /////6to nodo (arriba medio)
context.drawImage(scaleImg,
(layer.width / -20),
(layer.height /-2));
}
if (layer instanceof Layer) { /////7mo nodo (izquierda medio)
context.drawImage(scaleImg,
(layer.width /-2),
(layer.height / 20) - scaleImg.height);
}
/***********************************************Aqui se dibujan los nodos a la imagen*********************************************************************/
/***********************************************Aqui se dibuja el nodo de girar*********************************************************************/
context.drawImage(rotateImg,
(layer.width / 2) - rotateImg.width,
0 - (layer.height / 2));
/***********************************************Aqui se dibuja el nodo de girar*********************************************************************/
/***********************************************Aqui se dibuja la linea********************************************************************/
context.drawImage(linea,
0-(layer.width / 2),
(layer.height / 2)- linea.height);
/**********************************************Aqui se dibuja la linea*********************************************************************/
context.restore();
}
en los comentarios donde se dibuja la linea solo necesitaria alguna instruccion para que la imagen de la linea se ajustara a la simpre cambiante tamaño de la imagen, lamentablemente estoy aprendiendo javascript y medio entiendo el codigo pero en este caso no se que instruciones podria usar.
No se si me explique o le di muchas vueltas al problema,
lo que necesito es una instruccion que me aguste esa linea al cambiante tamaño de la imagen obviamente tendre que poner las demas lineas pero creo que sacando una salen las demas.
De antemano gracias
