The goal is to move the button layer vertically upwards from the bottom the middle of the screen, whilst growing to a larger size. However, upon clicking the layer it does not move to the exact center. It moves up but shifts to the right. Why is this?
Code
bg = new BackgroundLayer
backgroundColor: "#f39c12"
button = new Layer
width: 100
height: 100
borderRadius: 100
backgroundColor: "white"
x: Align.center
y: Align.bottom(-100)
button.on Events.Click, ->
button.states.next()
button.states =
StateA:
width: 300
height: 300
borderRadius: 300
y: Align.center
The reason is that Align.center is something that is only calculated when you create the layer or a state. For that reason, adding x: Align.center to the state also doesn't work (as you might expect it to).
However, there is an easy way to do this, by setting the midX property of the state to Screen.midX. Full example:
bg = new BackgroundLayer
backgroundColor: "#f39c12"
button = new Layer
width: 100
height: 100
borderRadius: 100
backgroundColor: "white"
x: Align.center
y: Align.bottom(-100)
button.on Events.Click, ->
button.states.next()
button.states =
StateA:
width: 300
height: 300
borderRadius: 300
y: Align.center
midX: Screen.midX
Working prototype can be found here: https://framer.cloud/RsULi
When you enlarge the height and width of the button, the button will enlarge, but its x and y properties may not change as you expect.
Instead, try adjusting scale in StateA:
button.states =
StateA:
borderRadius: 300
y: Align.center
scale: 3
Related
Original position
original
When Button moving to the left
executed
https://codesandbox.io/s/material-demo-forked-hwvxl?file=/demo.js
Please tell me how to do it, thanks
you just add marginLeft t your paper as the same margin as your button
margins indicate how many spacing is there between elements , and it can be set in all 4 directions or on one of the axis
paper: {
maxWidth: 400,
minWidth: 100,
marginLeft : 50 // here
},
btn: {
marginLeft: 50 // same as this
}
I'm trying to create a chain-like structure in SpriteKit and I'm having trouble understanding the behavior of SKPhysicsJointLimit's maxLength property. It seems not to do anything at all.
This question didn't solve my problem.
According to the documentation, maxLength is The maximum distance allowed between the two physics bodies connected by the limit joint.
However, my two nodes become oriented much farther apart than their maxLength value. It's true that I'm setting their initial positions to be farther apart than maxLength -- but I would expect the nodes to pull together during the simulation, as if tied together by a stretchy rope. Instead, the nodes remain far apart.
So, here's some code that sets a joint between two SKSpriteNodes.
let screen = UIScreen.main.bounds
let bodyA = SKSpriteNode(imageNamed: "box.png")
let bodyB = SKSpriteNode(imageNamed: "box.png")
bodyA.size = CGSize(width: 20, height: 20)
bodyB.size = CGSize(width: 20, height: 20)
bodyA.position = CGPoint(x: screen.width*0.4, y: screen.height*0.8)
bodyB.position = CGPoint(x: screen.width*0.6, y: screen.height*0.8)
bodyA.physicsBody = SKPhysicsBody(circleOfRadius: 20)
bodyB.physicsBody = SKPhysicsBody(circleOfRadius: 20)
addChild(bodyA)
addChild(bodyB)
let pinJoint = SKPhysicsJointLimit.joint(withBodyA: bodyA.physicsBody!, bodyB: bodyB.physicsBody!, anchorA: CGPoint(x: 0.5, y: 0.5), anchorB: CGPoint(x: 0.5, y: 0.5))
//This doesn't seem to do anything:
pinJoint.maxLength = 5.0
scene?.physicsWorld.add(pinJoint)
In the simulation, it's clear that there is a physics joint connecting the two nodes -- it's just that the nodes are much farther apart than they should be.
Why doesn't my maxLength value change the behavior of my two nodes, and how do I fix the problem? What am I not understanding?
Thanks for your input!
Be sure that the anchor points are in scene coordinates, as described in the documentation. The (0.5, 0.5) is likely intended to be "center of the sprite" or something like that, but that's not correct for a joint.
I am trying to create a venn diagram of two elements from a scatter plot widget on package fl_chart.
scatterPlot(screenSize) {
return ListView(children: [
SizedBox(
width: 500,
height: 500,
child: ScatterChart(
ScatterChartData(
scatterSpots:
_createSpots(determineCircleLocation(screenSize), screenSize),
minX: 0,
minY: 0,
maxX: screenSize.width,
maxY: screenSize.height,
borderData: FlBorderData(show: false),
...
I have this problem that whenever I resize my window the scatter circles are moving - so if at a full screen it appeared that they had no intersection, when I resize the screen it appears like it has an intersection.
I was trying to wrap my plot in a SizedBox thinking that would stop the resizing side effects but it didn't.
Here's a demo of the problem
Is there a way to prevent this from happening?
While writing this I thought that by changing maxX and maxY to be some constants could help, but it resulted even worst outcome.
because we set a direct size (no matter in which size is it running) this problem happens.
You can check the window size, then update the dot's radius based on the window size.
(I calculated a number, then multiplied with radiuses).
Watch the video below. and check the code here:
LayoutBuilder(
builder: (context, constraints) {
final size = constraints.biggest.shortestSide;
final radiusMultiplier = size / 800;
return Padding(
padding: const EdgeInsets.only(right: 18.0),
child: ScatterChart(
ScatterChartData(
scatterSpots: [
ScatterSpot(5, 7, radius: 60 * radiusMultiplier,),
ScatterSpot(8, 4, radius: 20 * radiusMultiplier,),
ScatterSpot(3, 8, radius: 70 * radiusMultiplier),
],
minX: 1,
maxX: 10,
minY: 1,
maxY: 10,
)
),
);
},
)
Since Xcode 8.2.1 and iOS 10.2, I'm seeing (randomly) wrong area for SKPhysicsBody when constructed as circle. This is my code:
let boundingBox = (node.path)?.boundingBox
let radius = (boundingBox?.size.width)! / 2.0
node.physicsBody = SKPhysicsBody(circleOfRadius: radius)
print("bubbleRadius: \(radius), boundingBox: \(boundingBox), physicsArea: \(node.physicsBody?.area), physicsAreaShouldBe: \((CGFloat.pi * radius/100 * radius/100))")
Now random factor. I couldn't find any clue when this printed 'physicsArea' is correct and when it's wrong. Sometimes print shows this (where you will see that area of PhysicsBody is calculated differently?):
bubbleRadius: 50.0, boundingBox: Optional((-50.0, -50.0, 100.0,
100.0)), physicsArea: Optional(0.349065870046616), physicsAreaShouldBe: 0.785398163397448
And sometimes print shows this (where you can see that area is calculated normally - per my understanding of area of circle):
bubbleRadius: 50.0, boundingBox: Optional((-50.0, -50.0, 100.0,
100.0)), physicsArea: Optional(0.785398185253143), physicsAreaShouldBe: 0.785398163397448
radius is always the same, only area gets calculated differently sometimes. This makes my circles overlap each other in the scene because their body is smaler than it looks.
Any ideas what might this be? Thanks.
I like to set different layer name for layers that are created inside the for loop. Following is the code that is working, but it creates three layers named "circle" which prevents me from doing anything specific to let's say the second circle
for i in [1..3]
circle = new Layer
x: 15 + i*50
y: 15
height:10
width:10
I tried doing circle[i] but it didn't work. Any help is highly appreciated.
You need to create array of layers:
circles = []
for i in [1..3]
circles.push new Layer
x: 15 + i*50
y: 15
height: 10
width: 10
or more coffeescript'ish (thx #moo_is_too_short)
circles = for i in [1..3]
new Layer
x: 15 + i*50
y: 15
height: 10
width: 10
And access:
circles[0]
circles[1]
circles[2]