If I execute the following code the text is shown bad (it seems not aliased) and not right aligned
why?
context.textBaseline = "top";
context.textAlign = "right";
context.fillStyle = "#F00";
context.font = "italic 30tpx sans-serif";
context.fillText("Lorem ipsum dolor sit amet", 50, 50);
I'm using FF 3.6...
I think Firefox doesn't know what you mean by "30tpx" and is ignoring your style. Also if you align right most of the text will be off the left of the screen -- maybe you mean to align right? Try this
contexto.textAlign = "left";
contexto.fillStyle = "#F00";
contexto.font = "italic 30px sans-serif";
When you align right it draws the text from right to left, with the text ending at the x coordinate.
I you look at this example you can see how the different text align settings draw text in relation to the x coordinate. I've included you code as well.
Related
I have been tinkering with Tkinter the last couple of days to create a little game.
I have searched for how to display text ontop of an image label but there is a little downside, it won't display exactly at the spot i am looking(in this case the top left side of the label).
I tried anchor and compound together in the same label but it doesn't seem to do anything new
the text still remains in the middle.
The code looks like this:
'''Adjusting the information frame'''
self.image_info = PhotoImage(file=locate_images("_info_panel", ""))
self.label_text_info = "• Welcome to Agony,\nto play or read the rules please go to File"
self.label_info = Label(self.info, text=self.label_text_info, font=10, image=self.image_info, compound=CENTER, anchor=NW)
self.label_info.grid(row=0, column=0)
Edit:
If I try to add anything else other than compound=CENTER the text is displayed outside the boundingbox of the image on the specified side.
Moved from an edit to the question by the OP to an answer.
Use a Canvas:
'''Adjusting the information frame'''
self.image_info = PhotoImage(file=locate_images("_info_panel", ""))
self.label_text_info = "• Welcome to Agony,\nto start the game or read the rules please go to File"
self.canvas_info = Canvas(self.info, width=300, height=600)
self.canvas_info.create_image((0, 0), image=self.image_info, anchor=NW)
self.canvas_info.create_text((140, 25), text=self.label_text_info)
self.canvas_info.grid(row=0, column=0)
I was approaching it wrong from the start, I am fearly new to tkinter
and I had to use a canvas to display the items inside of.
I'm stumped on this one, I need another set of eyes to help me see what I'm missing. I have a bl.ock up here:
http://bl.ocks.org/hepplerj/c419baa3abf7363cd2d5
As you'll see, a few of the rect elements aren't drawing along the x axis correctly. Any pointers on what I'm overlooking? Much appreciated!
There's just a minor issue with your code. First of all, here's a fiddle that's the same as your bl.ock: http://jsfiddle.net/gp2ex7fw/
View source and count the <g class="bar"> elements, and you'll see that there are only seven, whereas you have data for eight grains. millet/sorghum groats is missing altogether. This creates gaps in each bar, resulting in the bar not filling up the entire height.
This is because of the following part of your code:
d3.select("svg").selectAll("g")
.data(stackLayout(stackData))
.enter()
.append("g")
.attr("class", "bar")
When you do selectAll("g"), you're also selecting the first g element (used for transformation) that was attached to your svg element earlier.
The fix is very easy. Just change the above code to:
d3.select("svg").selectAll(".bar")
.data(stackLayout(stackData))
.enter()
.append("g")
.attr("class", "bar")
Now we're only selecting g elements with class="bar" and not missing any data. Here's a working fiddle: http://jsfiddle.net/gp2ex7fw/1/
I create a svg area. As things happen in the document, I want to display text strings in the svg area in xy coordinates within the svg area where I click.
How can I append a new text element to given xy coordinates in the svg area as these things happen?
var svg = document.getElementById("id-of-my-svg");
var text = document.createElementNS("http://www.w3.org/2000/svg", "text");
text.setAttribute("x", clickX);
text.setAttribute("y", clickY);
text.appendChild( document.createTextNode("Some text") );
svg.appendChild(text);
Demo here
I'm trying using this code :
LoadMoreElement elm = new LoadMoreElement (normalCaption, loadingCaption, tapped);
elm.BackgroundColor = UIColor.Blue; // new UIColor (27,109,192,1);
elm.TextColor = UIColor.White;
This results in a complete blue rectangular cell with no rounded corners.
What I'm missing?
The LoadMoreElement is only intended to be used in the middle of the table, not on the corners.
If you want to use it, you will need to write custom code to render the corners, you can see some sample code in the ImageElements.
This may be a very dumb question, but how do I draw a path that will stretch to a div's width?
I am experimenting with Raphaeljs to make an interactive chart: the user can click sparklines and the lines shift up and down to reveal text content. I see that Raphael's rectangles and other shapes will stretch to width fine by setting the width to 100%, but I can't get a line to do this.
I've set up the paper like this:
var SLAPaper = new Raphael( document.getElementById("LineSLA"), "100%", 60);
Set up the line like this:
var lineSLA = SLAPaper.path("F1 M 0,42L 103,12L 222,45L 390,13L 460,45L 453,27L 455,28L 450,0L 479,25");
I also set a viewbox but this doesn't seem to make a difference. I can't set a % width on the viewbox anyway:
SLAPaper.setViewBox(0,0,1500,60, true);
Any help appreciated. Thanks.
I've personally had problems with using percentages for defining size of both paper and objects in Raphael, especially with Internet Explorer. The best I could come up with would be to scale the line to fit inside paper, based on the width of the path (assuming that the width is more than the height):
var line = SLAPaper.path("F1 M 0,42L 103,12L 222,45L 390,13L 460,45L 453,27L 455,28L 450,0L 479,25");
var scl = SLAPaper.width / line.getBBox().width;
line.transform('S' + scl + ',' + scl + ',0,0');