UI element following mouse when using "Scale With Screen Size"

Questions & Answers
1

When I change the “Canvas Scaler” from “Constant Pixel Size” to “Scale With Screen Size” my current code to have a UI element follow the mouse stops working.

Here is the old code:

Vector3 newPosition = (Input.mousePosition - canvas.GetComponent().localPosition);

cursorIcon.GetComponent().localPosition = newPosition;

What happens if I use the old code now is the icon position is either too far to the left(if mouse is on the right side of the screen) or too far right(if the mouse is on the left side of the screen).

Has anyone experienced this problem and know a solution?

3

I thought I’d clear this all up - when using a canvas scaler “Scale With Screen Size”, Screen coordinate space can vary with respect to Canvas space (because you canvas is scaling) - normally, plugging screen space coordinates (like Input.mousePosition) straight into canvas coordinates works fine, but the scaling canvas changes the canvas’s scale factor, thus changing the conversion factor between screen and canvas coordinates.

Basically, I had this code before:

float width = Input.mousePosition - startPos.x;
float height = Input.mousePosition - startPos.y;
dragSelector.sizeDelta = new Vector2 (width, height);

And I had to change it to this:

float scaleFactor = GetComponent<Canvas> ().scaleFactor;

dragSelector.sizeDelta = new Vector2 (width/scaleFactor, height/scaleFactor);

So it’s really just adding that scalar conversion to reverse the effects of the screen scaler.

2

I was able to get much closer to having the ui element follow the mouse by using this code.
But it still is not 100% correct.
The further it gets away from 0,0 the less accurate it is.

If anyone has any ideas let me know.

    public void OnPointerDown(PointerEventData data)
    {
        Vector2 mousePos = Input.mousePosition;

        Vector2 canvasPos = GetComponent<RectTransform>().localPosition;

        float xMultiplier = Constants.REFERENCE_RESOLUTION.x / Screen.width;
        float yMultiplier = Constants.REFERENCE_RESOLUTION.y / Screen.height;

        Vector2 imagePos = new Vector2(mousePos.x * xMultiplier, mousePos.y * yMultiplier);

        pfImage.GetComponent<RectTransform>().localPosition = imagePos;
    }