touch pointer problem

[nenge123]

Please allow me to express better in my native language!

花费我了一天,仍未解决

下面代码是原来的鼠标"mousedown,mouseup,mousemove"

mednafen_psx_hw_libretro.js

    function fillMouseEventData(eventStruct, e, target) {
        var idx = eventStruct >> 2;
        HEAP32[idx + 0] = e.screenX;
        HEAP32[idx + 1] = e.screenY;
        HEAP32[idx + 2] = e.clientX;
        HEAP32[idx + 3] = e.clientY;
        HEAP32[idx + 4] = e.ctrlKey;
        HEAP32[idx + 5] = e.shiftKey;
        HEAP32[idx + 6] = e.altKey;
        HEAP32[idx + 7] = e.metaKey;
        HEAP16[idx * 2 + 16] = e.button;
        HEAP16[idx * 2 + 17] = e.buttons;
        HEAP32[idx + 9] = e["movementX"];
        HEAP32[idx + 10] = e["movementY"];
        var rect = getBoundingClientRect(target);
        HEAP32[idx + 11] = e.clientX - rect.left;
        HEAP32[idx + 12] = e.clientY - rect.top
    }

由于我使用了

• <canvas id="canvas" width="960" height="720"></canvas>
• widthNative:960
• heightNative:720
• getBoundingClientRect:{width:414,height:896}
• 因为"canvas "越大越清晰!

导致问题

因为大小不一致,会导致鼠标指针异常!所以使用以下代码修复.

• 但是移动端出现问题
• F12
• edge浏览器,
• 移动端模式
• 指针异常,不论我如何调整总有差异,不准确.

    function fillMouseEventData(eventStruct, e, target) {
        var idx = eventStruct >> 2;
        HEAP32[idx + 0] = e.screenX;
        HEAP32[idx + 1] = e.screenY;
        HEAP32[idx + 2] = e.clientX;
        HEAP32[idx + 3] = e.clientY;
        HEAP32[idx + 4] = e.ctrlKey;
        HEAP32[idx + 5] = e.shiftKey;
        HEAP32[idx + 6] = e.altKey;
        HEAP32[idx + 7] = e.metaKey;
        HEAP16[idx * 2 + 16] = e.button;
        HEAP16[idx * 2 + 17] = e.buttons;
        HEAP32[idx + 9] = e["movementX"];
        HEAP32[idx + 10] = e["movementY"];
        var rect = getBoundingClientRect(target);
        if(target.widthNative!=rect.width){
            let sacl = target.widthNative/rect.width;
            HEAP32[idx + 11] = Math.ceil((e.clientX - rect.left)*sacl);
            HEAP32[idx + 12] = Math.ceil((e.clientY - rect.top)*sacl);
        }
        HEAP32[idx + 11] = e.clientX - rect.left;
        HEAP32[idx + 12] = e.clientY - rect.top
    }

[BinBashBanana]

I think I understand, the pointer position is incorrect? This is caused by my code for proper scaling, but you haven't implemented it on your UI.

You need to resize the canvas so that the CSS width/height are the real width/height on the page, but the width/height HTML attributes are the width/height used by the WASM application.

var elementWidth = 960;
var elementHeight = 720;

canvas.style.setProperty("width", elementWidth + "px", "important");
canvas.style.setProperty("height", elementHeight + "px", "important");
canvas.width = elementWidth * window.devicePixelRatio;
canvas.height = elementHeight * window.devicePixelRatio;

This code will also make the image a lot clearer.

[nenge123]

nono,i need a bigest "canvas".

The larger the canvas, the clearer the image.

can you open the retroarch.nenge.net using f12 console,moble mode.

click "open" the "psx"

clixk "test" to start

[BinBashBanana]

Larger canvas doesn't mean clearer image. The code I sent adjusted the internal dimensions of the canvas so that the canvas would stay the same size but the image would become clear.

Here is a more updated method that should work for you:

function adjustCanvasSize(width, height) {
    canvas.style.setProperty("width", width + "px", "important");
    canvas.style.setProperty("height", height + "px", "important");

    var dpr = window.devicePixelRatio || 1;
    if (Module && Module.setCanvasSize) {
        Module.setCanvasSize(width * dpr, height * dpr);
    } else {
        canvas.width = width * dpr;
        canvas.height = height * dpr;
    }
}

adjustCanvasSize(960, 720);

// optionally attach this to a window resize event listener

[nenge123]

adjustCanvasSize is like my code.nothing change.

if using style transform scale is not need hack js. but this one will add top:-xxx;left:-xxx;

[BinBashBanana]

You shouldn't use style transform scale, using different CSS dimensions and HTML attribute dimensions is not a hacky thing to do.

[BinBashBanana]

Can I close this issue now?