Sign in to follow this  
Stiffler

Drawing mouse selection area (rubber band)

Recommended Posts

Hi,

I'm new in Pixi, and I have a new job 

We are using pixi, unfortunately it is Pixi v3. I have small task to do and I'm doing pretty well with pixi so far, but I have to do something more complex. 

Basically I would like to create selecting area called (as I googled) rubber band. It is the same like you selecting couple of icons on windows desktop but on canvas. I was wondering how to do it. 
I think that the best it would be to create rectangle what resize on mouse move and calculate it by the mouse start and end coordination, it would be not so hard to achieve if user would try to select only from left to right, because that how we draw rectangles in pixi. Am I right? I don't have idea how to do it if user would select from right to left, how to draw this rectangle to looks like "selecting area".

Or maybe I am totally wrong and there is easier solution?

Anyway I would be appreciated of any help.

Best regards

Artur

Share this post


Link to post
Share on other sites

Uhm, I think identifying on which quadrant the mouse pointer currently is during the drag would be a good place to start ;) 

I mean, if mouse_pointer_current_position.X > selection_origin.X = it's left to right;

otherwise if mouse_pointer_current_position.X < selection_origin.X = you get the difference between those two x-axis values, then subtract it from selection_origin.X then you get your rectangle's X1.. correct?

Share this post


Link to post
Share on other sites

Seems fairly easy.

	var p1, p2 //your mouse points
	var x = Math.min(p1.x, p2.x)
	var y = Math.min(p1.y, p2.y)
	var width = Math.max(p1.x, p2.x) - x
	var height = Math.max(p1.y, p2.y) - y
	//draw your rectangle
	

Share this post


Link to post
Share on other sites

Hi,

I am trying to achieve the same results with Pixi-viewport's world coordinates. I didnt find any event in the pixi-viewport API that would give me the mouse-down / mouse-up coordinates, except drag-start and drag-end, but using those without actually dragging doesnt seem possible. 

Any idea how to get the world coordinates mouse points ?

Thanks

Share this post


Link to post
Share on other sites
1 hour ago, grosjardin said:

Hi,

I am trying to achieve the same results with Pixi-viewport's world coordinates. I didnt find any event in the pixi-viewport API that would give me the mouse-down / mouse-up coordinates, except drag-start and drag-end, but using those without actually dragging doesnt seem possible. 

Any idea how to get the world coordinates mouse points ?

Thanks

Does toWorld work? https://davidfig.github.io/pixi-viewport/jsdoc/Viewport.html#toWorld

Share this post


Link to post
Share on other sites
22 hours ago, Jammy said:

I'm not sure I understand how PIXI Point can help me. I still need a click event no?

What do I pass to toWorld() ?

 

EDIT: Thanks, this works

this.app.renderer.plugins.interaction.on('pointerdown', (e) => {
    this.rectangleStart = this.viewport.toWorld(e.data.global.x, e.data.global.y)
})
Edited by grosjardin

Share this post


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...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.