Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to get x,y position of control in control library #195

Open
deepaksm1 opened this issue Nov 20, 2015 · 10 comments
Open

How to get x,y position of control in control library #195

deepaksm1 opened this issue Nov 20, 2015 · 10 comments
Labels

Comments

@deepaksm1
Copy link

I am developing image crop control. Please let me know how to find control location points X,Y on screen. (In control library I want to find out location of image on screen. Image is child of my control)

@BSick7
Copy link
Member

BSick7 commented Nov 20, 2015

When you respond to a mouse event, you can use args: MouseEventArgs to find a position. https://github.com/wsick/Fayde/blob/master/src/Input/MouseEventArgs.ts

You can use args.GetPosition(...) and pass in the UIElement you want to use as a basis. The resulting Point will be relative to the top-left coordinate of that UIElement.

@deepaksm1
Copy link
Author

I am not using it on mouse action. I want to get partial image data to crop image on another button click.

@deepaksm1
Copy link
Author

Is there any other way to do this?

@BSick7
Copy link
Member

BSick7 commented Nov 20, 2015

I'm guessing you have some decorator that represents the crop section and you want to figure out where that section is located within the image. Is that correct?

@deepaksm1
Copy link
Author

Yes exactly

@deepaksm1
Copy link
Author

It's done. Used below code to get coordinates

  var startPoint = new Point(0, 0);
            var p2 = minerva.vec2.create(startPoint.x, startPoint.y);            
            minerva.mat3.transformVec2(this.ControlImage.XamlNode.LayoutUpdater.assets.absoluteXform, p2);
            startPoint = new Point(p2[0], p2[1]);

@deepaksm1
Copy link
Author

I am able to get cropped image data using canvas functionality using below code:

var canvas = document.getElementsByTagName("canvas")[0];
var ctx = canvas.getContext("2d");
var imgData = ctx.getImageData(startx, starty, iwidth, iheight);

How can I set this cropped image data again to Image control?
"imgData.data" returns number[] but BitmapImage.SetSource accepts array buffer. How I can convert number[] to ArrayBuffer?

imagecrop

@BSick7
Copy link
Member

BSick7 commented Nov 24, 2015

The absoluteXform is a good find; however, I would recommend against this approach as it's very internal to the system and may not operate exactly how you intend.

Instead, I would recommend putting the Image and crop visual in some Panel (Canvas, Grid, Panel, etc.). You can then use Fayde.LayoutInformation to query the layout slot. By placing the 2 visuals in the same Panel, you are guaranteed that the layout slots are relative to the parent. The difference between the 2 layout slots is exactly the information you're searching.

@BSick7
Copy link
Member

BSick7 commented Nov 24, 2015

Regarding slicing image data

imgData is ImageData.

This interface exposes data: Uint8ClampedArray which, just like other typed arrays, has a buffer member.

I will probably start making some image editing utilites that are well tested, but until then, you can use what you have now to grab the image data and send it to SetSource(imgData.data.buffer).

@deepaksm1
Copy link
Author

Ok Thanks, I will try this approach...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants