I am doing DoubleAnimation of the Width property of a Canvas. I want to shrink the canvas to 1/5 th of the size.
var widthAnimation = new DoubleAnimation();
widthAnimation.Duration = new TimeSpan(0,0,1);
StoryBoard.SetTarget(widthAnimation, Canvas1);
StoryBoard.SetTargetProperty(widthAnimation, new PropertyPath("Width"));
widthAnimation.From = Canvas1.Width;
widthAnimation.To = Canvas1.Width * .2;
StoryBoard stb = new StoryBoard();
stb.Children.Add(widthAnimation);
stb.Begin();
Somehow, the above animation does not shrink the size to 1/5th. Instead, it enlarges the canvas. Any clues why the animation is doing something funny?
The canvas was wrapped in a viewbox. The Viewbox size was fixed, while the canvas within it shrinked. The text expanded. Not sure why. But, I fixed the problem by applying the animation to the Viewbox rather than the Canvas. And it works all fine now.
Related
I am having an issue with jetpack compose canvas when using #Preview, I would like to display all the content to fill the canvas in the preview but it doesn't currently.
I am setting 375dp width and then a Rect with 375f, I understand that dp is different than just float, but how can I set the width so the green rect fills the canvas without using canvas.width for example as the rect width?
When drawing on Canvas you're operating with pixels, not Dp. onDraw is called on DrawScope, and it has size property which is already converted to pixels:
Canvas(Modifier) {
drawRect(color = Color.Green, size = size)
}
Also DrawScope is inherited from Density, so you can convert any Dp to pixels with 375.toDp().
I am trying to resize elements in canavas using konva js plugin concept. But the resized width and height are not saved to database. My actual height width are not being replaced by resized height widths for any of the elements whether a image,layer,stage
Do you change sizes with Konva.Transformer (https://konvajs.org/docs/vue/Transformer.html)?
If so - Transformer tool doesn't change width and height directly. Instead, it is changing scaleX and scaleY of a node. So you just need to save that attrs too into a database or change width/height to match new scaling:
const newWidth = rectangle.width() * rectangle.scaleX();
// set new width
rectangle.width(newWidth);
// reset scale:
rectangle.scaleX(1);
While drawing a line on canvas, it creates multiple dots within the line. I am using easelJS for canvas drawing. Please refer the attached screenshot.
Code for line draw is as below.
Line with multiple dots
scope.init = function(){
stage = new createjs.Stage(element[0].id);
stage.enableDOMEvents(true);
createjs.Touch.enable(stage);
shellWrapper = new createjs.Container();
shellWrapper.id = mainContainerId;
shellWrapper.hitArea = new createjs.Shape(new createjs.Graphics().f('#000').dr(0,0,cacheWidth,cacheHeight));
shellWrapper.cache(0,0,cacheWidth,cacheHeight); // Cache it.
stage.addChild(shellWrapper);
drawing = new createjs.Shape();
shellWrapper.addChild(drawing);
stage.update();
}
scope.mouseDown = function(event) {
oldX = event.stageX;
oldY = event.stageY;
shellWrapper.addEventListener('pressmove', function(evt){
drawing.graphics.beginStroke(color)
.setStrokeStyle(size, 'round')
.moveTo(oldX, oldY)
.lineTo(evt.stageX, evt.stageY);
oldX = evt.stageX;
oldY = evt.stageY;
shellWrapper.updateCache(erase?'destination-out':'source-over');
drawing.graphics.clear();
stage.update();
});
};
This happens because a single line has its limits rounded, so it actually look like this:
The rounded edge goes a little bit (depending on stroke width) out of the line boundary so it gets over the past line drawn. This line overlay causes your drawing to look like it has small circles, but it does not, and thats because you're using a semi transparent color on the stroke.
To solve the issue, make the stroke color opaque and add transparency to the whole drawing by using myDisplayObj.alpha = 0.5;
This way individual lines will be fully opaque in relation to each other but they will be semi transparent relative to other display objects in the scene.
In my Cocos2d js android app i have a UI button as
var button=new ccui.Button();
button.loadTextures(res.play_png,res.play_png);
button.setAnchorPoint(cc.p(0,0));
button.x=size.width/2;
button.y=size.height/2;
this.addChild(button);
The button loads and i am able to set it at any position on the screen.
But i am unable to change its width and height to specified number of pixels.
I want something like
button.width=100;
button.height=100;
I did not find any method to do that...
Any help how to accomplish this would be greatful.
Thanks.
The buttons i use are options like play,how to play,share etc..
So i have to position them in such a way that they dont overlap or get distorted for various screen resolutions...
How can i use the setScale method in this context???
We can make a call to a function that can scale the size of the UIButton by performing an action. In this case, the following code might help:
performScaleAction : function()
{
var duration = 0; // duration in seconds for performing this action
var scaleX = 0.5; // scale factor for X-axis
var scaleY = 0.5; // scale factor for Y-axis
var scaleAction = new cc.ScaleTo(duration , scaleX , scaleY );
this.runAction(scaleAction);
}
Now, call the above function in the following way:
this.performScaleAction();
this.addChild(button);
So, if the actual height of the image used for creating the UIButton is h, in this case, the new size as displayed on the screen would be h times scaleX . Same for the width of the UIButton.
Hope this helps!
i want a list with image buttons to be displayed in my libGDX app.
The idea is that the image has a size of lets say 400x100 pixels.
I need the list to be able to display the images stretched to width of the screen - the height of the image should be resized to keep the aspect ratio.
But everytime i try to do this the image won't get resized properly.
The image is not stretched when smaller then screen width or the padding get's bad or the aspect ration gets wrong.
Could you suggest a way to do this, i'm struggling to find any solution..
The actor must be Button a button.. (need "checked"/selected functionality)
I tried to do something like this:
Table table = new Table();
table.setFillParent(true);
Texture t1 = ... snip ...
Texture t2 = ... snip ...
ImageButton i1 = new ImageButton( new TextureRegionDrawable(new TextureRegion(t1));
ImageButton i2 = new ImageButton( new TextureRegionDrawable(new TextureRegion(t2));
i1.getImageCell().expandX().fillX();
i2.getImageCell().expandX().fillX();
table.add(i1).expandX().fillX();
table.row();
table.add(i2).expandX().fillX();
getStage().add(table);
This worked for me:
imageButton.setBounds(x, y, 128, 128);
imageButton.getImageCell().expand().fill();
float screenWidth = this.stage.getWidth();
i2.setWidth(screenWidth);
If i understand correctly, this should do what you want.