0
412
VistasEstablezca el origen del elemento en el centro en lugar de arriba a la izquierda (jquery)
Tengo este marcador (que es un div simple) dentro del triángulo: 
El centro del marcador debe estar exactamente en el centroide del triángulo.
Como se ve en la imagen, no está exactamente en el centroide (está un poco a la derecha y posiblemente abajo).
Estoy usando el método jquery ui .draggable . Aquí está mi css para el marcador:
#marker { position: absolute; background: #808080; border-radius: 50%; width: 50px; height: 50px; cursor: grab; }Y aquí está mi script jquery:
$(document).ready(function () { var triangle = $("#triangle"); var marker = $("#marker"); var coord = getTriangleCoordinates(triangle); var center = centroid(coord); $("#marker").hover( function () { // over $(this).css("filter", "brightness(0.8)"); }, function () { // out $(this).css("filter", "brightness(1)"); } ); $("#marker").mouseup(function () { $(this).css("background", "salmon"); }); $("#marker").draggable({ drag: function (event, ui) { var offset = ui.offset; if (!bounded(offset, coord)) return false; } }); marker.css("left", Math.round(center.left) - 5 + "px"); marker.css("top", Math.round(center.top) - 5 + "px"); console.log(coord); });¿Cómo establezco la posición predeterminada del centro del marcador exactamente en el centroide, sin dejar de arrastrar el marcador?
Probé la propiedad transform: translate(-50%, 0) css. Aunque arregló la posición, arruinó la función de arrastrar por completo.
Cualquier ayuda es apreciada. ¡¡Gracias!!
1 Respuestas
Responde la pregunta0
Su elemento de marcador tiene un ancho de 50 px y una altura de 50 px.
Suponiendo que su función de centroide devuelve el resultado correcto, entonces está colocando la esquina superior izquierda del marcador (recuerde, es básicamente un cuadrado) a solo 5 px de distancia del centroide real.
Debe estar desplazado por la mitad de su ancho y alto para que su punto central esté en el centroide.
Así que cambia esto:
marker.css("left", Math.round(center.left) - 5 + "px"); marker.css("top", Math.round(center.top) - 5 + "px");A esto:
marker.css("left", Math.round(center.left) - 25 + "px"); marker.css("top", Math.round(center.top) - 25 + "px"); Para una solución más general, si, por ejemplo, las dimensiones del marcador pueden cambiar con el tamaño de la ventana gráfica o algo así, puede establecer la parte superior izquierda en el centroide y luego transform: translate(-50%, 50%) . Esto moverá el marcador hacia la izquierda y hacia arriba por la mitad de su propio ancho y alto, sean cuales sean.