Overriding onDraw method of imageView un-centers drawable - android-imageview

I was following this tutorial http://android-developers.blogspot.com/2010/06/making-sense-of-multitouch.html to make and imageview that can scroll in all directions. The problem is when I override the onDraw method and try to draw the drawable right to the canvas manually the drawable is off center.
#Override
public void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.save();
canvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR);
getDrawable().draw(canvas);
canvas.restore();
}
if I comment out the method then the image is displayed centered in the middle correctly.
does overriding this method do something with the alignment?

After canvas.save() call canvas.concat with a Matrix taken by getImageMatrix()
P.S: Taken from pskink's comment, as this seems to have solved Brian's issue, I'm positing this as a separate answer so future readers can see it.

Related

NavigationLink button focusable override issue

I face an issue which stucks for days. I am createing a tvos application which reqiures a custome navigationlink(button), when I move the focus to the navigation item, it should scale a little bit, and also I need to change the parent's view backgound. It is pretty simple, but it seems that the focusabe override the my custome button Style. The test shows that the background image was changed but without any scale effect when the navigationbutton get focused. Any suggestion?
NavigationLink(destination: Text("myview"))
{Text("Test")
}
.buttonStyle(myButtonStyle())
.Focusable(true){(focus) in
//the code to change the background image
//myButtonStyle definition
struct MyButtonStyle: ButtonStyle {
func makeBody(configuration: Configuration) -> some View {
return AppButton(configuration: configuration)
}
}
struct AppButton: View {
#Environment(\.isFocused) var focused: Bool
let configuration: ButtonStyle.Configuration
var body: some View {
configuration.label
.scaleEffect(focused ? 1.1 : 1.0)
.focusable(true)
}
}
The line to change the background image is always called when the item get focused as my expected, but the scale effect is gone. If I remove the following line of codes, the scale effect is back:
// .Focusable(true){(focus) in
//the code to change the background image
// }
It looks like that this line of code override my custome style of navigation button, any ideas? Appreciate any help!
Ah, finally I found the tricky, though there is very little document about this. When Focusable was introduced, it should not be in your code to change focus engine, which will cause the navigationlink tap message uncaptured, then your navigationlink for another view will not work.
Use .onChange() function to deal with any focus change event, not use Focusable.

UWP Light dismiss ContentDialog

Is there a way to make the ContentDialog light dismiss?, so when the user clicks on any thing outside the ContentDialog it should be closed.
Thanks.
By default, ContentDialog is placed in PopupRoot. Behind it, there is a Rectangle which dim and prevent interaction with other elements in the app. You can find it with help of VisualTreeHelper and register a Tapped event to it, so when it's tapped you can hide ContentDialog.
You can do this after calling ShowAsync outside ContentDialog code or you can do it inside ContentDialog code. Personally, I implement a class which derives from ContentElement and I override OnApplyTemplate like this:
protected override void OnApplyTemplate()
{
// this is here by default
base.OnApplyTemplate();
// get all open popups
// normally there are 2 popups, one for your ContentDialog and one for Rectangle
var popups = VisualTreeHelper.GetOpenPopups(Window.Current);
foreach (var popup in popups)
{
if (popup.Child is Rectangle)
{
// I store a refrence to Rectangle to be able to unregester event handler later
_lockRectangle = popup.Child as Rectangle;
_lockRectangle.Tapped += OnLockRectangleTapped;
}
}
}
and in OnLockRectangleTapped:
private void OnLockRectangleTapped(object sender, TappedRoutedEventArgs e)
{
this.Hide();
_lockRectangle.Tapped -= OnLockRectangleTapped;
}
Unfortunately ContentDialog does not offer such behavior.
There are two alternatives you can consider:
Popup - a special control built for this purpose, which displays dialog-like UI on top of the app content. This control actually offers a IsLightDismissEnabled for the behavior you need. Since the Anniversary Update (SDK version 1607) also has a LightDismissOverlayMode, which can be set to "On" to automatically darken the UI around the Popup when displayed. More details are on MSDN.
Custom UI - you can create a new layer on top of your existing UI in XAML, have this layer cover the entire screen and watch for the Tapped event to dismiss it when displayed. This is more cumbersome, but you have a little more control over how it is displayed

Resizing desktop application with ligdx issues

I'm trying to make an app using libgdx. When I first launch it on my desktop, my map print well. But if I resize the window, the map is no longer completely in the screen.
But if I change the size on the beginning, the map print well. So there might be an issue with my resizing function.
In my GameScreen class I've got :
public void resize(int width, int height)
{
renderer.setSize(width, height);
}
And my renderer got this :
public void setSize (int w, int h)
{
ppuX = (float)w / (float)world.getWidth();
ppuY = (float)h / (float)world.getHeight();
}
For example, if I reduce my window, the map is too small for the window. If I extend it, the map doesn't in it.
If you have a fixed viewport, which is the case most of the time. You don't need to do anything in your resize method. The camera will fill the window to draw everything even if you resize it at runtime.
I, myself, never put anything on resize.

Change JavaFX TabPane background

I'm developing an application in javaFx and I'm using TabPane to organise content. My problem is that when I put a node as the content of a tab, and then set the background of that same node, the background color gets kind of blurry, as you can see in the image, the background color was defined in a css file.
If anyone knows how to resolve this, would really appreciate the help.
http://i.stack.imgur.com/h3gNH.png
I think you are a victim of this issue:
JavaFX Image (PNG) transparency crispness being lost when rendering
It will likely be fixed in a forthcoming (i.e. Java 8) release.
For now, you may be able to use the work-around documented in the linked question's answer.
To do this, place your image in a CenteredRegion and use that as the first element of a StackPane placed in your tab. Then layer the rest of the tab content over the image by adding the content to the StackPane. It's a bit awkward and there may be a more straight-forward solution for your particular case.
class CenteredRegion extends Region {
private Node content;
CenteredRegion(Node content) {
this.content = content;
getChildren().add(content);
}
#Override protected void layoutChildren() {
content.relocate(
Math.round(getWidth() / 2 - content.prefWidth(USE_PREF_SIZE) / 2),
Math.round(getHeight() / 2 - content.prefHeight(USE_PREF_SIZE) / 2)
);
}
public Node getContent() {
return content;
}
}

Android View.onDraw() always has a clean Canvas

I am trying to draw an animation. To do so I have extended View and overridden the onDraw() method. What I would expect is that each time onDraw() is called the canvas would be in the state that I left it in and I could choose to clear it or just draw over parts of it (This is how it worked when I used a SurfaceView) but each time the canvas comes back already cleared. Is there a way that I can not have it cleared? Or maybe save the previous state into a Bitmap so I can just draw that Bitmap and then draw over top of it?
I'm not sure if there is a way or not. But for my custom views I either redraw everything each time onDraw() is called, or draw to a bitmap and then draw the bitmap to the canvas (like you suggested in your question).
Here is how i do it
class A extends View {
private Canvas canvas;
private Bitmap bitmap;
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
if (bitmap != null) {
bitmap .recycle();
}
canvas= new Canvas();
bitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
canvas.setBitmap(bitmap);
}
public void destroy() {
if (bitmap != null) {
bitmap.recycle();
}
}
public void onDraw(Canvas c) {
//draw onto the canvas if needed (maybe only the parts of animation that changed)
canvas.drawRect(0,0,10,10,paint);
//draw the bitmap to the real canvas c
c.drawBitmap(bitmap,
new Rect(0,0,bitmap.getWidth(),bitmap.getHeight()),
new Rect(0,0,bitmap.getWidth(),bitmap.getHeight()), null);
}
}
you should have a look here to see the difference between basic view and surfaceView. A surfaceView has a dedicated layer for drawing, which I suppose keeps track of what you drew before. Now if you really want to do it on a basic View, you could try to put each item you draw in an array, like the exemple of itemized overlay for the mapview.
It should work pretty much the same way
Your expectations do not jib w/ reality :) The canvas will not be the way you left it, but it blank instead. You could create an ArrayList of objects to be drawn (canvas.drawCircle(), canvas.drawBitmap() etc.), then iterate though the ArrayList in the OnDraw(). I am new to graphics programming but I have used this on a small scale. Maybe there is a much better way.