Lets' say I have following text object:
var text = r.print(50, 50, "demo", r.getFont("Impact", 50), 30).attr({fill: '#fff', stroke: '#000'});
And later want to change it on mouse event to "something".
How can I do that?
text.attr('text', 'something') doesn't work, nor text[0].attr['text'], 's')
You are looking for...
text.attr({'text': 'something'})
Demo http://jsfiddle.net/EUrQv/
Paper.print() is not that same as Paper.text(). As far as I can tell, it's possible to change the text of the latter, but not the former (as print converts the text into a series of paths).
Related
I am Japanese, and I want to write Japanese words vertically in Fabric.js.
Japanese language has small letters, and the positions of the them are top-left corner in vertical writing.
So, I want to change the position of a small letter in iText.
I thought that I can change the position of a character by using "styles" parameter of iText, so I wrote as follows.
var iTextSample = new fabric.IText('h\ne\nl\nl\no', {
left: 50,
top: 50,
fontFamily: 'Helvetica',
fill: '#333',
lineHeight: 1.1,
styles: {
1: {
0: { textDecoration: 'underline', ←★ WORK
fontSize: 80, ←★ WORK
top:-10, ←★ NOT WORK
transformMatrix: [ 1, 0, 0, 1, 18, -50 ] ←★ NOT WORK
},
},
}
});
https://jsfiddle.net/uemon/tLy9eqj6/77/
The 'textDecoration' and 'fontSize' worked, but the 'top' or 'transformMatrix' didn't work.
Can't I use 'top' or 'transformMatrix' in the "styles" parameter ?
How can I change the position of one character ?
Thank you in advance.
So from the use of textDecoration property i guess you are on the 1.7 or similar version.
You should really move to the 2.0 version that has integrated support for multibyte languages and composition.
Said that, there is no support for vertical text in fabricjs at all.
This may change in the future.
You should really go here:
https://github.com/kangax/fabric.js/issues/511
refresh the request and maybe add some detail about it, because the actual mantainer may have no clue on how vertical text should work regarding input, decorations, multiple columns and so on.
Note that I am using Python3 and Phoenix.
I would like to display a number (double, but that does not matter now) formatted in some way (again, no matter what that way is) within a rectangle: almost a wx.StaticText but not editable by the user. This is to display some data coming from some hardware, such as a temperature.
Is there such a widget?
I tried with using the default wx.StaticText with a style but I must have done something wrong:
hbox = wx.BoxSizer(wx.HORIZONTAL)
title = wx.StaticText(parent, label=label)
title.SetLabelMarkup("<b>{}</b>".format(label))
hbox.Add(title, border=5)
value = wx.StaticText(parent, label="3.141592", style=wx.BORDER_RAISED)
value.SetWindowStyle(wx.BORDER_SIMPLE)
hbox.Add(value, border=5)
title = wx.StaticText(parent, label="\u2103")
hbox.Add(title, border=5)
Shows this on Linux (Fedora 24, GTK):
Wouldn't using a wx.TextCtrl set to read only do the job?
Temp = wx.TextCtrl(panel1, value="3.141592", style=wx.TE_READONLY)
Temp.SetBackgroundColour('green')
The simplest solution is to just use wxStaticText with a border style (e.g. wxBORDER_SIMPLE, ...). If you don't like the appearance this results in, it's pretty simple to make your own widget drawing whatever border you desire: just create a window, define its wxEVT_PAINT handler and draw the (presumably centered) text in it and a border outside of it.
i need to insert a title (not a tooltip, a text on the top) inside the svg rendered by Dojo. How can i do that?
Here my Dgauge:
http://jsfiddle.net/MacroX/pZU93/1/
PD: The line
gauge.title = 'Test Report'
doesnt show the title
EDIT: The question is regarding a label at the top of the gauge, not the title attribute as I originally thought.
You can use a TextIndicator much like you did for the value label below the needle, but you can set a labelFunc property that defines a function called to set a label and displays whatever string is returned from it.
var labelText = new TextIndicator();
labelText.set('x', 73.3);
labelText.set('y', 55);
labelText.set('labelFunc', function() {return 'Test Report';});
gauge.addElement('labelText', labelText);
Here is a modified version of your fiddle with the title text in place.
Original answer remans below in case someone else needs it
Pass the title in when you create the gauge:
var gauge = new CircularLinearGauge({
title: 'Test Report'
}, dojo.byId("gauge"));
You can also use set to set it after the gauge is created:
gauge.set('title', 'Test Report'); //does work :)
The reason for this is that the gauge widget needs to set the text you give as the title on a specific element within the widget's template. gauge.title just sets the title property of the gauge widget, and the widget has no idea when or with what value that property is being set and thus is not able to make it show up as a title attribute on the gauge.
Finally i got a way to resolve this, and this is useful when you need to personalize your dgauge. Here the example:
http://jsfiddle.net/MacroX/THJqV/
What i did is basicly create a gauge, fill it with background white, and then add elements inside
var baseWidth = 400;
gauge.addElement("background", function (g) {
var auxHeight = baseWidth * objGauge.offsetHeight / objGauge.offsetWidth;
g.createRect({
width: 400, height: auxHeight
//width: 400, height: 300
}).setFill("#FFF");
});
I dont know if is the best way, but works and i didnt find something similar in other sites
And what I think is great, this support multiple chart dgauges in only one SVG
I hope this will useful to someone else
I've been experimenting with String printing in LWJGL using slickutils. Generally when browsing the web I found two approaches to this. First being bitmaps where you have an entire alphabet and print each letter as a Texture, the other being using TrueTypeFonts and the truetypefont.drawString(20f,20f,"LWJGL String Test", Color.green) method.
However, most of the literature I found was a few years old. What is the right way to do this at the current time?
At the moment I'm using the TrueTypeFont method, however my result confuses me.
//It doesn't matter which Font I try to load, I get the same green bar.
//I think it has something to do with not finding the Fonts?
Font awtFont = new Font("Times New Roman", Font.BOLD, 24);
TrueTypeFont font = new TrueTypeFont(awtFont, true);
font.drawString(20f, 20f, "LWJGL TEST STRING",Color.green);
I've also copied an example from the internet and get the same result(just a bar).
Tried googling but couldn't find any fixes.
TrueTypeFont is deprecated. Use UnicodeFont instead.
Check this:
// Create a font with the size of 20, and not bold or italic.
Unicode font = new UnicodeFont("res/font.ttf", 20, false, false);
font.addAsciiGlyphs();
font.getEffects().add(new ColorEffect());
font.loadGlyphs();
g.setFont(font);
g.drawString("Shit example", 100, 100);
I'd like to increase the line height for a multiline text element generated with raphael. This does not appear to work:
text_element.attr({"line-height": "16" });
How can this be done? Thanks
You can do the following, but it's not pretty and breaks the encapsulation provided by Raphael. Consider the following:
text_element = r.text(10, 10, "Text in\nRaphael\nis a pain");
text_element.node.childNodes[0].setAttribute('dy', 0);
text_element.node.childNodes[1].setAttribute('dy', 5);
text_element.node.childNodes[2].setAttribute('dy', 5);
This will yield overlapping lines of text with the default font settings.
If I discover a better way, I'll update my answer.