Tengo un proyecto usando angularJS, en mi proyecto tengo 2 imágenes:

Image 1: <br/>

<img src="http://www.google.com/favicon.ico" alt="" ng-click="mark($event)" width="100"/>

<hr/>

Image 2: <br/>

<img src="http://www.google.com/favicon.ico" alt="" width="100"/>

Cuando el usuario hace clic en Imagen 1, capturo la posición x, y de la imagen.

$scope.mark= function(event){
    console.log("x = " + event.offsetX);
    console.log("y = " + event.offsetY);
}

Obteniendo algunos como:

x = 123
y = 12

Necesito poner un botón sobre la imagen 2 en la posición (x, y) de la imagen 1 con angularjs / javascript, donde el usuario hizo clic (Imagen 1).

Ambas imágenes son iguales.

Estaba investigando pero no encontré una solución usando solo angularjs o javascript.

Cualquier sugerencia.

1
ELM 7 sep. 2018 a las 17:12

3 respuestas

La mejor respuesta

El principio ya fue sugerido por @Eddy Howard. Podría poner la funcionalidad en una directiva por conveniencia, algo como esto quizás (aunque no es la solución óptima):

.directive('posButton', function() {
   return {
    restrict: 'E',
    scope: {
      onClick: '=onClick',
      position: '=pos'
    },
    template: '<button ng-click="onClick()">foo</button>',
    link: function(scope, element, attrs) {

     element.css({
       visibility: 'hidden',
       position: 'absolute',
       top: '0px',
       left: '0px'
      });

      scope.$watch('position', function(){
        if(scope.position.length > 0) move(scope.position);
      }, true);

      function move(pos){
        element.css({
          visibility: 'visible',
          left:  pos[0] + 'px',
          top: pos[1] + 'px'
        });
      }
    }
  };
});

Aquí hay un plunker en funcionamiento.

1
TheDude 7 sep. 2018 a las 18:07

Para el posicionamiento, uso esto en javascript:

<img src="http://www.google.com/favicon.ico" alt="" ng-click="mark($event)" 
    style="position: absolute; width: 50%; left: 0px; top: 0px; bottom: 0px;"/>

Eso siempre hará que el objeto aparezca en la parte izquierda de la página. Agregas esto a tu otra imagen:

style="position: absolute; width: 25%; left: 0px; top: 0px; bottom: 50%;"

Y eso debería poner su otra imagen en la parte superior a la mitad del ancho y la altura.

Espero que sea lo que estás buscando. Buena suerte

1
O.B 7 sep. 2018 a las 14:19

Al hacer clic en el evento / función de la imagen 1, establezca las variables de posición, luego vincule la posición de otros elementos a esas variables usando ng-style (También puede usar un ng-show en el segundo elemento y establecerlo como verdadero en la función img1 click para ocultar / mostrar el elemento solo después de hacer clic)

<!-- this is the image that will show after clicking img 1 -->
<img src="http://www.google.com/favicon.ico" width="100"
     ng-show="$scope.clickedImg1" style="position: absolute; width: 50%;"
     ng-style="{'left': $scope.posx, 'top': $scope.posy}"/>

Algo de esa naturaleza de todos modos, esto le permitirá mover dinámicamente el elemento cambiando las variables "posx" y "posy".

Posx y posy deben establecerse como una cadena así:

$scope.posx = someXInt + 'px';
$scope.posy = someYint + 'px';
1
georgeawg 7 sep. 2018 a las 17:13