I'm trying to alter the default style for the draw polygon interaction. Currently it draws a line string of blue lines, and fills in the polygon so far with a semi-transparent fill.
However if I change it, it always connects the current point to the first point.
Can anyone guide me on how this was achieved?
You should set the style for both, Layer and Interaction.
By setting the style in the Draw element, you will change the style of the polygon while you are drawing it:
var draw = new ol.interaction.Draw({
source: source,
type: 'Polygon',
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.5)'
})
})
});
And changing the style for the vector layer which shares source with the Draw element, you will be modifying the style of the polygon once it is drawn:
var vector = new ol.layer.Vector({
source: source,
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.9)'
})
})
});
I have created a jsfiddle
Related
I have an issue with OpenLayers (v 6.14.1 from npm) where the text on the text label is rather fuzzy.
See the attached image. Compare the text labels with the text in the dialog to the right.
I create the map with pixelRatio: 1, but that shouldn't affect this (?)
const map = new Map({
target: div,
view: new View({
center: fromLonLat ([startLocation.lon, startLocation.lat]),
zoom: startLocation.zoom,
constrainResolution: true,
}),
pixelRatio: 1, //Important, otherwise tiles (WMS) with strange size will be requested
});
I create the text label thus:
export default function (feature, resolution, options) {
return new Text ({
font: 'Normal 14px serif', // Normal 14px Arial
text: getText (feature, resolution, options),
fill: new Fill ({ color: 'black' }),
stroke: new Stroke ({ color: 'white', width: 2 }),
offsetX: -12,
offsetY: -8,
textAlign: 'right',
textBaseline: 'bottom',
placement: 'point',
});
}
I've already tried other fonts (e.g. a sans-serif).
I did as #Mike suggested - see their comment under the question - here's the result:
I think the labels are now a fair bit sharper. Picture doesn't show this too well tho'.
My gpx file already contains elevation information for each trkpt and I can augment this with a speed for each trkpt. I would like to represent the elevation or the speed at each trkpt by varying the color of the track. For instance: slow is blue, fast is red.
How can I do this?
And this probably means: Which files and functions in Openlayers do I have to change to do this?
You can try the ol/style/FlowLine of ol-ext to achieve this.
Using this style, you can change the with/color of the feature along the line using a function. This example show how to: http://viglino.github.io/ol-ext/examples/style/map.style.flowline2.html.
You just have to calculate the width (or color) along the feature geometry varying according the speed or altitude:
const flowStyle = new ol.style.FlowLine({
width: function(f, step) {
// calculate the with of the feature f at the given step
// step is the curvilinear abscissa between 0,1
// (0: first coordinate, 1: last one)
const width = ...
return width;
}
});
#+
You should go with a stylefunction for the vector layer:
https://openlayers.org/en/v4.6.5/apidoc/ol.html#.StyleFunction
This function is checked for each feature to be displayed on the vector layer and the related style can be set/returned programmatically. For example:
function gpxStyle(feature) {
var style = null;
if (feature.get("speed")>="100") {
style = new ol.style.Style({
image: new ol.style.Circle({
radius: 6,
stroke: new ol.style.Stroke({
color: 'red',
width: 2
}),
fill: new ol.style.Fill({
color: 'red'
})
})
});
}
else {
style = new ol.style.Style({
image: new ol.style.Circle({
radius: 6,
stroke: new ol.style.Stroke({
color: 'blue',
width: 2
}),
fill: new ol.style.Fill({
color: 'blue'
})
})
});
}
return [style];
}
var gpxLayer = new ol.layer.Vector({
source: new ol.source.Vector(),
style: gpxStyle
});
I have a fabric triangle
var fabObj = new fabric.Triangle({
left: 250,
top: 250,
fill: 'white',
width: 60,
height: 60,
name:'triangle',
borderColor: '#f0000',
cornerSize: 8,
transparentCorners: true,
hasControls:true,
lockScalingX:true,
lockScalingY:true
});
$scope.canvas.add(fabObj);
$scope.canvas.setActiveObject(fabObj);
$scope.canvas.renderAll();
It creates the triangle like following
I want another triangle to fit on either side but could not overlap each other
Have tried this code but it only detect corners (square boundary of triangle )
https://stackoverflow.com/a/31153459/3377733
Please refer to this following fiddle
http://jsfiddle.net/m0jjc23v/23/
Fabric.js is not build to handle such scenarios. It's better to use Matter JS http://brm.io/matter-js/
They do handle all physics properties.
I am developing a navigation application, which draws planned route on a map. Planned route consists of points connected with a line. Each point is labelled with distance and direction. When I initially draw the route on the map, I calculate text position in a way, where it doesn't interfere with the line - I use offsetX, offsetY and rotation style attributes. Unfortunately, when the map view is rotated, not of the mentioned attributes is changed - text is not rotated. Is there a way, how to rotate the text with the view, so it will remain on it's position relative to the point? I have already tried rotateWithView: true with both image and text parts.
My style is defined like:
return [new ol.style.Style({
image: new ol.style.Circle({
radius: 20,
fill: new ol.style.Fill({color: 'black'}),
stroke: new ol.style.Stroke({color: 'black', width: 1})
}),
text: new ol.style.Text({
textAlign: "center",
textBaseline: "middle",
font: 'normal 1.5rem Arial',
text: "This is my text",
fill: new ol.style.Fill({color: 'black'}),
stroke: new ol.style.Stroke({color: 'black', width: 1}),
offsetX: 10,
offsetY: 15,
rotation: 0.3
})
})];
Update feature rotation on map view property change event.
map.getView().on('propertychange', function(event) {
textStyle.setRotation(this.getRotation());
mySource.changed();
});
var textStyle = new ol.style.Text({
// ...
});
var layer = new ol.layer.Vector({
source: mySource,
style: new ol.style.Style({
text: textStyle,
// ...
})
});
I want to draw text on canvas., how to do it any sample example?
The canvas already contains some shape drawn, i want to show text on the top of that shape on canvas
How can i do it?
Also be aware that you need to actually have loaded a cufon font. There is no default font when using Fabric.js.
<script src="fabric.js"></script>
<script src="cufon.calibri.js"></script>
There are so many fonts available from http://www.cufonfonts.com/
This being the case the author is planning on removing the need for cufon. Discussed here: Fabric.js + Google Fonts
If you're wanting to render a block, then some text inside of that block. I would do something like this.
//Render the block
var block = canvas.add(new fabric.Rect({
left: 100,
top: 100,
fill: 'blue'
}));
//Render the text after the block (so that it is in front of the block)
var text = canvas.add(new fabric.Text('I love fabricjs', {
left: block.left, //Take the block's position
top: block.top,
fill: 'white'
}));
//Render the text and block on the canvas
//This is to get the width and height of the text element
canvas.renderAll();
//Set the block to be the same width and height as the text with a bit of padding
block.set({ width: text.width + 15, height: text.height + 10 });
//Update the canvas to see the text and block positioned together,
//with the text neatly fitting inside the block
canvas.renderAll();
Take a look at How to render text tutorial.
It's as simple as:
canvas.add(new fabric.Text('foo', {
fontFamily: 'Delicious_500',
left: 100,
top: 100
}));
Also worth noting that you might need to adjust Cufon's offsetLeft to help correctly position the text. Something like:
Cufon.fonts[your-fontname-in-lowercase-here].offsetLeft = 120;
The kitchen sink demo of fabric uses this:
http://kangax.github.com/fabric.js/lib/font_definitions.js