I have a project where I use Openlayers in order to display features. On top of each of my features I show a label consisting of the description of that specific feature.
I have noticed that on thin features the vector label does not show. I do not know why this is happening because I have never set a value where the text should of should not be shown.
This is the function that I use in order to set the style and vector label of each feature:
style: (feature) => {
return new Style({
fill: new Fill({ color: 'rgba(43, 146, 190, 0.4)' }),
stroke: new Stroke({
width: 3,
color: 'rgba(43, 146, 190, 1)',
}),
text: new Text({
font: '13px Calibri,sans-serif',
fill: new Fill({ color: '#fff' }),
stroke: new Stroke({
color: '#000',
width: 2,
}),
text: feature.get('description'),
}),
});
},
Here you can see that the label is set for most features except those that are small of very thin.
I have already found the solution. In order to show the labels on small or thin features you need to set the overflow value of the text object to true.
So the function to generate a label based on a feature should be as follows:
style: (feature) => {
return new Style({
fill: new Fill({ color: 'rgba(43, 146, 190, 0.4)' }),
stroke: new Stroke({
width: 3,
color: 'rgba(43, 146, 190, 1)',
}),
text: new Text({
font: '13px Calibri,sans-serif',
fill: new Fill({ color: '#fff' }),
stroke: new Stroke({
color: '#000',
width: 2,
}),
text: feature.get('description'),
overflow: true,
}),
});
},
Related
I want to assign text or label using OpenLayers to Icons. I am able to assign the label to the icon but it places text on the icon .but I want to display label at offset so icon and label both display properly. I have tried using offsetY but it is not working and does not change the placement.
var styleToponimiFunction = function(feature,resolution) {
console.log(feature);
var iconName;
if (feature.get("remark")=='Daerah Istimewa') {
iconName='daerah_istimewa2.png';
}
else if (feature.get("remark")=='Kecamatan'){
iconName='kecamatan.png';
}
iconStyle = [new ol.style.Style({
image: new ol.style.Icon(({
anchor: [0.5, 46],
anchorXUnits: "fraction",
anchorYUnits: "pixel",
scale:0.03,
opacity:1,
src: "icons/" + iconName,
})),
text: new ol.style.Text({
text: feature.get('namobj'),
font: '12px Calibri,sans-serif',
fill: new ol.style.Fill({ color: 'black' }),
stroke: new ol.style.Stroke({
color: '#fff',
width: 2,
textAlign: 'center',
Baseline: 'hanging',
offsetX : 0,
offsetY : -12,
}),
declutter: true,
overflow: true
}),
})
]
return iconStyle;
}
The text options should not be inside the Stroke constructor, also Baseline should be textBaseline
stroke: new ol.style.Stroke({
color: '#fff',
width: 2,
}),
textAlign: 'center',
textBaseline: 'hanging',
offsetX : 0,
offsetY : -12,
I want to make Editable Text which is curved along a fabric.Path as bellow expected image.
Here is my code:
I created a curved fabric.Path & a fabric.TextBox, but I don't know how to curve text along that Path. Please help me resolve this problem.
var canvasObject = document.getElementById("editorCanvas");
// set canvas equal size with div
$(canvasObject).width($("#canvasContainer").width());
$(canvasObject).height($("#canvasContainer").height());
var canvas = new fabric.Canvas('editorCanvas', {
selectionLineWidth: 2,
width: $("#canvasContainer").width(),
height: $("#canvasContainer").height()
});
var Path_0_1 = new fabric.Path('M127.91,99.29c32.16,10.73,53.41,7.33,67.81,0 c34.07-17.34,41.99-62.82,60.98-60.98c8.19,0.79,14.11,9.98,17.91,17.91', {
fill : null,
stroke: '#000000',
});
canvas.add(Path_0_1);
var curvedText = new fabric.IText("Anh Minh", {
left: 50,
top: 50,
width: 200,
fontSize: 24,
fontFamily: 'Times New Roman',
fontWeight: 'normal',
textAlign: 'center',
lineHeight: 1,
fill: "#404041",
});
canvas.add(curvedText);
#canvasContainer {
width: 100%;
height: 500px;
}
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
<div id="canvasContainer">
<canvas id="editorCanvas"></canvas>
</div>
Addition information:
After few hours google search, I see an interesting Konva.TextPath, I wonder If can we make same Object like that Konva.TextPath in Fabric.js?
Thank you!
Please help me, how to set absolute position of each text item in IText Fabricjs. In this example, I want text "KÍNH MỜI" is align horizontal center with below text.
Expected Result:
Actual Result:
Here is my code:
var canvasObject = document.getElementById("editorCanvas");
// set canvas equal size with div
$(canvasObject).width($("#canvasContainer").width());
$(canvasObject).height($("#canvasContainer").height());
var canvas = new fabric.Canvas('editorCanvas', {
backgroundColor: 'white',
selectionLineWidth: 2,
width: $("#canvasContainer").width(),
height: $("#canvasContainer").height()
});
var textbox1 = new fabric.IText("KÍNH MỜI\n \n.......................................................................................", {
left: 162,
top: 50,
width: 216.125889,
fontSize: 11.3735,
fontFamily: 'Times New Roman',
fontWeight: 'normal',
fill: "#404041",
editable: false,
styles: {
0: {
0: { fontFamily: 'Times New Roman', fontSize: '11.3735', fill: '#404041' }
},
1: {
0: { fontFamily: 'Times New Roman', fontSize: '11.3735', fill: '#404041' }
},
2: {
0: { fontFamily: 'Times New Roman', fontSize: '7.4898', fill: '#404041' }
}
}
});
canvas.add(textbox1);
canvas.renderAll();
#canvasContainer {
width: 100%;
height: 100vh;
background-color: gray;
}
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
<div id="canvasContainer">
<canvas id="editorCanvas"></canvas>
</div>
You need textAlign: center. I also changed lineHeight to 1 (default is 1.16) to make it look more like your expected result.
var canvasObject = document.getElementById("editorCanvas");
// set canvas equal size with div
$(canvasObject).width($("#canvasContainer").width());
$(canvasObject).height($("#canvasContainer").height());
var canvas = new fabric.Canvas('editorCanvas', {
backgroundColor: 'white',
selectionLineWidth: 2,
width: $("#canvasContainer").width(),
height: $("#canvasContainer").height()
});
var textbox1 = new fabric.IText("KÍNH MỜI\n \n.......................................................................................", {
left: 162,
top: 50,
width: 216.125889,
fontSize: 11.3735,
fontFamily: 'Times New Roman',
fontWeight: 'normal',
textAlign: 'center',
lineHeight: 1,
fill: "#404041",
editable: false,
styles: {
0: {
0: { fontFamily: 'Times New Roman', fontSize: '11.3735', fill: '#404041' }
},
1: {
0: { fontFamily: 'Times New Roman', fontSize: '11.3735', fill: '#404041' }
},
2: {
0: { fontFamily: 'Times New Roman', fontSize: '7.4898', fill: '#404041' }
}
}
});
canvas.add(textbox1);
canvas.renderAll();
#canvasContainer {
width: 100%;
height: 100vh;
background-color: gray;
}
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
<div id="canvasContainer">
<canvas id="editorCanvas"></canvas>
</div>
We want to use 'Avenir' in our Google Charts. This isn't a problem at all when using the charts on a webpage, as you can see here. We can simply change the font after the chart is generated using CSS:
#font-face
{
font-family: 'avenir';
src: url('../fonts/avenir.woff2');
}
svg text
{
font-family: 'avenir' !important;
}
The problem is we want to save the chart as an image after it is generated and use it in a PDF that we generate then. For saving the chart we're using the function getImageURI(), but in the image that is saved the 'default' font (Arial) is used, as you can see here.
Does anyone know if it's possible to use a custom font when setting up a Google Chart like the way Arial is set in the example below?
var oOptions =
{
vAxis:
{
textStyle:
{
color: '#2a292e',
fontName: 'Arial',
fontSize: 24
}
}
}
Thanks in advance!
rather than applying css to the chart elements, add the fontName to the chart options
this will translate to the image
the following working snippet uses a custom font from google
from the google "font picker"...
<link href="https://fonts.googleapis.com/css?family=Bahiana" rel="stylesheet">
Specify in CSS
Use the following CSS rules to specify these families:
font-family: 'Bahiana', cursive;
in the chart options, the fontName is set as...
fontName: "'Bahiana', cursive"
google.charts.load('current', {
callback: drawChart,
packages:['corechart']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General',
'Western', 'Literature', { role: 'annotation' } ],
['2010', 10, 24, 20, 32, 18, 5, ''],
['2020', 16, 22, 23, 30, 16, 9, ''],
['2030', 28, 19, 29, 30, 12, 13, '']
]);
var options = {
width: 800,
height: 600,
bar: { groupWidth: '75%' },
isStacked: true,
legend: {
position: 'top',
maxLines: 3,
textStyle: {
color: '#2a292e',
fontName: "'Bahiana', cursive",
fontSize: 40
}
},
hAxis: {
textStyle: {
color: '#2a292e',
fontName: "'Bahiana', cursive",
fontSize: 24
}
},
vAxis: {
textStyle: {
color: '#2a292e',
fontName: "'Bahiana', cursive",
fontSize: 24
}
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
google.visualization.events.addListener(chart, 'ready', function () {
document.getElementById('image_div').innerHTML = '<img alt="Chart" src="' + chart.getImageURI() + '">';
});
chart.draw(data, options);
};
div {
padding: 4px;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Bahiana">
<div>CHART</div>
<div id="chart_div"></div>
<div>IMAGE</div>
<div id="image_div"></div>
I am developing an iOS app using Appcelerator.
In this app I got a main wrapper view and some subviews. I need them to be placed under each other using the layout vertical property but they all stack in a pile (not on separate "rows").
What is wrong with the code below?
// Create the padding view
container = Ti.UI.createView({
top: 0,
left: 0,
width: 320,
height: 460,
backgroundColor: '#000'
});
// Create the padding view
wrapper = Ti.UI.createView({
top: 0,
left: 0,
width: 320,
height: 'auto',
layout: 'vertical'
});
// Create the padding view
label = Ti.UI.createLabel({
text: e.label,
color: e.color,
font:{fontSize:36,fontWeight: 'normal'},
top: 10,
width: 'auto',
height: 'auto'
});
// Create the padding view
perks_label = Ti.UI.createLabel({
text: 'Lorem Ipsum is',
color: '#fff',
font:{fontSize:26,fontWeight: 'normal'},
top: 10,
left: 10,
width: 'auto',
height: 'auto'
});
// Create the padding view
perks_data = Ti.UI.createLabel({
text: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer',
color: '#fff',
font:{fontSize:12,fontWeight: 'normal'},
top: 10,
left: 10,
width: 'auto',
height: 'auto'
});
// Add label to wrapper
wrapper.add(label);
// Add label to wrapper
wrapper.add(perks_label);
// Add label to wrapper
wrapper.add(perks_data);
// Add wrapper to container
container.add(wrapper);
// Return the row
return container;
It seems like the top and left of perks_label and perks_data should be different. Try setting the perks_data to top:50.
Thanks,
I've hit this wall before. Have you set the layout for the current window to 'vertical'? So, from the window that you add the container to, set its layout to vertical:
var win = Titanium.UI.currentWindow;
win.layout = 'vertical';