使用掩码损失 FPS

如何解决使用掩码损失 FPS

我正在开发一个允许进行图像处理的应用程序，所以我使用了 Javascript 和 PixiJS 库来使它成为可能。我想在画布悬停时更新光标图像

第一个解决方案 我尝试使用 cursor: url(cursor1.png) 4 12,auto;但我无法调整光标大小。默认大小为 64px，我无法设置其他值。

第二种解决方案我决定添加到 DOM 并使用 Javascript 更新 x,y 位置，但我遇到了延迟。

第三个解决方案是将光标集成到我的画布中。

最后一个解决方案我试图将动作分成 2 个画布。第一个处理图像处理，第二个是我的光标。

在画布悬停时我失去 FPS 之前提出的所有建议，第一个除外。

用于图像处理的初始化主画布

function _initMainCanvas(imgData) {
  let newCanvas = new PIXI.Application({
    width: imgData.width,height: imgData.height,transparent: true
  });

  let blurContainer = new PIXI.Container();

  filters.initFilters();

  // ----------------------------------------------------------------------------------------
  //      normal Sprite
  // ----------------------------------------------------------------------------------------

  let bg = main.createSprite({
    from: imgData.img,interactive: true,filters: [filters.getFilterSharpen(),filters.getFilteradjustment()],width: imgData.width,height: imgData.height
  });
  newCanvas.stage.addChild(bg);

  //$(".blur_cursor").remove();

  // ----------------------------------------------------------------------------------------
  //      Blur Sprite
  // ----------------------------------------------------------------------------------------

  let bgBlured = main.createSprite({
    from: imgData.img,interactive: false,filters: filters.getFilters(),height: imgData.height
  });
  blurContainer.addChild(bgBlured);
  blurContainer.mask = containers.getBlurs();

  newCanvas.stage.addChild(blurContainer);
  newCanvas.stage.addChild(blurContainer);

  select.initSelectionRect();
  newCanvas.stage.addChild(select.getSelectionRect());

  canvas.addMainCanvas(newCanvas);
  document.getElementById("container").appendChild(newCanvas.view);
}

鼠标悬停时初始化画布以更新光标

function _initCursorCanvas(imgData) {
  let cursorCanvas = new PIXI.Application({
    width: imgData.width,transparent: true
  });

  _fillCursorCanvas(cursorCanvas);

  canvas.addCursorCanvas(cursorCanvas);

  document.getElementById("container").appendChild(cursorCanvas.view);
}

function _fillCursorCanvas(cursorCanvas) {
  // emptySprite allows to bind events
  let emptySprite = new PIXI.Sprite();
  emptySprite.interactive = true;
  emptySprite.width = cursorCanvas.screen.width;
  emptySprite.height = cursorCanvas.screen.height;
  cursorCanvas.stage.addChild(emptySprite);

  emptySprite
    .on("pointerdown",canvasEvents.handlerMousedown)
    .on("pointerup",canvasEvents.handlerMouseup)
    .on("pointermove",canvasEvents.handlerMousemove)
    .on("pointerout",canvasEvents.handlerMouSEOut);

  const scale = W / canvas.getWidth();
  const cursorTexture = new PIXI.Texture.from(
    urlManager.replace("index.PHP/","") + "assets/images/cursor_img/50.png"
  );

  let circle = new PIXI.Sprite(cursorTexture);
  circle.width = 50 / scale;
  circle.height = 50 / scale;

  cursorCanvas.stage.addChild(circle);
}

鼠标移动事件

const x = e.data.global.x;
const y = e.data.global.y;

cursor.updatePosition(x,y,W);

有谁知道如何优化鼠标飞行的FPS，先谢谢了！

解决方法

为什么你需要第二个画布？ 如果你想更新游标，请在更新循环结束时进行，仅此而已，不要为此创建一个新画布。