I tried using the drawing API of highcharts. Im trying to create a custom map with text inside. But I cant find a way to center the text inside a rect. I have to create a uniform width boxes with varying text inside. Is there any way to center the text inside with manually adjusting/adding just like the example http://www.highcharts.com/demo/renderer. Thanks.
You can center text inside a container with attribute text-anchor like this
renderer.text('helloworld', xVal, yVal).attr({
"text-anchor" : "middle"
}).add();
The elemens are printed as SVG / VML elements, not HTML, so you cannot use text-align:center;
Have found the solution for aligning the text in center
ren.label(' TEST',210, 200 ,'rect', null, null, true)
Label comes useHTML parameter which is set to false by default.
You can use the pre tag also.
Related
I have this IText object within a parent Group object.
When I select the Group and resize it horizontally (and vertically as well) the IText resizes as well which makes the text Strech and look awfull.
Now what I would like to do is have the IText center itself (keeping its aspect ratio) within the Group.
How can I do that. I tried modifying the Width and Left of the IText when the object is scaling, but that did not work.
try use latest fabricjs version ( 1.6.0.rc1 ) and instead of using fabric.IText use fabric.Textbox.
This new class has the properties you are looking for, the controls normally used for scaling are instead used for resizing the element and the text flows inside it.
I was not able to make the latest fabric.Textbox work exactly like I wanted.
Luckily, I found a way of making the fabric.ITextcenter horizontally when the parent fabric.Group is resized horizontally and also make the same fabric.IText Text grow in size based on the vertical resize. No ugly text stretch.
Here is the solution:
https://jsfiddle.net/t44wyday/46/
I am trying to create a simple SVG icon (composite path) using Adobe Fireworks.
Icon shall comprise of a circle with an alphabet in its centre.
The background of circle is supposed to be transparent but that of that should be would be the outline color of circle.
When i am trying to merge both elements as composite path using Join then the text fill is lost.
Icon is supposed to be a Single Composite Path only as it is then required to be imported in my Javafx application.
I am attaching both expected icon and current icon being created for understanding issue
Any possible solution for same would be really helpful
Thanks in advance
I use jvectormap. I create map. I need to save this svg map as image. I use a plugin named saveSvgAsPng.js. It works ok. My problem is that ,png image makes transparent. Is there a method that I remove svg background transparency?
Thanks in advance.
Have you tried looking at the usage Docs for saveSvgAsPng ?
https://github.com/exupero/saveSvgAsPng
saveSvgAsPng(document.getElementById("diagram"), "diagram.png", {backgroundColor: "white"});
Try and pass "white" or the HEX color value "#FFFFFF"
Pass backgroundColor in the options object:
Available Options:
backgroundColor — Creates a PNG with the given background color. Defaults to transparent.
scale — Changes the resolution of the output PNG. Defaults to 1, the same dimensions as the source SVG.
selectorRemap — A function that takes a CSS selector and produces its replacement in the CSS that's inlined into the SVG. Useful if your SVG style selectors are scoped by ancestor elements in your HTML document.
When use TabPane with tabs placed on sides the tabs' headers and strings rotates and has vertical orientation. Is there any way to place tabs' string horizontally when use TabPane with the right/left sided tabs?
Put string as label into graphic node. Graphic node can be rotated (there is a rotate graphic property of the tabpane)
Specifically, instead of tab.setText("Text") use tab.setGraphic(new Label("Text")), and look at TabPane.rotateGraphic property.
If you want implementation via fxml : then yes, it is possible. You need to specify attribute rotateGraphic of tabPane, if needed, and set property graphic of a tab to a new instance of label, and that is all. Mostly all you can do via java-code, you can repeat via fxml.
Talking about tabMinWidth - I think, you should look at binding expressions here :
http://docs.oracle.com/javafx/2/api/javafx/beans/binding/Bindings.html
Specifically, I think, you should be interested in max() method - you need to have max of widths of all tabs.
I have done in this way ...
Set following CSS for Tab pane in .CSS file
-fx-tab-min-width: 30px;
-fx-tab-max-width: 30px;
-fx-tab-min-height: 130px;
-fx-tab-max-height: 130px;
After that set label in Tab graphics,Set Min Width for label (Must require)
I'm working with SVG using the Raphael library. I can apply a fill colour to an object like so:
circle.attr({fill: "#ff0000"});
And this also works (though the Raphael documentation doesn't mention it):
circle.attr({fill: "url(pattern.png)"});
I am able to use transparent PNGs as fill patterns, and transparency works as expected. The svg object is completely transparent where the fill pattern image is transparent. But what I would like to do is specify both a fill pattern image and a fill colour, so that the colour would show through where the pattern image is transparent - similar to the 'background' property using CSS, for example. Is this possible with SVG?
You can define a pattern that has a rect with a fill, and an image that is your png on top of that rect. Then use the pattern as fill for the circle (or whatever element you want).
This means stepping outside of Raphaël, or extending it to do what you want. Note that what ({fill: "url(pattern.png)"}) does is to create a pattern element and and append an image element pointing to the given url. It's quite possible to hack Raphaël to allow you to pass a color too, and then you deal with that in the code that creates the pattern by creating a rect of the same dimensions as the image with the given fill color.
I should say that if you want it to work with IE<9 then you probably need to implement it in VML too.
Other options include drawing two shapes, one with color fill and the other with the raster image fill. Yet another is to make the png include the background color so that it's not transparent.