public var body: some View
{
ZStack{
GeometryReader { geometry in
RoundedRectangle(cornerRadius: 25, style: .continuous)
.frame(width: geometry.size.width*1.00, height: geometry.size.height*1.00)
.zIndex(0)
}
}
}
I'm using GeometryReader to draw a rounded rectangle to fill up the entire watch screen, this looks fine on a 38mm watch simulator, but as I increase the watch size to 40, 42, 44mm I noticed that the height is not filling up the whole screen. I have to adjust my multiple to say 1.1 for example to fill up more of the screen.
Can someone tell me if I am using GeometryReader incorrectly?
Unless you really need the full functionality of the geometry reader, to actually measure the size of the object of the screen, then I think you could achieve the effect you want by setting the frame's maxWidth and maxHeight to .infinity and by ignoring the safe area on the bottom.
var body: some View {
ZStack {
RoundedRectangle(cornerRadius: 25, style: .continuous)
.frame(maxWidth: .infinity, maxHeight: .infinity)
.edgesIgnoringSafeArea(.bottom)
}
}
Note that when you use a ZStack the order of the items in it determine the order on the screen. The first item in the stack will be at the bottom, and then each item will be layered on top.
Related
I am updating button text based on values in a database and as these values may be very long or very short, I want the button size to remain constant and the text to resize dynamically depending on how big the value is, so it remains within the button and not truncated (The values will be sentences, it is a language learning app). I basically want to give the font size a minimum possible value and a maximum possible value.
I know how to do this in Android Studio.
autoSizeMinTextSize=14sp
autoSizeMaxTestSize=20sp
But when I tried to use suggestions like a large font size with minimumScaleFactor, it doesn't work. It just makes the text incredibly small.
Here is my button style.
struct SoundButton: ButtonStyle {
func makeBody(configuration: Self.Configuration) -> some View {
configuration.label
.foregroundColor(Color.black)
.multilineTextAlignment(.center)
.font(.custom("arial", size: 20))
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background(configuration.isPressed ? LinearGradient(gradient: Gradient(colors: [Color("DarkestGreen"), Color("LightGreen")]), startPoint: .top, endPoint: .bottom):LinearGradient(gradient: Gradient(colors: [Color("DarkGreen"), Color("LightGreen")]), startPoint: .top, endPoint: .bottom))
.cornerRadius(10)
.shadow(radius: 3.0)
.overlay(
RoundedRectangle(cornerRadius: 10)
.stroke(Color.white, lineWidth:2))
.padding(2)
.scaleEffect(configuration.isPressed ? 0.975 : 1.0)
}
}
And here is the button code.
Button(action: {
playSound(sound: "\(self.category)_audio1", type: "mp3")
self.translation = self.btns[1][1]
}) {
if(gotValues==true) {
Text("\(self.btns[1][0])")
} else {
Text("\(self.btn1)")
}
}
Here is what my screen looks like in the app.
What can I add to this to achieve the desired effect? Thank you.
Also, here is the working android version.
As far as I understood your goal the following should give you required effect (or sort of)...
Tested with Xcode 11.4 / iOS 13.4
configuration.label
.padding(.horizontal, 8).lineLimit(1).minimumScaleFactor(0.4) // << this place !
.foregroundColor(Color.white)
I am creating a simple 'tooltip' subclass that is a rounded rectangle and a small triangle that will be 'anchored' to another view.
I created a UILabel subclass and am overriding 'drawRect' to shrink the main label area and draw a triangle.
The 'roundRect' represents the rounded rectangle portion that should contain the full text.
This all works great, except that I am having trouble getting the full text to be shown within the 'roundRect'. It appears that the text just doesn't show up for the last line (i.e. where the triangle now occupies).
One other thing to note, I am using auto layout and have setup the constraints for the 'tooltipLabel' to fill the screen as needed. This works as expected, as reducing/adding more text shows the appropriate sized tooltip. But it seems like I need to somehow inform the 'tooltip' or 'auto layout' that the text should be fitted into the 'roundRect' portion of the 'tooltipLabel'.
Screenshot #1 uses this 'drawTextInRect' method and you can see that the full text is being shown, but overlaps into the 'triangle' area (plus it has no insets, which is not the desired look):
override public func drawTextInRect(rect: CGRect) {
super.drawTextInRect(rect)
// super.drawTextInRect(UIEdgeInsetsInsetRect(rect, UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)))
}
Screenshot #2 uses this 'drawTextInRect' method with the desired insets (also adds the triangleHeight so that space is not written into with text) and you can see that it cuts off the 2nd and 3rd lines of text, as they don't 'fit' within the 'roundRect' bounds:
override public func drawTextInRect(rect: CGRect) {
// super.drawTextInRect(rect)
super.drawTextInRect(UIEdgeInsetsInsetRect(self.roundRect, UIEdgeInsets(top: 10, left: 10, bottom: 10+self.triangleHeight, right: 10)))
}
Here is the 'drawRect' override:
override public func drawRect(rect: CGRect) {
self.roundRect = CGRect(x: rect.minX, y: rect.minY, width: rect.width, height: rect.height-self.triangleHeight)
self.triangleBezier.moveToPoint(CGPoint(x: self.roundRect.midX-self.triangleWidth/2, y: self.roundRect.maxY))
self.triangleBezier.addLineToPoint(CGPoint(x: rect.midX, y: rect.maxY))
self.triangleBezier.addLineToPoint(CGPoint(x: self.roundRect.midX+self.triangleWidth/2, y: self.roundRect.maxY))
self.triangleBezier.closePath()
self.roundRectBezier = UIBezierPath(roundedRect: self.roundRect, cornerRadius: 5.0)
self.roundRectBezier.appendPath(self.triangleBezier)
self.tooltipColor.setFill()
self.roundRectBezier.fill()
super.drawRect(rect)
}
I would actually not be subclassing UILabel for this, and make your own tooltip class composed of the outer view and the internal label with auto layout constraints. The internal label determines the whole height of the view.
Something like this with appropriately rounded off corners/triangle:
Alternatively, use UITextView instead if you want to assign padding: Adding space/padding to a UILabel
is it possible to modify the content of a surface (used within GridLayout) without using CSS? For example to center the text?
Basic example:
function createGrid( section, dimensions, menuData ) {
var grid = new GridLayout({
dimensions: dimensions
});
var surfaces = [];
grid.sequenceFrom(surfaces);
for(var i = 0; i < dimensions[1]; i++) {
surfaces.push(new Surface({
content: menuData[i].title,
size: [undefined, undefined],
properties: {
backgroundColor: "#ff0000",
color: "white",
textAlign: 'center',
}
}));
}
return grid;
}
I added the center property, but I also want to have the content in the middle of my surface. Do I have to use CSS or is there another way?
I tried adding another View/Surface within this Surface and added the align/origin modifier. Didn't work: I still had to adjust the origin/align values for the specific (browser) layout ...
I'm not so sure about you first question, but I can answer the second one.
text-alignhelps you horizontally center your content. So the problem is how to do it vertically.
The cleanest way to do it is to set the line-height the same as the containing div's height. In your case, there are two ways to do it:
1) calculate the height of the grid. For example, if you have a 9*9 GridLayout for the whole screen, then we will have gridHeight = window.innerHeight/9. Then you just need to add lineHeight: gridHeight to your properties object.
check http://jsfiddle.net/mrwiredancer/veLpbmmo/2/ for full exmaple
2) if you are not able to calculate the height of the grid beforehand, you can center a fixed-height(smaller than the grid's height) surface in the middle of the grid. For example, your GridLayout is contained in a dynamic view, but you're sure that your grid is no less than 20px high. Then you can do this:
var container, surface, __height = 20;
for(var i = 0; i < dimensions[1]; i++) {
container = new Container({ //View works as well
properties: {
backgroundColor: '#FF0000'
}
})
surface = new Surface({
content: menuData[i].title,
size: [undefined, __height],
properties: {
lineHeight: __height+'px', //same as surface's height
color: "white",
textAlign: 'center',
}
});
container.add(new Modifier({origin: [.5, .5]})).add(surface);
surfaces.push(container);
}
check http://jsfiddle.net/mrwiredancer/uxq30yp9/1/ for full example
In paperjs I can not find a way to re size the text item pointText. I would like my users to be able to click to select the text item, then when the handles appear be able to drag to re size the text (keeping the aspect ratio). No where in the docs is it clear or doable. I have a feeling that I'm missing something or its not possible.
You could do a hitTest only on the bounds of PointText items.
var text = new PointText({
point: [50, 50],
content: 'The contents of the point text',
fillColor: 'black',
fontSize: 25,
selected: true
});
function onMouseDown(event){
text.res = project.hitTest(event.point, {
type: 'PointText',
bounds:true
}
);
console.log(text.res.name);
}
Then parse the result to make sure it's a corner and perform a scale centered on the opposite corner on the next onMouseUp.
I am trying to achieve a layout like this:
where:
Navbar is just a bootstrap-like top menu, 60px of height, always on top
Pop-up menu is fixed in that position (not always visible), always on top
The entire free area (windows w.o. navbar) is filled with Canvas.
Live example: jsFiddle
I have a problem with Canvas. I currently have a simple style:
<canvas id="le_canvas">Y U NO CANVAS</canvas>
...
#le-canvas {
position:absolute;
width:100%;
height:100%;
}
and the canvas is filling the background, but:
the resolution is very low
it doesn't maintain ratio during window resizes.
What I'd like (if it is possible):
full resolution of the area to fill (1:1 pixel on canvas and on screen)
set the ratio of the area to fill
bonus: update the above after window resize
Setting the canvas element in per-centage will not set the actual canvas size which must be set in absolute pixels. What happens here is that you get a canvas with a default size which then is stretched by the html-rendering giving the blurry look.
You therefor need to set the size by using f.ex. the window's sizes in absolute pixels.
You can do this like this (update of fiddle here: http://jsfiddle.net/x5LpA/3/ ) -
Create a function that sets the canvas size based on window size (you will of course need to subtract height of bars etc, but to show the principle):
function initCanvasArea(cnv) {
cnv.width = window.innerWidth;
cnv.height = window.innerHeight;
}
As the canvas content are cleared when the canvas is re-sized you need to render the content again for each time. Therefor it will be smart to extract the render content into a separate function like f.ex:
function renderCanvas(ctx) {
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect(0, 0, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect(20, 20, 55, 50);
}
Now, make the main function a self-invoking one where you also attach an event handler for windo.resize to update the canvas:
$(function () {
var canvas = $('#le_canvas')[0];
var ctx = canvas.getContext('2d');
initCanvasArea(canvas);
renderCanvas(ctx);
window.onresize = function(e) {
initCanvasArea(canvas);
renderCanvas(ctx);
};
})();
And finally edit the CSS-rule by removing the width/height set to 100%;
#le_canvas {
position:absolute;
}
(Tip: a better approach here is to use the fixed attribute for position - plus use a wrapper element, padding, box-sizing.. but that is out of scope for this question).
Is this what you are after? I used $(document).width() and $(document).height() to get the width and height for the rectangle. http://jsfiddle.net/x5LpA/1/