I am trying to integrate animation in a module where, when the dismiss button is clicked, the entire pendingTasksBar view's height turn to 0dp but at a stretch of 300ms. This is what i have tried so far. Can someone please help me out here?
function hidePendingTasksBar(){
log.trace("[tasks] >> [hidePendingTasksBar]");
var animationObj = Ti.UI.createAnimation({
height : "0dp",
duration : 300
});
$.pendingTasksBar.animate(animationObj);
//.pendingTasksBar.height = "0dp";
}
Height property must be a Number, and you are using a String. I think that's the problem. Try using 0 instead of "0dp".
http://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.Animation-property-height
Setting height to 0 as number should work. And if it doesn't work, then you can safely use matrix transformation to decrease height or to increase it to same height again as below:
var matrix = Ti.UI.create2DMatrix();
matrix = matrix.scale(1, 0);
// to decrease height
$.pendingTasksBar.animate({
duration : 300,
transform : matrix
});
// to reset height
$.pendingTasksBar.animate({
duration : 300,
transform : Ti.UI.create2DMatrix() // use empty matrix & it will reset original matrix or UI.
});
Related
I'm new to animation with Xamarin Forms, I have a frame that I need to place it outside the screen like this:
The small frame is outside the device's screen
The small frame now inside the device screen
My problem is I need to know how I can place the frame like that (outside the screen) from the start, and how to know the width and the height of every device so I can use the TranslateTo() method to translate the frame to the exact same position for every device.
Thanks in advance
You can try this from your .cs page
Application.Current.MainPage.Width
Application.Current.MainPage.Height
You can use Xamarin.Essentials NuGet pakage to achieve this. And there is a useful class DeviceDisplay in there that should be helpful for you.
The documentation can be found here.
Usage example:
// Get Metrics
var mainDisplayInfo = DeviceDisplay.MainDisplayInfo;
// Orientation (Landscape, Portrait, Square, Unknown)
var orientation = mainDisplayInfo.Orientation;
// Rotation (0, 90, 180, 270)
var rotation = mainDisplayInfo.Rotation;
// Width (in pixels)
var width = mainDisplayInfo.Width;
// Height (in pixels)
var height = mainDisplayInfo.Height;
// Screen density
var density = mainDisplayInfo.Density;
I want to modify to the textbox width according to the longest line that user enters, dynamically. I initialize the width = width of my canvas but as soon as user exits editing, the width must shorten to the width of the longest line in user's text written in the textBox.
obj.on(("editing:exited"),function() {
can.setActiveObject(textBox);
var largest = Math.max.apply(Math, can.getActiveObject().__lineWidths);
can.getActiveObject().set("width",largest);
})
Problem is that each time I exit editing, the width reduces and the top line is shifted below. I just cant understand what is happening. Please help at the earliest. Thanks in advance. Please also upload a demo so that I can see the effect of your code.
Update 1 : If I change the line
can.getActiveObject().set("width",largest);
to
can.getActiveObject().set("width",(largest + 1));
It works as desired. I have no idea why this is happening.
I have found the answer to this question by some coding myself.
https://jsfiddle.net/xpntggdo/8/
To all those who might be facing a similar issue, here is the fiddle and here is the code.
textBox.on(("changed"),function(){
var actualWidth = textBox.scaleX * textBox.width;
var largest = canvas.getActiveObject().__lineWidths[0];
var tryWidth = (largest + 15) * textBox.scaleX;
canvas.getActiveObject().set("width",tryWidth);
if((textBox.left + actualWidth) >= canvas.width - 10)
{
textBox.set("width", canvas.width - left - 10)
}
canvas.renderAll();
});
textBox.on(("modified"),function(){
left = textBox.left;
canvas.renderAll();
});
I am aware of this beeing a frequently discussed issue.
Anyway I want to give it a shot:
I am using multiple kendo grids - so I am looking for a reusable and clean way how to set the grids styles without having side effects on each other.
So here's what I want to achieve:
Grid style 1:
- min-height: 150px max-heigt: 600px scrollable
Grid style 2:
- min-height: 150px max-heigt: 300px scrollable
Doesn't seem very extraordinary, does it?
I tryed setting html.attributes, setting scrollable() height and overwriting css.
But in the end I'll always find myself in having following problems, though:
Grid content div overflows the parent div
no scrollbars anymore
"fixing" by overwriting css classes what has undesired side effects
of course
Does anybody have a solution?
I have a possible solution which I have modified from a bit of code I use.
independent grid height resizing
So lets examine the magic bit for you:
function resizeGrid(grid, size, fixed, minHeight, minSizeHeight, maxHeight, maxSizHeight) {
if (size === null || size === undefined) {
size = 0.6;
}
if (minHeight === null || minHeight === undefined) {
minHeight = 600;
minSizeHeight = 150;
}
if (maxHeight === null || maxHeight === undefined) {
maxHeight = 800;
maxSizHeight = 600;
}
var windowHeight = $(window).height();
if (!fixed) {
windowHeight = windowHeight * size;
} else {
windowHeight = size;
}
if ($(window).height() < minHeight) {
windowHeight = minSizeHeight;
}
if ($(window).height() > maxHeight) {
windowHeight = maxSizHeight;
}
var gridContent = $("#" + grid + " div.k-grid-content");
var lockedContent = $("#" + grid + " div.k-grid-content-locked");
gridContent.height(windowHeight);
if (lockedContent !== null && lockedContent !== undefined) {
lockedContent.height(windowHeight);
}
}
So based on your requirements and my understanding you want to be able to change the scrollable area dynamically and independently of one another.
in this example we provide the following signature:
resizeGrid(grid, size, fixed, minHeight, minSizeHeight, maxHeight, maxSizeHeight)
Grid ==> the id of the grid we are working with
Size ==> this is the size either expressed as a pixel value or percentage (eg. 150 or 0.4 (40%))
fixed ==> this tells the function if the value passed is a fixed height or a percentage height for the initial height requirements
minHeight==> this should be the minimum screen size that the grid should resize itself
minSizeHeight ==> this is the size the grid should resize to if the minHeight condition is met.
maxHeight ==> this should be the maximum screen size that the grid should resize itself.
maxSizeHeight ==> this should be the maximum size of the grid should be be above the maxHeight of the window.
Note: the final 4 settings will use pixel defined values but the code could be adapted to work with percentages as well
so in the example I have provided I have declared:
resizeGrid("grid",600,true, 400,150, 800,600 );
resizeGrid("grid2",150,true, 300,300, 600,400 );
So the first grid #grid will set itself to a size of 600px initially and then resize itself if the window goes below 400px and over 800px. In both scenarios it will resize to 150px, 600px respectively.
then when we start resizing the window I have added this:
$(window).resize(function () {
console.log("resizing::" ,$(window).height() );
resizeGrid("grid",600,true, 400,150, 800,600 );
resizeGrid("grid2",150,true, 300,300, 600,400 );
});
This will then look for the window resize event to be fired off and then resize the grids accordingly.
I have added the console statement purely so you can see this event being fired off and what the window height is to check the code is being activated at the right point.
One thing you may notice are these lines here:
var gridContent = $("#" + grid + " div.k-grid-content");
var lockedContent = $("#" + grid + " div.k-grid-content-locked");
Due to the grid "wrapping" the locked and non-locked portions into different tags I am checking to see if there are any locked columns as otherwise you will have different scrolling/unexpected style on the various parts of the grid.
If you need anything more explaining/changing let me know and I will update my answer accordingly. Hopefully this is what you are after.
Edit: I have updated the example so you can see the grids side by side
I am trying to develop a canvas element where users can drop uploaded images. However, I am running into trouble with this command
var canvas = new fabric.Canvas('canvasID');
The canvas element is somehow getting resized and I don't understand why. Can anyone help?
If you are finding the canvas is resizing to a size smaller than you expected, there is a good chance you haven't defined the height and width of the canvas itself when creating it with Fabric.
An example of doing this would be:
var id = 'c',
drawingMode = true,
w = 1024,
h = 768,
newCanvas = new fabric.Canvas(id, { isDrawingMode: drawingMode });
newCanvas.setWidth(w);
newCanvas.setHeight(h);
The variables w and h are just examples, but the last two lines ensure your canvas has a size set rather than default of 300 x 150.
Hope this helps.
I'm trying to take a users mouse/touch drawn line and then have it alpha fade out the result using a tween. The problem is when cap and joint style are set to rounded then joint point fades behind the rest of the line. It looks fine when set to miter or bevel.
What I want is a smooth solid fade of the shape. Any ideas?
Fiddle: http://jsfiddle.net/mcfarljw/ZNGK2/
Function for drawing the line based on user input:
function handleMouseMove(event) {
var midPt = new createjs.Point(oldPt.x + stage.mouseX >> 1, oldPt.y + stage.mouseY >> 1);
drawingCanvas.graphics.setStrokeStyle(stroke, 'round', 'round').beginStroke(color).moveTo(midPt.x, midPt.y).curveTo(oldPt.x, oldPt.y, oldMidPt.x, oldMidPt.y);
oldPt.x = stage.mouseX;
oldPt.y = stage.mouseY;
oldMidPt.x = midPt.x;
oldMidPt.y = midPt.y;
stage.update();
}
Tween applied to the shape after line is finished:
createjs.Tween.get(drawingCanvas).to({
alpha: 0
}, 2000).call(function() {
drawingCanvas.alpha = 1;
drawingCanvas.graphics.clear();
});
You'll want to cache the whole shape before fading it out. See the updates I have made to the fiddle. Mainly, take a look at line 52 on the handleMouseUp event.
drawingCanvas.cache(0, 0, 800, 800);
Then, when your fade is complete. Make sure to uncache before showing the object again. Otherwise your graphics.clear() won't work.
drawingCanvas.uncache();