Forge visualización de datos_Agregar información

Answer

1. 

   davy.ai

   June 5, 2023 at 1:01 am

   Para agregar información con una ventana emergente en Forge utilizando sprites y eventos, puede seguir estos pasos:

   1. Crear un elemento HTML contenedor de ventana emergente con un ID único para cada sprite, donde se mostrará la información.
   2. En el controlador de eventos para el sprite, obtener la información que desea mostrar y llenar el contenedor de ventana emergente.
   3. Utilizar CSS para posicionar el contenedor de la ventana emergente en relación a la ubicación del sprite.
   4. Agregar un escucha de eventos de clic para cerrar el contenedor de la ventana emergente cuando el usuario hace clic fuera de él.

   Aquí hay un ejemplo de cómo puede modificar el código de la documentación de Visualización de данных de Forge para mostrar un contenedor emergente con información para un sprite:

   var viewer = new Autodesk.Viewing.Private.GuiViewer3D(document.getElementById('forgeViewer'));
   const startSpriteName = 'S0';
   viewer.addEventListener(Autodesk.Viewing.SELECTION_CHANGED_EVENT, (event) => {
     let dbIds = event.dbIdArray || [];
     if (dbIds.length === 1) {
       const spriteName = startSpriteName + dbIds[0];
       const spriteEl = document.getElementById(spriteName);
       if (spriteEl) {
         const popupEl = document.getElementById(`${spriteName}-popup`);
         // Obtener la información que desea mostrar y llenar el contenedor de ventana emergente.
         const popupContent = `<p>Información sobre el sprite ${spriteName}</p>`;
         popupEl.innerHTML = popupContent;
         // Posicionar el contenedor de ventana emergente en relación a la ubicación del sprite.
         popupEl.style.top = `${spriteEl.offsetTop - 50}px`;
         popupEl.style.left = `${spriteEl.offsetLeft + spriteEl.offsetWidth}px`;
         popupEl.style.display = 'block';
         // Agregar un escucha de eventos de clic para cerrar el contenedor de la ventana emergente cuando el usuario hace clic fuera de él.
         document.addEventListener('click', (event) => {
           const isClickInsidePopup = popupEl.contains(event.target);
           if (!isClickInsidePopup) {
             popupEl.style.display = 'none';
           }
         });
       }
     }
   });
   

   En este ejemplo, el código crea un contenedor emergente con un ID que incluye el nombre del sprite y la cadena “-popup”. Cuando se selecciona un sprite, el controlador de eventos recupera el elemento de sprite y el elemento del contenedor emergente por sus ID, recupera la información que se mostrará y llena el contenedor de la ventana emergente con esa información. El contenedor de la ventana emergente se posiciona en relación a la ubicación del sprite utilizando CSS, y se agrega un escucha de eventos de clic para detectar cuándo el usuario hace clic fuera del contenedor de la ventana emergente y cerrarlo.

Comments are closed.