Tengo un triángulo con una función de javascript que se mueve la imagen.

El problema es que el elemento tiene una forma cuadrada para haga clic y arrastre el estado se activan recorren el triángulo (véase la parte roja en la siguiente imagen) :

Pase y haga clic en el triángulo de CSS

¿Cómo puedo evitar que pase y haga clic fuera de la forma de triángulo y haga clic en permitir o hover estado sólo dentro de la forma de triángulo?

  • Es esta una solución válida? fileformat.info/info/unicode/char/25b2/index.htm
  • Frambach por desgracia no, pero gracias por la idea
  • Es esta imagen PNG con algunas piezas transparentes? ¿Está buscando para detectar si el píxel el usuario ha hecho clic en es transparente u opaco? Puede que la imagen sea nada, o es siempre un triángulo de esa forma?
  • Sé que una solución para usted, pero podría añadir algo de código para poder entender completamente el problema?
  • ok, gracias por la respuesta, aquí está el violín: jsfiddle.net/EdB27/1
InformationsquelleAutor gn66 | 2014-06-06

4 Comentarios

  1. 14

    A evitar que pase y haga clic fuera de la CSS triángulo puede utilizar transforma para hacer que el triángulo.

    Esta técnica se describe a continuación : CSS Triángulos con transformar girar

    El punto es utilizar un contenedor con ocultos de desbordamiento y gire el clickable/hoverable elemento para que realmente tiene una forma triangular y prevenir el evento click o pase estado fuera del triángulo.

    Demo: Haga clic en y pasa el ratón sobre un triángulo de CSS

    Pase y haga clic en el triángulo de CSS

    CSS:

    .tr {
      width: 40%;
      padding-bottom: 28.2842712474619%; /* = width /sqrt(2) */
      position: relative;
      overflow: hidden;
    }
    .tr a {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background-color: rgba(0, 122, 199, 0.7);
      transform-origin: 0 100%;
      transform: rotate(45deg);
      transition: background-color .3s;
    }
    /** hover effect **/
    .tr a:hover {
      background: rgba(255, 165, 0, 0.7);
    }

    HTML:

    <div class="tr"><a href="#"></a></div>


    Otro enfoque sería utilizar una SVG con un clickable triángulo :

    CSS:

    #tr{
      fill:transparent;
      transition:fill .3s;
    }
    #tr:hover{
      fill: orange;
    }
    
    /** for the demo **/
    html,body{height:100%;margin:0; padding:0;}
    body{background:url('https://farm8.staticflickr.com/7435/13629508935_62a5ddf8ec_c.jpg') center no-repeat;background-size:contain;}
    svg{display:block;width:30%;margin:0 auto;}

    HTML:

    <svg viewbox="-2 -2 104 64">
      <a xlink:href="#">
        <polygon id="tr" points="50 0 100 60 0 60" fill="transparent" stroke="darkorange" stroke-width="2"/>
      </a>
    </svg>

    • Ok, realmente gracias acerca de la respuesta, he actualizado aquí: jsfiddle.net/EdB27/2 para que usted también ver todo lo que acaba de funcionar bien, solo una cosa que me necesita si usted no importa, se puede integrar esta imagen en el código? static.tumblr.com/g1c47pc/7iMn39g0v/tr1.png , realmente no estoy teniendo éxito integrar una imagen con el código que hemos hecho hasta ahora :S
    • ok, yo lo hice: jsfiddle.net/H8g3j/1 Gracias de todos modos…
    • me alegro de que encontró una solución!
    • funciona en chrome, pero no funciona en iceweasel (estándar de navegador en última linux-ccrunchbang versión) 24.5.0…
    • usted me tenga en cuenta que he cometido un error tipográfico para no webkit o ms de los navegadores, me fijo que el error y la esperanza también fijará en iceweasel
  2. 4

    Usted debería ser capaz de simplemente utilizar un mapa de imagen. Basta con crear un poli que cubre el triángulo por la configuración de la coords a (w/2, 0), (w, h), (0, h) donde w y h son la anchura y la altura. (Suponiendo un triángulo equilátero como en tu ejemplo. De lo contrario, acaba de encontrar los puntos con un editor de imágenes.)

    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7f/Green_equilateral_triangle_point_up.svg/600px-Green_equilateral_triangle_point_up.svg.png"
         width="60" height="52"
         usemap="#imgmap" />
    
    <map name="imgmap">
        <area href="javascript:alert('Triggered')"
              shape="poly"
              coords="30,0,60,52,0,52"
              style="outline:none;"
              target="_self" />
    </map>

    Demo: http://jsfiddle.net/QXv2c/

    • Hola, u puede ver cuál es el problema aquí? jsfiddle.net/QXv2c/1
    • Me he fijado su JSFiddle aquí: jsfiddle.net/QXv2c/2. No se había incluido el MoverBehaviour y no había ningún elemento con el id «yo». Aparte de que estaba bien.
  3. 3

    Esto debería funcionar:   (basado en Brian Nickel respuesta a otra pregunta)

    $('#triangle').mousedown(function(e) {
        e.preventDefault();
    
        //create matching canvas representation for the image
        if(!this.canvas) {
            this.canvas = $('<canvas/>')[0];
            this.canvas.width = this.width;
            this.canvas.height = this.height;
            this.canvas.getContext('2d').drawImage(this, 0, 0, this.width, this.height);
        }
        var pixelData = this.canvas.getContext('2d').getImageData(e.offsetX, e.offsetY, 1, 1).data;
    
        //check that the pixel is not transparent
        if (pixelData[3] > 0) {
            //your code
        }
    });

    De trabajo ejemplo: http://jsfiddle.net/FCf9d/

    Esta solución se supone que no hay píxeles transparentes en el interior del triángulo.

    En este ejemplo se utiliza la jsfiddle logotipo en lugar de un triángulo, porque no puedes usar las imágenes remotas. El jsfiddle-logotipo funciona porque es en el jsFiddle-dominio, sino que cualquier otra al azar de la imagen no funciona.

    Pero eso no debería ser un problema una vez que se implemente el código en su sitio web.


    Me tomé la libertad de añadir el movimiento-función para el violín para usted así que usted puede ver todo en la acción. Si te gusta mi script y quisiera agregar fronteras para el movimiento de la zona, echa un vistazo a otra de violín de la mina que tiene esas construir en: http://jsfiddle.net/SN8Ys/

  4. 2

    Tomado de CSS-tricks. Esta es una buena solución, sin embargo, yo no estoy seguro sobre el clic de la parte. Tal vez usted puede utilizar para enmascarar lo que tienes.

    HTML:

    <div class="arrow-up"></div>
    <div class="arrow-down"></div>
    <div class="arrow-left"></div>
    <div class="arrow-right"></div>

    CSS:

    .arrow-up {
        width: 0; 
        height: 0; 
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
    
        border-bottom: 5px solid black;
    }
    
    .arrow-down {
        width: 0; 
        height: 0; 
        border-left: 20px solid transparent;
        border-right: 20px solid transparent;
    
        border-top: 20px solid #f00;
    }
    
    .arrow-right {
        width: 0; 
        height: 0; 
        border-top: 60px solid transparent;
        border-bottom: 60px solid transparent;
    
        border-left: 60px solid green;
    }
    
    .arrow-left {
        width: 0; 
        height: 0; 
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent; 
    
        border-right:10px solid blue; 
    }

    Fuente: http://css-tricks.com/snippets/css/css-triangle/

    • A pesar del título, parece que el OP ha creado el triángulo. La pregunta es acerca de hacer clic en: «¿hay una manera de evitar que mi ratón para seleccionar la parte roja?»
    • Sí, eso es, gracias, voy a editarlo.
    • La pregunta del título originalmente especificados de un CSS triángulo. Desde entonces, se ha editado.

Dejar respuesta

Please enter your comment!
Please enter your name here