Agregar una imagen SVG avanzada

Agregue una imagen SVG avanzada al lienzo para cambiar las propiedades de las partes individuales de la imagen en tiempo de diseño o en tiempo de ejecución.
CONSEJO: Por ejemplo, para señalar el mal funcionamiento de una pieza de hardware, resalte una representación de componentes de hardware.
Requisitos previos
Para controlar las propiedades de la imagen, obtenga un archivo SVG que cumpla estos requisitos:
  • El formato de archivo es SVG 1.2 Tiny
  • El archivo contiene todos los elementos y propiedades de la imagen que desea configurar
  • Hay propiedades de relleno y trazo que tienen colores definidos como atributos XML o CSS en línea
  • Los valores de color son hexadecimales
CONSEJO: Si el archivo SVG no cumple con los requisitos, la imagen se mostrará según lo esperado, pero no podrá cambiar sus propiedades.
  1. Para agregar una imagen SVG avanzada
  2. En
    Vista del proyecto
    , haga clic con el botón derecho en el objeto o en la carpeta que contendrá la imagen y seleccione
    Nuevo
    Dibujos
    Imagen SVG avanzada
    .
  3. Seleccione la imagen que desea incluir:
    • En
      Propiedades
      , junto a
      Ruta de acceso
      , seleccione
      Examinar
       y seleccione una imagen para incluirla en su aplicación.
    • En el editor, haga doble clic en
      Icono de imagen
       y seleccione una imagen para incluirla en su aplicación.
    CONSEJO:
    Para encontrar elementos, empiece a escribir el nombre del elemento que debe buscar en
    Seleccionar archivo
    .
    Si el archivo no aparece en
    Seleccionar archivo
    , seleccione
    Icono Importar archivos
    Importar archivo(s)
     y en
    Importar archivo(s)
    , seleccione el archivo que desee importar y elija
    Seleccionar
    .
  4. (Opcional) Abra el archivo SVG en un editor de texto y compruebe que tanto el atributo
    @id
     del elemento de la imagen que desea cambiar como la propiedad que desea modificar estén presentes en el archivo SVG.
    Por ejemplo, para poder cambiar el estilo de polígono de un chasis:
    <g id="
    ConveyorChassis
    ">
    <polygon style="fill:#3C4660;" points="8.532,379.733 503.466,379.733 503.466,277.333 8.532,277.333"/>
</g>
  5. En
    Propiedades
    , expanda
    Propiedades del elemento SVG
     y después, en
    ID
    , seleccione el elemento de imagen que desee cambiar.
    CONSEJO: Las opciones desplegables de los elementos de archivos SVG corresponden a los atributos
    @id
     de los elementos del archivo SVG. Si los valores no aparecen en el menú desplegable, es posible que la imagen SVG no cumpla los requisitos necesarios para controlar las propiedades de la imagen.
  6. En
    Propiedad
    , seleccione la propiedad que desea cambiar para el elemento de imagen seleccionado y, a continuación, en
    Valor
    , seleccione
    Icono Agregar vínculo dinámico
    Agregar vínculo dinámico
     para crear un vínculo dinámico complejo o introduzca un valor para la propiedad indicada:
    • Color
      . Seleccione o introduzca el valor hexadecimal del color o cree un vínculo dinámico complejo con un convertidor a valores de color hexadecimales. Por ejemplo:
      La captura de pantalla muestra la configuración del convertidor condicional. El valor verdadero usa rojo (#f51616), el valor falso usa negro (#000000) y el vínculo dinámico de condición dirige a ConveyorChassisMalfunctionAlarmVariable.
    • Opacidad
      . Introduzca un valor entre 0 y 100 para que el elemento de imagen sea completamente transparente o completamente opaco.
    • Ancho de trazo
      . Introduzca el ancho de línea en píxeles.
    • Dasharray de trazo
      . Especifique la matriz de guiones de una de las siguientes maneras:
      • Seleccione o introduzca
        Sólido
        . Este es el valor predeterminado.
      • Introducir un solo número. El número representa tanto la longitud del guión como la longitud del espacio entre los guiones. Por ejemplo, introduzca 5 para que tanto la longitud del guión como la longitud del espacio entre los guiones sea de 5 píxeles.
      • Configurar una serie de números separados por punto y coma en el formato repetible #;#. El primer número representa la longitud del guión y el número después de cada punto y coma representa la longitud del espacio entre los guiones. Se repetirá la serie introducida. Por ejemplo, introduzca 5; 2; 10; 3 para que el primer guión sea de cinco píxeles y el espacio después de ese guión sea de dos píxeles, seguido de otro guión de 10 píxeles y un espacio de 3 píxeles. La serie se repite para mostrar el guión más corto seguido de un guión más largo para toda la línea.
    CONSEJO:
    Al enlazar la propiedad dasharray a una variable de cadena o etiqueta en un controlador, un valor de cadena no válido da como resultado el valor de la propiedad dasharray cuando dicho valor cambia al valor del archivo SVG en tiempo de ejecución.
    Por ejemplo, si la matriz de guiones se define como una línea continua en el SVG avanzado, pero actualmente se muestra como un patrón de guiones, si el valor de la etiqueta enlazada en la propiedad dasharray cambia a un valor no válido, como abc, o contiene un error tipográfico de formato de cadena, como 1;5:8, el valor vuelve a la línea continua especificada en el archivo SVG.
    La propiedad que seleccione para el elemento de imagen debe estar en el archivo de imagen SVG junto con el elemento de imagen o, de lo contrario, no podrá configurar la propiedad del elemento de imagen.
  7. Para agregar una propiedad adicional para SVG, junto a
    Propiedades del elemento SVG
    , seleccione
    Icono Agregar en negro
     y luego repita los pasos 4 y 5.
    Por ejemplo, si ha configurado
    Color
     para un elemento de imagen SVG, puede agregar una propiedad
    Opacidad
     para cambiar la opacidad de ese mismo elemento de imagen o de un elemento de imagen diferente.
  8. Para cambiar las propiedades predeterminadas del SVG, en
    Propiedades
    , expanda
    Aspecto
     y cambie las propiedades creando un vínculo dinámico complejo o introduciendo un valor.
  9. (Opcional) En
    Propiedades
    , edite la configuración de
    Aspecto
    :
    • Visible
      . Muestra el objeto en tiempo de ejecución.
    • Habilitado
      . Habilita la interacción con el objeto en tiempo de ejecución.
    • Opacidad
      . Nivel de opacidad del objeto en porcentajes. Establézcalo como
      0
       para que el objeto sea transparente.
    • Parpadeo
      . Hace parpadear el objeto en tiempo de ejecución.
    • Rotación
      . Gira el objeto alrededor de su punto central (en grados de arco). Los valores positivos giran el objeto en el sentido de las agujas del reloj; los valores negativos giran el objeto en sentido contrario a las agujas del reloj.
    • Visible con clic
      . Intercepta las selecciones del usuario. Falso de forma predeterminada: las selecciones del usuario no se interceptan y se pasan al objeto subyacente.
    • Modo de relleno
      . Seleccione:
      • Ajustar
        . El objeto mantiene su relación de aspecto original cuando se cambia el tamaño.
      • Estirar
        . El objeto rellena el contenedor e ignora su relación de aspecto original cuando se cambia el tamaño.
      • Mosaico
        . El objeto mantiene su relación de aspecto original cuando cambia de tamaño y repite la imagen en su interior.
    • Modo de coloración
      . Establece el modo de coloración de la imagen. Las opciones disponibles incluyen:
      Reemplazar
      ,
      Tono
      ,
      Multiplicar
      ,
      Agregar
      .
    • Elemento que mover
      . Consulte Convertir un objeto gráfico en movible.
  10. (Opcional) Para cambiar el tamaño, mover o alinear el objeto, consulte Diseño de objetos gráficos.
  11. (Opcional) En
    Eventos
    , agregue métodos a los eventos existentes o agregue eventos y métodos nuevos. Vea Eventos y Métodos.
Ejemplo de imagen SVG avanzada: alarma deshabilitada (chasis del transportador gris)
Icono de chasis del transportador con un conmutador de alarma deshabilitado.
Ejemplo de imagen SVG avanzada: alarma habilitada (chasis del transportador rojo)
Icono de chasis del transportador con un interruptor para activar una alarma de mal funcionamiento.
Entregue su opinión
¿Tiene dudas o comentarios acerca de esta documentación? Por favor deje su opinión aquí.
Normal