Something similar to a pulsing ring around a marker. What I want to achieve is this...
I have many polylines all having Lat/Lng. At a time t, a user can decide to pick any polyline of their choosing. I get their current real-time location coordinates via Bluetooth. I want to use that location to determine how far they are from the polyline they have selected and depending on the distance, change/animate that polyline. I am using google maps API, android studio, kotlin
Here's a simple example - a method which takes a Polyline instance and a handler (must be on main looper) and begins a repeating update to the polyline width.
(Added the Kotlin)
private lateinit var polyline: Polyline;
private lateinit var handler : Handler;
override fun onMapReady(googleMap: GoogleMap) {
mMap = googleMap
var ptlist = ArrayList<LatLng>();
// add polyline
ptlist.add(LatLng(40.437761, -3.704751));
ptlist.add(LatLng( 40.405072, -3.678678));
ptlist.add(LatLng( 40.397158, -3.742706));
ptlist.add(LatLng(40.437761, -3.704751));
handler = Handler(Looper.getMainLooper());
polyline = mMap.addPolyline(PolylineOptions().addAll(ptlist));
val runnableCode = object: Runnable {
override fun run() {
var w = polyline.width;
w = w + 0.5f;
if (w > 25.0) {
w = 1.0f;
}
polyline.setWidth(w);
handler.postDelayed(this, 50);
}
}
mMap.moveCamera(CameraUpdateFactory.newLatLngZoom(LatLng(40.415521, -3.700995), 12f));
handler.postDelayed(runnableCode, 50);
}
In this example, the witdh of polyline p will vary from [25.0 1.0] incrementing by 0.5 every 200 milliseconds. When it reaches the maximum width it is reset to a width of 1.0. The original width is ignored.
Obviously change the parameters as needed - or make it pulse in and out.
(Java equivalent - animation parameters different.)
public void pulsePolyline(final Polyline p, final Handler h)
{
h.postDelayed(new Runnable() {
#Override
public void run() {
float w = p.getWidth();
w = (w + 0.1);
if (w > 10.0) w = 1.0;
p.setWidth(w);
h.postDelayed(this, 200);
}
}, 200);
}
Note the handler must be from the main thread (or looper) as in:
new Handler(Looper.getMainLooper())
Related
I'm new to processing/java/code but was hoping for some help with my sketch.
I am trying to create an ink-looking sketch, with letters/characters displayed, then faded out instead of particles themselves. Inspired by https://openprocessing.org/sketch/1576908 I've run into errors with the entire particle constructor with an error on the line void update(p):
//update the velocity and location of particle
void update(p){
this.acceleration.add(createVector((noise(this.location.x)*2-1), (noise(this.location.y)*2-1)));
this.velocity.add(this.acceleration);
this.acceleration.set(0,0);
this.location.add(this.velocity);
this.alpha -= this.rate ;
// here is the recursion condition
if(this.alpha<=this.palpha*0.25 && this.palpha>10) {
p.push(new particle(this.location.x, this.location.y, this.rate*0.25, this.palpha*0.5));
}
}
Here is my full code
Thank you!
String[] particles = {"a", "b", "c", "d"} ; //string of particles
int velocity;
int acceleration;
int location;
int alpha;
int p;
void setup() {
size(600, 600);
background(255);
}
void draw() {
if(mousePressed) {
// spawn a new particle and add it to the array
particles.push(text(particles, mouseX, mouseY, 75));
textSize(random(20, 40));
}
// update and show the particles
for(int i=particles.length-2; i>=0; i--) {
particles[i].update(particles);
particles[i].show();
if(particles[i].alpha<=2) particles.splice(i, 5); // remove the dead particle
}
}
//particle class
class particle{
//constructor called when creating an instance of this class
// x & y are the location, r is the rate of decay, a is the starting alpha value
particle(float x, float y, float r, float a){
this.location = createVector(x,y) ;
this.velocity = createVector(random(-1,1),random(-1,1));
this.acceleration = createVector();
this.alpha = this.palpha=a ;
this.amp=4; // size of the particle
this.rate = r;
}
//update the velocity and location of particle
void update(p){
this.acceleration.add(createVector((noise(this.location.x)*2-1), (noise(this.location.y)*2-1)));
this.velocity.add(this.acceleration);
this.acceleration.set(0,0);
this.location.add(this.velocity);
this.alpha -= this.rate ;
// here is the recursion condition
if(this.alpha<=this.palpha*0.25 && this.palpha>10) {
p.push(new particle(this.location.x, this.location.y, this.rate*0.25, this.palpha*0.5));
}
}
//show the particles
void show(){
noStroke() ;
fill(0,35,25, this.alpha) ;
ellipse(this.location.x, this.location.y, this.amp);
}
} // end particle class```
You have at least two separate questions here:
how to port the p5.js sketch to Processing ?
how to add text for each particle ?
In the future I recommend breaking the problem down to simpler/shorter problems that can be tackle independently.
How let's look at the syntax errors Processing presents:
1.
particles.push(text(particles, mouseX, mouseY, 75));
errors with
The function "text()" expects parameters like: "text(int, float, float, float)"
The issue here is slightly masked. It looks like instead of calling text(yourTextString, yourTextX, yourTextY); you have different parameters. In reality there are two issues here:
push() is JavaScript Array's function. You need to use an ArrayList and its add() method instead in Processing (Java).
currently the particle class doesn't handle text. You can add a String text property which you can supply with a modified contructor: Particle(float x, float y, float r, float a, String text) (and you'd assign the constructor argument to the instance property (e.g. this.text = textl)
createVector exists in p5.js. In Processing you can switch this to new PVector(). Additionally you need to declare the variables initialised in the constructor as part of the class (e.g. location, velocity, acceleration, alpha, palpha, amp, rate).
ellipse(this.location.x, this.location.y, this.amp); is missing the last argument: ellipse(this.location.x, this.location.y, this.amp, this.amp);
This is a modified version of your code with the above notes applied:
// original sketch by OpenProcessing user Prasad
// https://openprocessing.org/sketch/1576908
String[] particlesText = {"a", "b", "c", "d"} ; //string of text
// array of particles
ArrayList<Particle> particles = new ArrayList<Particle>();
int velocity;
int acceleration;
int location;
int alpha;
int p;
void setup() {
size(600, 600);
background(255);
}
void draw() {
if(mousePressed) {
// spawn a new particle and add it to the array
// use % to loop over text (e.g .a,b,c,d,a...etc)
int textIndex = particles.size() % particlesText.length;
// grab the text from the array
String text = particlesText[textIndex];
// add a new particle providing text as well
particles.add(new Particle((float)mouseX, (float)mouseY,5.0, 75.0, text));
textSize(random(20, 40));
}
// update and show the particles
for(int i=particles.size()-2; i>=0; i--) {
Particle particle = particles.get(i);
particle.update(particles);
particle.show();
if(particle.alpha<=2) particles.remove(i); // remove the dead particle
}
}
//particle class
class Particle{
PVector location;
PVector velocity;
PVector acceleration;
float alpha;
float palpha;
float amp;
float rate;
String text = "";
//constructor called when creating an instance of this class
// x & y are the location, r is the rate of decay, a is the starting alpha value
Particle(float x, float y, float r, float a, String text){
this.location = new PVector(x,y) ;
this.velocity = new PVector(random(-1,1),random(-1,1));
this.acceleration = new PVector();
this.alpha = this.palpha=a ;
this.amp=4; // size of the particle
this.rate = r;
this.text = text;
}
//update the velocity and location of particle
void update(ArrayList<Particle> p){
this.acceleration.add(new PVector((noise(this.location.x)*2-1), (noise(this.location.y)*2-1)));
this.velocity.add(this.acceleration);
this.acceleration.set(0,0);
this.location.add(this.velocity);
this.alpha -= this.rate ;
// here is the recursion condition
if(this.alpha<=this.palpha*0.25 && this.palpha>10) {
p.add(new Particle(this.location.x, this.location.y, this.rate*0.25, this.palpha*0.5, this.text));
}
}
//show the particles
void show(){
noStroke() ;
fill(0,35,25, this.alpha);
//render the ellipse
ellipse(this.location.x, this.location.y, this.amp, this.amp);
// render the text
textSize(this.amp * 6);
text(this.text, this.location.x, this.location.y);
}
} // end particle class
(Note that you can choose not to render the ellipses and you can tweak the text size to something that makes more sense aesthetically. Also, when you're using other people's code, always credit them.)
I am looking to create an editable label at an arbitrary position on the pane on which I am writing. I am under the impression that TextField or TextArea objects are what I could use to implement that capability. There is obviously more to it as I don't know how to position the object when I create it. I have found an example on the "Chaotic Java" website but I need to do a bit more work to understand what's going on there. http://chaoticjava.com/posts/another-javafx-example-the-editable-label/
I am looking for more input from this group.
(There are no errors because I have not written any code.)
I was kind of curious about how to achieve this, so I gave it a try. This is what I came up with.
The approach used is pretty the same as that suggested by James in his comment:
I would start with a Pane, . . ., TextFields to represent text while being edited. Register mouse listeners with the Pane and Text objects, and use the layoutX and layoutY properties to position things . . . just to use text fields, and to use CSS to make them look like labels when not focused and text fields when focused.
The only significantly tricky part was working out how to correctly size the text fields as the Text inside the text field is not exposed via public API to allow you to listen to it's layout bounds. You could perhaps use a css lookup function to get at the enclosed Text, but I chose to use a private sun FontMetrics API (which may be deprecated in the future), to get the size of the text. In the future with Java 9, you should be able to perform the task without using the private API.
The solution doesn't try to do anything tricky like deal with multi-format or multi-line text, it is just for short, single line comments of a few words that can be placed over a scene.
TextCreator.java
// ## CAUTION: beware the com.sun imports...
import com.sun.javafx.tk.FontMetrics;
import com.sun.javafx.tk.Toolkit;
import javafx.application.Application;
import javafx.application.Platform;
import javafx.scene.Cursor;
import javafx.scene.Scene;
import javafx.scene.control.TextField;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.Pane;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
/**
* Displays a map of the lonely mountain upon which draggable, editable labels can be overlaid.
*/
public class TextCreator extends Application {
private static final String MAP_IMAGE_LOC =
"http://images.wikia.com/lotr/images/archive/f/f6/20130209175313!F27c_thorins_map_from_the_hobbit.jpg";
public static void main(String[] args) throws Exception {
launch(args);
}
#Override
public void start(final Stage stage) throws Exception {
Pane pane = new Pane();
pane.setOnMouseClicked(event -> {
if (event.getTarget() == pane) {
pane.getChildren().add(
new EditableDraggableText(event.getX(), event.getY())
);
}
});
EditableDraggableText cssStyled =
new EditableDraggableText(439, 253, "Style them with CSS");
cssStyled.getStyleClass().add("highlighted");
pane.getChildren().addAll(
new EditableDraggableText(330, 101, "Click to add a label"),
new EditableDraggableText(318, 225, "You can edit your labels"),
cssStyled,
new EditableDraggableText(336, 307, "And drag them"),
new EditableDraggableText(309, 346, "Around The Lonely Mountain")
);
StackPane layout = new StackPane(
new ImageView(
new Image(
MAP_IMAGE_LOC
)
),
pane
);
Scene scene = new Scene(layout);
scene.getStylesheets().add(getClass().getResource(
"editable-text.css"
).toExternalForm());
stage.setScene(scene);
stage.setResizable(false);
stage.show();
}
/**
* A text field which has no special decorations like background, border or focus ring.
* i.e. the EditableText just looks like a vanilla Text node or a Label node.
*/
class EditableText extends TextField {
// The right margin allows a little bit of space
// to the right of the text for the editor caret.
private final double RIGHT_MARGIN = 5;
EditableText(double x, double y) {
relocate(x, y);
getStyleClass().add("editable-text");
//** CAUTION: this uses a non-public API (FontMetrics) to calculate the field size
// the non-public API may be removed in a future JavaFX version.
// see: https://bugs.openjdk.java.net/browse/JDK-8090775
// Need font/text measurement API
FontMetrics metrics = Toolkit.getToolkit().getFontLoader().getFontMetrics(getFont());
setPrefWidth(RIGHT_MARGIN);
textProperty().addListener((observable, oldTextString, newTextString) ->
setPrefWidth(metrics.computeStringWidth(newTextString) + RIGHT_MARGIN)
);
Platform.runLater(this::requestFocus);
}
}
/**
* An EditableText (a text field which looks like a label), which can be dragged around
* the screen to reposition it.
*/
class EditableDraggableText extends StackPane {
private final double PADDING = 5;
private EditableText text = new EditableText(PADDING, PADDING);
EditableDraggableText(double x, double y) {
relocate(x - PADDING, y - PADDING);
getChildren().add(text);
getStyleClass().add("editable-draggable-text");
// if the text is empty when we lose focus,
// the node has no purpose anymore
// just remove it from the scene.
text.focusedProperty().addListener((observable, hadFocus, hasFocus) -> {
if (!hasFocus && getParent() != null && getParent() instanceof Pane &&
(text.getText() == null || text.getText().trim().isEmpty())) {
((Pane) getParent()).getChildren().remove(this);
}
});
enableDrag();
}
public EditableDraggableText(int x, int y, String text) {
this(x, y);
this.text.setText(text);
}
// make a node movable by dragging it around with the mouse.
private void enableDrag() {
final Delta dragDelta = new Delta();
setOnMousePressed(mouseEvent -> {
this.toFront();
// record a delta distance for the drag and drop operation.
dragDelta.x = mouseEvent.getX();
dragDelta.y = mouseEvent.getY();
getScene().setCursor(Cursor.MOVE);
});
setOnMouseReleased(mouseEvent -> getScene().setCursor(Cursor.HAND));
setOnMouseDragged(mouseEvent -> {
double newX = getLayoutX() + mouseEvent.getX() - dragDelta.x;
if (newX > 0 && newX < getScene().getWidth()) {
setLayoutX(newX);
}
double newY = getLayoutY() + mouseEvent.getY() - dragDelta.y;
if (newY > 0 && newY < getScene().getHeight()) {
setLayoutY(newY);
}
});
setOnMouseEntered(mouseEvent -> {
if (!mouseEvent.isPrimaryButtonDown()) {
getScene().setCursor(Cursor.HAND);
}
});
setOnMouseExited(mouseEvent -> {
if (!mouseEvent.isPrimaryButtonDown()) {
getScene().setCursor(Cursor.DEFAULT);
}
});
}
// records relative x and y co-ordinates.
private class Delta {
double x, y;
}
}
}
editable-text.css
.editable-text {
-fx-background-color: transparent;
-fx-background-insets: 0;
-fx-background-radius: 0;
-fx-padding: 0;
}
.editable-draggable-text:hover .editable-text {
-fx-background-color: yellow;
}
.editable-draggable-text {
-fx-padding: 5;
-fx-background-color: rgba(152, 251, 152, 0.2); // translucent palegreen
}
.editable-draggable-text:hover {
-fx-background-color: orange;
}
.highlighted {
-fx-background-color: rgba(255, 182, 93, 0.3); // translucent mistyrose
-fx-border-style: dashed;
-fx-border-color: firebrick;
}
If you have time, you could clean the sample implementation up and donate it to the ControlsFX project.
You can use a function of label: setGraphic().
Here is my code:
public void editableLabelTest(Stage stage){
Scene scene = new Scene(new VBox(new EditableLabel("I am a label"),
new EditableLabel("I am a label too")));
stage.setScene(scene);
stage.show();
}
class EditableLabel extends Label{
TextField tf = new TextField();
/***
* backup is used to cancel when press ESC...
*/
String backup = "";
public EditableLabel(){
this("");
}
public EditableLabel(String str){
super(str);
this.setOnMouseClicked(e -> {
if(e.getClickCount() == 2){
tf.setText(backup = this.getText());
this.setGraphic(tf);
this.setText("");
tf.requestFocus();
}
});
tf.focusedProperty().addListener((prop, o, n) -> {
if(!n){
toLabel();
}
});
tf.setOnKeyReleased(e -> {
if(e.getCode().equals(KeyCode.ENTER)){
toLabel();
}else if(e.getCode().equals(KeyCode.ESCAPE)){
tf.setText(backup);
toLabel();
}
});
}
void toLabel(){
this.setGraphic(null);
this.setText(tf.getText());
}
}
I came across a strange behaviour of JavaFX when i tried to obtain the bordersizes (bounds) of a pane that has some css-effects//formattings applied to it. In my application i have to lookup the exact sizes of different objects in order to connect them with lines (imagine some sort of UML-diagramm editor, the start and endpoints of the lines are the border coordinates of the objects).
Now to my problem: whenever i try to get the bordersizes of an object in the same method where this object is put on the scene graph, the result does not include any css attributes like padding, bordersize, strokes and so on. The exact result gets returned if the object already exists on the scene graph before i lookup the size. It seems to be that JavaFX has to wait for one rendering pass (16,7ms) to actually update the real bounds and sizes on an object. Is there any way to get the size of an object (especially those which extend Pane) in the same method as it is created? I don't really like the workaround with waiting for 16,7ms, because it creates some unwanted behaviour in my application.
The following code shows the problem. The size when creating the pane containing the rectangle does not equal the size when pressing the "show size" button.
public class SzenarioView extends GridPane
{
private Group paintingLayer;
public SzenarioView()
{
super();
paintingLayer = new Group();
paintingLayer.getStylesheets().add(TestStarter.class.getResource("ReprBox.css").toString());
Rectangle r1 = new Rectangle(0, 0, 1000, 1000);
r1.setFill(Color.AZURE);
paintingLayer.getChildren().add(r1);
Button b1 = new Button("Show Size");
b1.setOnAction(new EventHandler<ActionEvent>() {
#Override
public void handle(ActionEvent arg0) {
for(Node n : paintingLayer.getChildren())
{
System.out.println("Border...");
System.out.println(getNodeBorderCoords(n, BorderTypes.RIGHT)[0]);
System.out.println(getNodeBorderCoords(n, BorderTypes.RIGHT)[1]);
System.out.println("End Border");
}
}
});
Button b2 = new Button("Add CCSBTN");
b2.setOnAction(new EventHandler<ActionEvent>() {
#Override
public void handle(ActionEvent event) {
BorderPane bp = new BorderPane();
bp.getStylesheets().add(TestStarter.class.getResource("ReprBox.css").toString());
Rectangle rcss = new Rectangle(50, 50);
bp.setTop(rcss);
bp.getStyleClass().add("my-box");
setObjectOnScreen(bp, 100, 100);
System.out.println(getNodeBorderCoords(bp, BorderTypes.RIGHT)[0]);
System.out.println(getNodeBorderCoords(bp, BorderTypes.RIGHT)[1]);
}
});
this.add(b1, 0, 0);
this.add(b2, 1, 0);
this.add(paintingLayer, 1, 1);
this.setMaxHeight(500);
this.setMaxWidth(700);
this.setHgap(10);
this.setVgap(10);
this.setPadding(new Insets(10, 10, 10, 10));
}
public void setObjectOnScreen(Node obj, double toX, double toY)
{
obj.setLayoutX(toX);
obj.setLayoutY(toY);
paintingLayer.getChildren().add(obj);
}
public double[] getNodeBorderCoords(Node n, BorderTypes type)
{
double x = 0;
double y = 0;
double bx = n.getBoundsInLocal().getWidth();
double by = n.getBoundsInLocal().getHeight();
switch (type)
{
case LEFT:
x = n.getLayoutX();
y = n.getLayoutY() + by / 2;
break;
case RIGHT:
x = n.getLayoutX() + bx ;
y = n.getLayoutY() + by / 2;
break;
case TOP:
x = n.getLayoutX() + bx / 2;
y = n.getLayoutY();
break;
case BOTTOM:
x = n.getLayoutX() + bx / 2;
y = n.getLayoutY() + by;
break;
}
double[] ret =
{ x, y, };
return ret;
}
}
The CSS-File
#CHARSET "ISO-8859-1";
.my-box {
-fx-border-color: rgb(255, 0, 0);
-fx-border-radius: 2;
-fx-padding: 1 1 1 1;
-fx-border-width: 5 5 5 5;
}
By the way, it doesn't matter if use getBoundsInLocal() or getBoundsInParent() .
UPDATE
Here are two workarounds that can be used:
Thread t = new Thread(new Runnable() {
#Override
public void run() {
try {
Thread.sleep(17);
} catch (InterruptedException e) {
e.printStackTrace();
}
Platform.runLater(new Runnable() {
#Override
public void run() {
System.out.println(getNodeBorderCoords(bp, BorderTypes.RIGHT)[0]);
System.out.println(getNodeBorderCoords(bp, BorderTypes.RIGHT)[1]);
}
});
}
});
t.start();
But delaying the call might cause some strange behaviour like i stated in my post. But i found another "solution" recently.
bp.snapshot(new SnapshotParameters(), new WritableImage(5, 5));
System.out.println(getNodeBorderCoords(bp, BorderTypes.RIGHT)[0]);
System.out.println(getNodeBorderCoords(bp, BorderTypes.RIGHT)[1]);
The snapshot() method applies all css effects (and all other layout work) on the node. After that, the returned values of the borders are correct.
There are 2 approaches:
You can use binding instead of static size call. It gives benefits of additional support for update after resize but adds a bit of listeners handling burden on FX enging.
Wrapping size reading logic into Platform.runLater() will put it later into event queue and should address premature size access issue.
How can I get width and height of a linear layout which is defined in xml as fill_parent both in height and width? I have tried onmeasure method but I dont know why it is not giving exact value. I need these values in an Activity before oncreate method finishes.
Suppose I have to get a LinearLayout width defined in XML. I have to get reference of it by XML. Define LinearLayout l as instance.
l = (LinearLayout)findviewbyid(R.id.l1);
ViewTreeObserver observer = l.getViewTreeObserver();
observer.addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
// TODO Auto-generated method stub
init();
l.getViewTreeObserver().removeGlobalOnLayoutListener(
this);
}
});
protected void init() {
int a= l.getHeight();
int b = l.getWidth();
Toast.makeText(getActivity,""+a+" "+b,3000).show();
}
callfragment();
}
The width and height values are set after the layout has been created, when elements have been placed they then get measured. On the first call to onSizeChanged the parms will be 0 so if you use that check for it.
Little more detail here
https://groups.google.com/forum/?fromgroups=#!topic/android-developers/nNEp6xBnPiw
and here http://developer.android.com/reference/android/view/View.html#Layout
Here is how to use onLayout:
#Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
int width = someView.getWidth();
int height = someView.getHeight();
}
To get it work, you need to check whether the desired height value is bigger than 0 - and first then remove the onGlobalLayout listener and do whatever you want with the height. The listener calls its method continuously and by the first call it is not guaranteed that the view is measured properly.
final LinearLayout parent = (LinearLayout) findViewById(R.id.parentView);
parent.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
int availableHeight = parent.getMeasuredHeight();
if(availableHeight>0) {
parent.getViewTreeObserver().removeGlobalOnLayoutListener(this);
//save height here and do whatever you want with it
}
}
});
You could add on layout change listener to your layout and get the newest height and width or even the one before last change.
Added in API level 11
Add a listener that will be called when the bounds of the view change
due to layout processing.
LinearLayout myLinearLayout = (LinearLayout) findViewById(R.id.my_linear_layout);
myLinearLayout.addOnLayoutChangeListener(new View.OnLayoutChangeListener() {
#Override
public void onLayoutChange(View v, int left, int top, int right, int bottom, int oldLeft, int oldTop, int oldRight, int oldBottom) {
// Preventing extra work because method will be called many times.
if(height == (bottom - top))
return;
height = (bottom - top);
// do something here...
}
});
A generic approach using Kotlin based on MGDroid's answer for API 16+.
/**
* Align height of a container from wrap-content to actual height at runtime.
* */
private fun <T: ViewGroup> alignContainerHeight(container: T) {
container.viewTreeObserver.addOnGlobalLayoutListener(object : ViewTreeObserver.OnGlobalLayoutListener {
override fun onGlobalLayout() {
// Obtain runtime height
val availableHeight = container.measuredHeight
if (availableHeight > 0) {
container.viewTreeObserver.removeOnGlobalLayoutListener(this)
setContainerHeight(container, availableHeight)
}
}
})
}
/**
* Note: Assumes that the parent is a LinearLayout.
* */
private fun <T : ViewGroup> setContainerHeight(container: T, availableHeight: Int) {
val availableWidth = container.measuredWidth
val params = LinearLayout.LayoutParams(availableWidth, availableHeight)
// Note: getLayoutParams() returns null if no parent exists
if (container.layoutParams != null) {
container.layoutParams = params
}
}
I am trying to drag the circle at A around so that it produces an angle relative to the hidden center element, B.
I'm using MouseEventArgs.GetPosition(IInputElement relativeTo), so:
Point p = args.GetPosition(B)
I'm getting points relative to the top-left of B, not its center, despite setting a RenderTransformOrigin of 0.5, 0.5 on B.
I know that I can compute the correct offset manually: Easiest way to get the angle of mouse position in WPF relative to the center of a circle
The RenderTransformOrigin specifies the relative origin of any RenderTransform applied on B. Setting it does not in itself change the position of B, so it does not affect e.GetPosition(B) either.
e.GetPosition(B) in human language is "Give me the mouse position in the coordinate space of B. No matter how you change this coordinate space (by applying a render transform), relatively, the centre of B will aways be in its middle and it will depend on its size, so you will need to calculate its centre.
Also when you calculate the angle you need to make sure that you are using one and the same coordinate space. This code rotates A over the Centre, regardless of how they are positioned:
Point? dragStart;
Point centrePoint;
private void A_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
var handle = sender as FrameworkElement;
var parent = handle.Parent as FrameworkElement;
dragStart = e.GetPosition(parent);
var rotateCentre = Centre.TransformToVisual(A).Transform(new Point(Centre.ActualWidth / 2, Centre.ActualHeight / 2));
A.RenderTransform = new RotateTransform { CenterX = rotateCentre.X, CenterY = rotateCentre.Y };
centrePoint = Centre.TransformToVisual(handle.Parent as FrameworkElement).Transform(new Point(Centre.ActualWidth / 2, Centre.ActualHeight / 2));
handle.CaptureMouse();
}
private void A_MouseMove(object sender, MouseEventArgs e)
{
if (dragStart != null)
{
var current = e.GetPosition((sender as FrameworkElement).Parent as FrameworkElement);
var angle = RadiansToDegrees(AngleAtoB(dragStart.Value, current, centrePoint));
(A.RenderTransform as RotateTransform).Angle = angle;
}
}
private void A_LostMouseCapture(object sender, MouseEventArgs e)
{
dragStart = null;
}
private void A_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
(sender as FrameworkElement).ReleaseMouseCapture();
}
internal static double AngleWithHorizontal(Point point, Point origin)
{
return Math.Atan2(point.Y - origin.Y, point.X - origin.X);
}
internal static double AngleAtoB(Point a, Point b, Point origin)
{
return AngleWithHorizontal(b, origin) - AngleWithHorizontal(a, origin);
}
private const double Const180OverPi = 180 / Math.PI;
internal static double RadiansToDegrees(double angleInDegrees)
{
return angleInDegrees * Const180OverPi;
}