I'm making a slide out menu in Titanium Appcelerator for an iPad app. There is a window that holds a slide menu view and another view consisting on two views grouped in a view that acts a container. The thing is that when I try to animate when I click on the menu button the container that holds the two views disappears and it appears again when I close the menu and the animation completes. This is the code of the function that animates the menuview and after it completes animates the contenedortotal view that contains two views.
function clickMenu(direction){
if(menuView._toggle === false && (direction==null || direction=='right')){
//alert('paso por clickMenu'+menuView._toggle+' '+direction);
menuView.animate({
left: 0,
duration: 200,
curve:Ti.UI.ANIMATION_CURVE_EASE_IN_OUT
},function(){
//alert('paso por clickMenu'+menuView._toggle+' '+direction);
contenedorTotal.animate({
left: 200,
duration: 200,
curve:Ti.UI.ANIMATION_CURVE_EASE_IN_OUT
});
menuView._toggle=true;
});
}else if(direction==null || direction=='left'){
menuView.animate({
left: -200,
duration: 200,
curve:Ti.UI.ANIMATION_CURVE_EASE_IN_OUT
},function(){
contenedorTotal.animate({
left: 0,
duration: 200,
curve:Ti.UI.ANIMATION_CURVE_EASE_IN_OUT
});
menuView._toggle=false;
});
};
}
Related
I have made a simple animation in SwiftUI which repeats forever, directly when starting the app.
However when running the code the animated circle goes to the left top and then back to its normal position while doing the rest of the animation. This top left animation is not expected and nowhere written in my code.
Sample code:
struct Loader: View {
#State var animateFirst = false
#State var animationFirst = Animation.easeInOut(duration: 3).repeatForever()
var body: some View {
ZStack {
Circle().trim(from: 0, to: 1).stroke(ColorsPalette.Primary, style: StrokeStyle(lineWidth: 3, lineCap: .round)).rotation3DEffect(
.degrees(self.animateFirst ? 360 : -360),
axis: (x: 1, y: 0, z: 0), anchor: .center).frame(width: 200, height: 200, alignment: .center).animation(animationFirst).onAppear {
self.animateFirst.toggle()
}
}
}
}
and then showing it in a view like this:
struct LoaderViewer: View {
var body: some View {
VStack {
Loader().frame(width: 200, height: 200)
}
}
I don't know exactly why this happens but I have a vague idea.
Because the animation starts before the view is fully rendered in the width an height, the view starts in the op left corner. The animation takes the starting position in the animation and the change to its normal position and keep repeating this part with the given animation. Which causes this unexpected behaviour.
I think it is a bug, but with the theory above I have created a workaround for now. In the view where we place the loader we have to wait till the parent view is fully rendered before adding the animated view (Loader view), we can do that like this:
struct LoaderViewer: View {
#State showLoader = false
var body: some View {
VStack {
if showLoader {
Loader().frame(width: 200, height: 200)
}
}.onAppear {
DispatchQueue.main.asyncAfter(deadline: .now() + 0.01) {
showLoader = true
}
}
}
}
First attempt at SwiftUI here, converting a Swift Macos app to SwiftUI.
I'm wondering if it is possible to have the entire area within a Buttons frame be clickable as a part of the button. Seems only the highlighted area around the text is a part of the button.
Buttons
Code for one of the calculator buttons:
Button("÷", action: {
self.calculatorVM.operate("÷")
})
.frame(width: self.calculatorVM.buttonWidth, height: self.calculatorVM.buttonHeight)
.border(Color.blue)
.font(.body)
Got it squared away by configuring the button as follows:
Button(action: {
self.calculatorVM.recieveInput(self.button)
}) {
Text(button.title)
.font(.body)
.frame(width: buttonWidth, height: 50)
.background(button.buttonHeight)
}
.buttonStyle(PlainButtonStyle())
I'm using FabricJS in my web application. As I draw shapes, I notice that the control widget for all the objects are rectangular. Can the shape of a control widget be modified to fit the actual shape of the object? Say, a circle with a circular control widget.
I went through the Controls Customization demo. But there is no option to modify the shape of a control widget.
I need to modify the shape of the control widgets for the following purpose:
In my application whenever an object is clicked, its fill colour is toggled between black and white. In this case(refer the image below), because the circle has a rectangular control widget, clicking the pointed pixel selects the circle instead of the rectangle. I also hide the control widget from appearing by using hasControls property. So, the user will not know anything about the control widget. So, is the shape of the control widget editable?
I don't think there is an easy way to do that with fabric.js without writing a whole bunch of extra code. Fabric.js always draws a rectangle bounding box and uses it for selection controls. However, since you're planning on hiding the controls anyway, it sounds like you might be better off using perPixelTargetFind.
When true, object detection happens on per-pixel basis rather than on
per-bounding-box
Here's a quick demo:
const canvas = new fabric.Canvas('c', {
preserveObjectStacking: true,
perPixelTargetFind: true
})
const circle = new fabric.Circle({
radius: 50,
left: 50,
top: 50,
stroke:'green',
fill: 'white',
hasControls: false,
hasBorders: false
})
const rect = new fabric.Rect({
width: 200,
height: 150,
left: 50,
top: 25,
stroke: 'green',
fill: 'black',
hasControls: false,
hasBorders: false
})
canvas.on('mouse:down', (e) => {
const obj = e.target
if (obj) {
obj.set({
fill: obj.fill === 'white' ? 'black' : 'white'
})
canvas.requestRenderAll()
}
})
canvas.add(circle, rect)
circle.bringToFront()
canvas.requestRenderAll()
body {
background: ivory;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.4.0/fabric.min.js"></script>
<canvas id="c" width="300" height="200"></canvas>
On iOS click on TableViewRow child is firing event on TableViewRow instead of its child. How to fix it?
I have a tableView, which has click event attached to it and is filled with rows:
var tableView = Ti.UI.createTableView({
populateData: populateData
});
tableView.addEventListener('click', tableViewClick);
Rows are simple and have views added:
var row = Ti.UI.createTableViewRow({
type: 'row',
height: 70,
className: 'notes',
});
var container = Ti.UI.createView({
left: 15,
width: Ti.UI.SIZE,
touchEnabled: false,
});
var image = Ti.UI.createImageView({
image: '/images/usuwanie.png',
width: 35,
height: 35,
type: 'delete',
id: data.id,
searchType: data.type
});
container.add(image);
row.add(container);
Click action recognise which object fired the event:
var tableViewClick = function(e) {
var type = e.source.type;
var id = e.source.id;
var searchType = e.source.searchType;
var additionalText = e.source.additionalText;
alert(e.source.type);
switch(type) {
case 'delete':
deleteShopping(id,searchType);
break;
case 'edit':
editShopping(id, searchType, additionalText);
break;
}
};
It works perfectly on Android - if I click the imageView, than imageView is a source of an event (alert returns 'delete' and 'deleteShopping' function is invoked).
On iOS the source is always the row (instead of ImageView) and alert returns 'row' and no function is invoked.
The bug is actually in Android. iOS is behaving as expected. Since there is no event listener on the image, it should not be the source. The event is bubbling up to the TableView since that is where the listener is attached.
To fix it, you need to add an eventListener on the image of every row.
Te reason was that parent container had 'touchEnabled' property set to false. If so than children will not fire event. On Android it will work. On iOS it won't. So it only takes to modify code like this:
var row = Ti.UI.createTableViewRow({
type: 'row',
height: 70,
className: 'notes',
});
var container = Ti.UI.createView({
left: 15,
width: Ti.UI.SIZE,
//touchEnabled: false,
//touchEnabled above has to be commented
});
var image = Ti.UI.createImageView({
image: '/images/usuwanie.png',
width: 35,
height: 35,
type: 'delete',
id: data.id,
searchType: data.type
});
container.add(image);
row.add(container);
Hi I have created a simple menu in Unity but I wanted to create my own style for colour/fonts.
However for some reason it prints each button twice to the screen, once with my custom style, and once without.
this is the code I have used:
if(menu){
if (GUI.Button(Rect(Screen.width/2 - 50, Screen.height/2, 100, 30), "Start Game", customGuiStyle)){
Application.LoadLevel ("Level 1");
}
if (GUI.Button(Rect(Screen.width/2 - 50, Screen.height/2 + 30, 100, 30), "Options", customGuiStyle)){
menu = false;
options = true;
}
if (GUI.Button(Rect(Screen.width/2 - 50, Screen.height/2 + 90, 100, 30), "Quit", customGuiStyle)){
Application.Quit();
}
}
I have no idea why it is showing two texts, heres a screen shot of exactly what I mean...