#

Junjie

7 天以前 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;
        },
@@ -764,17 +762,8 @@
                  }

                  const status = crns[i].crnStatus;
                  if (status === "machine-auto") {
                    sprite.tint = 0x21BA45;
                  } else if (status === "machine-un-auto") {
                    sprite.tint = 0xBBBBBB;
                  } else if (status === "machine-error") {
                    sprite.tint = 0xDB2828;
                  } else if (status === "machine-p-move") {
                    sprite.tint = 0xF2C037;
                  } else {
                    sprite.tint = 0xFFFFFF;
                  }
                  const statusColor = getCrnStatusColor(status);
                  updateCrnTextureColor(sprite, statusColor);

                  let bay = parseInt(crns[i].bay, 10);
                  if (isNaN(bay) || bay < 1 || bay === -2) {
@@ -859,7 +848,7 @@
      let graphics = new PIXI.Graphics();
      let drawBorder = true;
      if (type == 'shelf') {
        graphics.beginFill(0x55aaff);
        graphics.beginFill(0xb6e2e2);
      } else if (type == 'devp') {
        graphics.beginFill(0x00ff7f);
        graphics.visible = true;
@@ -940,6 +929,56 @@
      return rt;
    }

    function createCrnTextureColoredDevice(deviceWidth, height, color) {
      const g = new PIXI.Graphics();
      const yTop = Math.round(height * 0.1);
      g.beginFill(0x999999);
      g.drawRect(2, yTop, 3, height - yTop - 2);
      g.drawRect(deviceWidth - 5, yTop, 3, height - yTop - 2);
      g.endFill();
      g.beginFill(0x999999);
      g.drawRect(0, yTop, deviceWidth, 3);
      g.endFill();
      const cabW = Math.round(deviceWidth * 0.68);
      const cabH = Math.round(height * 0.38);
      const cabX = Math.round((deviceWidth - cabW) / 2);
      const cabY = Math.round(height * 0.52 - cabH / 2);
      g.beginFill(color);
      g.drawRect(cabX, cabY, cabW, cabH);
      g.endFill();
      const winW = Math.round(cabW * 0.6);
      const winH = Math.round(cabH * 0.45);
      const winX = cabX + Math.round((cabW - winW) / 2);
      const winY = cabY + Math.round((cabH - winH) / 2);
      g.beginFill(0xd0e8ff);
      g.drawRect(winX, winY, winW, winH);
      g.endFill();
      const forkW = Math.round(deviceWidth * 0.8);
      const forkH = Math.max(2, Math.round(height * 0.08));
      const forkX = Math.round((deviceWidth - forkW) / 2);
      const forkY = cabY + cabH;
      g.beginFill(0x666666);
      g.drawRect(forkX, forkY, forkW, forkH);
      g.endFill();
      const rt = PIXI.RenderTexture.create({ width: deviceWidth, height: height });
      pixiApp.renderer.render(g, rt);
      return rt;
    }

    function updateCrnTextureColor(sprite, color) {
      const tex = createCrnTextureColoredDevice(sprite.width, sprite.height, color);
      sprite.texture = tex;
    }

    function getCrnStatusColor(status) {
      if (status === "machine-auto") { return 0x21BA45; }
      if (status === "machine-un-auto") { return 0xBBBBBB; }
      if (status === "machine-error") { return 0xDB2828; }
      if (status === "machine-pakin") { return 0x30bffc; }
      if (status === "machine-pakout") { return 0x97b400; }
      return 0xBBBBBB;
    }

    function getGraphics(color, width, height, x, y) {
      let graphics = new PIXI.Graphics();
      graphics.beginFill(color);