#

Junjie

5 天以前 a7441d24458b8b6ab34928743478c831fb348c06

#

 src/main/webapp/views/watch/console2.html

@@ -288,29 +288,16 @@
          pixiApp.view.addEventListener('wheel', (event) => {
            event.stopPropagation();
            event.preventDefault();
            // 因为画布是充满视窗的，所以clientX等于mouse point在renderer上的x坐标
            const globalPos = [event.clientX, event.clientY];
            const delta = event.deltaY;
            const sx = event.clientX;
            const sy = event.clientY;
            const oldZoom = pixiApp.stage.scale.x;
            const delta = event.deltaY;
            let newZoom = oldZoom * 0.999 ** delta;

            // const oldStageMatrix = app.stage.localTransform.clone();
            // const oldStagePos = oldStageMatrix.applyInverse(pointerGlobalPos);
            const oldStagePos = globalPos;
            const dx = oldStagePos[0] * oldZoom - oldStagePos[0] * newZoom;
            const dy = oldStagePos[1] * oldZoom - oldStagePos[1] * newZoom;

            pixiApp.stage.setTransform(
              pixiApp.stage.position.x + dx,
              pixiApp.stage.position.y + dy,
              newZoom,
              newZoom,
              0,
              0,
              0,
              0,
              0
            );
            const worldX = (sx - pixiApp.stage.position.x) / oldZoom;
            const worldY = (sy - pixiApp.stage.position.y) / oldZoom;
            const newPosX = sx - worldX * newZoom;
            const newPosY = sy - worldY * newZoom;
            pixiApp.stage.setTransform(newPosX, newPosY, newZoom, newZoom, 0, 0, 0, 0, 0);

          });
          //*******************缩放画布*******************
@@ -497,10 +484,21 @@
          })
          

          //视角居中
          let containerWidth = (pixiApp.view.width - objectsContainer.width) / 2;
          let containerHeight = (pixiApp.view.height - objectsContainer.height) / 2;
          pixiApp.stage.position.set(containerWidth, containerHeight);
          const b1 = objectsContainer.getLocalBounds();
          const b2 = objectsContainer2.getLocalBounds();
          const minX = Math.min(b1.x, b2.x);
          const minY = Math.min(b1.y, b2.y);
          const maxX = Math.max(b1.x + b1.width, b2.x + b2.width);
          const maxY = Math.max(b1.y + b1.height, b2.y + b2.height);
          const contentW = Math.max(0, maxX - minX);
          const contentH = Math.max(0, maxY - minY);
          const vw = pixiApp.view.width;
          const vh = pixiApp.view.height;
          let scale = Math.min(vw / contentW, vh / contentH) * 0.95;
          if (!isFinite(scale) || scale <= 0) { scale = 1; }
          const posX = (vw - contentW * scale) / 2 - minX * scale;
          const posY = (vh - contentH * scale) / 2 - minY * scale;
          pixiApp.stage.setTransform(posX, posY, scale, scale, 0, 0, 0, 0, 0);

          this.map = map;
        },