Jump to content

Recommended Posts

I'm working on an application which allows to make image processing, so I used Javascript and PixiJS library to make it possible. I wanted to update cursor image when canvas was hovered

first solution I tried to use cursor: url(cursor1.png) 4 12, auto; but I can't resize cursor. The default size is 64px and I can't set another value.

second solution I decided to add into DOM <img src=""> and update x,y position using Javascript but I got latency.

third solution was to integrate cursor inside my canvas.

last solution I tried to split actions into 2 canvas. The first deals with image processing and the second is my cursor.

With all propositions made before I got loss of FPS when canvas is hovered excepted the first one.

Init canvas for cursor update when mouse hover it

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(),
    width: imgData.width,
    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);
}

Init canvas for cursor update when mouse hover it

function _initCursorCanvas(imgData) {
  let cursorCanvas = new PIXI.Application({
    width: imgData.width,
    height: imgData.height,
    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);
}

Mousemove event

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

cursor.updatePosition(x, y, W);

Sorry I can't show you an example like codesandbox because my browser but my browser was not responding. However I can send you github repo if you want. Will anyone know how to optimize FPS on mouse flying, thank you in advance !

Link to post
Share on other sites

getBlurs() returns sprite or graphics?

Sprite mask is a filter. One fullscreen filter should work fine. If its not, your computer is basically not webgl-capable.

I think that if mask slows everything down - you have a problem with computer. If its apple MBP < 2017, it has slow videocard for those 4k pixels, the only way to fix that is to reduce the resolution of canvas. If its not apple, check update graphics driver.

If you work with image processing, well, you can add a flag whether something on stage or just base container (under mask) was changed , and if it was - re-render it. Read https://github.com/pixijs/pixijs/wiki/v5-Custom-Application-GameLoop if you want to know how to do that. For just container - use renderTexture same size as screen.

Edited by ivan.popelyshev
Link to post
Share on other sites

Thank you for details, getBlurs returns graphics.

I will show your link It can be help me to avoid latency. I have a Asus VivoBook-15-ASUS-Laptop-X507UAR with an i5 8th gen, 8Go RAM, and Mesa Intel® UHD Graphics 620 (KBL GT2).

I used this example to build my app. I wanted to add a custom cursor when mouseover. Canvas is set to 3000 * 1500px, is it too wide ? Example provided to the documentation is it compatible with my need ?

Link to post
Share on other sites

> Thank you for details, getBlurs returns graphics.

That's a stencil mask, its different. Should be faster than sprite mask (filter) but browser vendors sometimes make it wrong.

If filter example works for you at 3000x1500, you can try switch to sprite mask. Basically, you need to render your graphics into renderTexture of size of screen, and use sprite with this texture as a mask.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...