I am having some trouble in adding text from an input box into my canvas, I have successfully added another layer, however my text doesn't seem to add to the canvas and I am baffled as to why not.
I have included a JSfiddle link,
Any help would be greatly appreciated,
Melissa
$("#addbutton").click(function () {
// simple label
var label = new Kinetic.Label({
x: 20,
y: 20,
draggable: true
});
label.add(new Kinetic.Tag({
fill: 'green'
}));
label.add(new Kinetic.Text({
text: $("#newtext").val(),
fontFamily: 'Verdana',
fontSize: 18,
padding: 10,
fill: 'white'
}));
textLayer.add(label);
textLayer.draw();
});
Related
Does anyone has clue how to target specific grid line and style like in the example?
I know how to dash line with:
grid: {
strokeDashArray: 10,
},
But how can I target grid line according to the tick value?
Desired result
Only way you can do it is via css
.apexcharts-gridline:nth-child(2) {
stroke-dasharray: 10;
}
Or use annotations instead https://apexcharts.com/docs/annotations/
I have sorted it by using annotations property. Here is an example:
// Breakdown line
annotations: {
position: 'front',
yaxis: [
{
y: 3000,
strokeDashArray: 5,
label: {
position: 'left',
borderColor: 'transparent',
textAnchor: 'middle',
offsetY: -10,
offsetX: 50,
style: {
color: '#D0D4D9',
background: "transparent",
},
text: ''
}
}
]
}
I'm using OpenLayers 6 and ol:ext FontSymbol & free FontAwesome for creating the marker.
I need to put number char into the center of the marker,
It's working fine for 0-9 char only but for more than 1 chars it's not working and showing only "1" like the glyph only accept 1 char.
This is my style :
var styles = new ol.style.Style({
image: new ol.style.FontSymbol({
glyph: number.toString(),
form: 'marker',
radius: 20,
fontSize: 0.2,
fontStyle: 'sans-serif',
rotation: 0,
rotateWithView: false,
color: 'white',
fill: new ol.style.Fill({
color: colorparam.toString(),
})
}),
});
Am I doing it wrong ? or is there any better way to do it ?
I tried to add original style - text after image but the char for all markers shown above all of the marker itself.
var styles = new ol.style.Style({
image: new ol.style.FontSymbol({
glyph: '',
form: 'marker',
radius: 20,
fontSize: 0.2,
fontStyle: 'sans-serif',
rotation: 0,
rotateWithView: false,
color: 'white',
fill: new ol.style.Fill({
color: colorparam.toString(),
})
}),
text: new ol.style.Text({
text: number.toString(),
scale: 1.2,
fill: new ol.style.Fill({
color: "#fff"
}),
}),
});
I choose to use font instead render image / icon file since I think font source will be loaded once and lighter than image.
ol-ext FontSymbol is designed to display font icon and only draw the first char of he string your are giving to it... The symbol itself is displayed as an image and thus is drawn under ol text style.
You can ask for a new feature at ol-ext (https://github.com/Viglino/ol-ext/issues) to display full text string instead of char in the symbol.
I can create a stage and add shapes. However, if I use the Konva.Node.create command then the stage no longer displays newly added shapes.
In the code below, the first text 'Hello World !' is displayed, but the second text (after the Konva.Node.create) where it should display 'Hello World 2!' does not appear on the stage.
A working fiddle of this code is here.
Any help would be appreciated. Thanks
var stage = new Konva.Stage({
container : "container",
width : 400,
height : 300
});
var layer = new Konva.Layer();
stage.add(layer);
var text = new Konva.Text({
x: 10,
y: 48,
text:'Hello, World!',
align: 'left',
fontSize: 30,
fontFamily: 'Calibri',
fill: 'green',
draggable: true,
name: `text_${Date.now()}`
});
layer.add(text);
layer.draw();
Konva.Node.create(stage, "container");
var text2 = new Konva.Text({
x: 40,
y: 48,
text:'Hello, World 2!',
align: 'left',
fontSize: 30,
fontFamily: 'Calibri',
fill: 'green',
draggable: true,
name: `text_${Date.now()}`
});
layer.add(text2);
layer.draw();
Konva.Node.create overwrites the original stage in div container and creates a new copy. So your changes are not visible.
Probably you just need to remove that line.
It worked!
var stage = new Konva.Stage({
container : "container",
width : 400,
height : 300
});
var layer = new Konva.Layer();
stage.add(layer);
var text = new Konva.Text({
x: 10,
y: 48,
text:'Hello, World!',
align: 'left',
fontSize: 30,
fontFamily: 'Calibri',
fill: 'green',
draggable: true,
name: `text_${Date.now()}`
});
layer.add(text);
layer.draw();
var stage = Konva.Node.create(stage, "container");
var layer = stage.getLayers()[0];
var text2 = new Konva.Text({
x: 40,
y: 48,
text:'Hello, World 2!',
align: 'left',
fontSize: 30,
fontFamily: 'Calibri',
fill: 'green',
draggable: true,
name: `text_${Date.now()}`
});
layer.add(text2);
layer.draw();
I am using Joint Js for my custom drawing tool.
And I have some problems with drawing the element on the picture below, i think it should be the Circle element with custom border, but i don't know how to do border like this.
Does anyone have any ideas how to solve this problem?
Needed Element
It is quite easy.
You just need a shape of type: basic.Image
I created and the base64 picture that you need.
Just paste this code to your Stencil and you are done.
new joint.shapes.basic.Image({
attrs: {
image: { width: 50, height: 50, 'xlink:href': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAB0VBMVEUAAADVACvYACfYACfYACfYACfYACfYACfVACrYACfYACfYACfYACfYACfYACfYACfZACbbACTYACfYACfZACbYACfVACvYACf/AADZACbWACnYACfVACvXACjYACfZACbXACjYACfYACfYACfYACfYACfYACfZACbXACjYACfYACfWACnZACbYACfMADPYACfbACTXACjaACbYACfaACXcACPZACbYACfYACfYACfYACfYACfWACnYACfZACbVACvXACjYACfXACjXACjXACjXACjYACfYACfWACnbACTXACjYACfYACfZACbYACfYACfYACfZACa/AEDXACjYACffACDXACjZACbXACjZACbYACfXACjYACfZACbYACfXACjYACfbACTYACfYACfbACTYACfZACbZACbYACfYACf/AADYACfbACTXACjZACbZACbZACbYACfjABzYACfYACfZACbYACffACDYACfZACbVACvYACfXACjaACXYACfbACTYACfYACfXACjXACj/AADZACbYACfaACXXACjYACfYACfZACbYACfTACzYACfYACfXACjXACjYACfYACfYACfYACfYACfYACfYACfYACcAAABaMEySAAAAmXRSTlMABqiXIbD7oytU7e7s6+rp6BX+rzVjGIQCZRm4EmbeL2ca9lu8iWkbP/p7HzbKCs8cbUTvNx0o373wJ/FF/UkeTMt0elOutcMlKhP8m59c+JiZBEbzCHOttIxibKU9vibWDvfFI6w8k57jAecxM35/cuUJ5nfbDRB8hQz5OT5vB+HMzmAD1MkpTXXiZKoX2c2BOjuC9C6Q8tGPRJElAAAAAWJLR0QAiAUdSAAAAAlwSFlzAAAN1wAADdcBQiibeAAAAAd0SU1FB+IFBxY1HGz05tsAAAM6SURBVFjDpZd7WxJBFMaPmjdE0K3I0ii1EMTQ8JLiLdOyJLVIMM1MMzPtZhJmaiF5T0sLRefbtoJnZheWZfbp/DXnPef3srMzzO4CcEcaf6typGec+T+DTJKVnaNcytXl5el0Or0+P99gMBoLCgqVDQgRzp5TdDgvEFmYkhmIFheKlIoX5Q6XkhsQUlyiVL0scBsQ8xWl8lWpQ6mqASkrV6pf4zcg5Hpi2SKdQkUqA2KJr1ptKQ0qpZO0WeVFu4GkNICqG5IWg11aclTL90GNogEU3cxiPdUOSSWbcBkAOGtZUzaT65haEJ1ofTIDaLjFeuuo2ki1JpdFUDWAhmba3IhaC5Va28T1FB3akxvA7Vba3nIqdVDlTnRHCKoG0EnbO2JCFxXuxgSLYFczgHsU6Irm3Zhm3T/tsKheATygk+g+SXvcmD4EzuhFwt0jZn2Y9dfzGrT3I9MnZumYPOLlAR4jkw7goXvrCb9BGzK1HrDieEDDue8tQ8oKPhwO8vMAT5HywRAOh7UYPENqCEZw+FyLgROpERjF4QstBjlIjcIYDse1GJQgNQa4ii+18AC4lWoBF6RJmwGeCmVgxovxauEdSJlhAod2LQavkJqASRxWaTF4jdQkTMkPB84oR2qKHVAZWgzeINXJDrRpDfzMW3bd4zYcv+M3eI+MTdx+dC9/4Df4yHYywCwmn+Z4eYcfmVkxc2ESeyrwxGeKuE7SAGb583z8lzwkAtF8gWi8C18psBDNF+nLxdIyD/+NrpthMaZ8p44FNan5dvYy8/1UCq5QKZRyJeZ+0OaVIIqrVCODQXU+OMh6V6m6ts7UjVI1vnSDda6vMX2TvXYQv8qdXPazvuZNaWVL8g64tJ1kGt7tJdYlbMmLlUQSP4fXEnHPzrS0pzK+viutkrHhX/Kyaee3rGE34Qcce7IGInTs/zFFvy2KTH/3Q3FfJHuOxEuczyQJ4faHQn53op6p+K+ZCQuEK4TwTJJVyj3g4Q9yk6/zoTk1bz5U22len14d1/tSPcHGwwPJ8YEwzzO8MHKkjB9FCjnwk0hzRgLxdCDi1Pb17fL1Fh8bxYUVjMfFvT6XJpiFp6LCo97xD9G9KT8fiyixAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE4LTA1LTA3VDIyOjUzOjI4KzAyOjAwwNjrNgAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxOC0wNS0wN1QyMjo1MzoyOCswMjowMLGFU4oAAAAZdEVYdFNvZnR3YXJlAHd3dy5pbmtzY2FwZS5vcmeb7jwaAAAAAElFTkSuQmCC' },
text: { text: 'Circle Shape', fill: '#000000', 'font-size': 12, stroke: '#000000', 'stroke-width': 1}
}
})
I am using highcharts and a phantomjs server to render charts and labels but the useHTML flag while rendering the labels does not seem to be working. I started the server as mentioned in the docs
phantomjs highcharts-convert.js -host 127.0.0.1 -port 3003
and then I am sending post requests with the following as the infile
{
chart: {
events: {
load: function() {
var label = this.renderer.label('Hello World', useHTML=true)
.css({
color: '#FF11FF',
fontSize: '12px'
})
.attr({
fill: 'rgba(0, 0, 100, 0.75)',
padding: 8,
r: 5,
zIndex: 6
})
.add()
box = label.getBBox();
label.align(Highcharts.extend(box, {
align: 'center',
verticalAlign: 'top',
x: 0,
y: 20
}),
null, 'spacingBox');
var label2 = this.renderer.label('Goodbye World')
.css({
color: '#222222'
})
.add()
label2.align(Highcharts.extend(label2.getBBox(), {
align: 'left',
verticalAlign: 'top',
x: 0,
y: box.height + 40
}),
null, 'spacingBox');
}
},
height: 800,
width: 500
},
title: {
text: ''
}
};
I am then exporting this as an svg, but the text for the label gets printed as it is. I also tried
var label = this.renderer.label('Hello World',null, null, 'rect', null, null, true)
but this leads to the first text not being displayed at all, the blue background gets added and so does the second text but not the first text. The first one is not even working on export.highcharts.com but the second one works fine over there. What am I doing wrong here ?
Renderer.label takes more arguments than you provided, docs:
http://api.highcharts.com/highcharts/Renderer.label
Example:
this.renderer.label('Hello World',null,null,null,null,null,true)
Your fiddle with proper use of Renderer.label:
https://jsfiddle.net/6atnc2xj/