In the default openlayers draw interaction, there is no line segment which connects where your mouse is to the finish point (first image). When I set up a custom style, this segment is present which I don't want (second image). Does anyone know how I eliminate this final segment, like the default style does?
You'll need a style function that can style points, lines and polygons and distinguish by the geometry's type. Important: the polygon style should only have a fill, not a stroke. Because the boundary of the polygon is a separate linestring. A minimal working style function for the draw interaction would look like this:
var styles = {
Point: new ol.style.Style({
image: new ol.style.Circle()
}),
LineString: new ol.style.Style({
stroke: new ol.style.Stroke()
}),
Polygon: new ol.style.Style({
fill: new ol.style.Fill()
})
};
function styleFunction(feature) {
return styles[feature.getGeometry().getType();
}
Related
Sometimes a view's shape can be dynamic like when using the native .buttonStyle(.bordered) modifier. This modifier will apply different corner radius based on different button content sizes:
Question
How can we stroke around a custom view? (not a Shape)
Considerations after trials:
We can't use another button with bigger/smaller frame to create the border illusion, because the corner radius will be different and not matched with the original shape
The view has transparency, so using shadow effect may not be a good option to create the border illusion
Using scale effect not works as desired, because of the different sizes issue, and also the lack of precise border width
ContainerRelativeShape is not working (yet) except for widgets
Not found solutions to try:
Get the shape of a view to apply stroke on it
Get the path around the content of the view
apply some sort of stroke directly on a view
Sample Code:
VStack {
Button {
} label: {
Text("Hello World")
.frame(height: 164) // <- Difference
}
Button {
} label: {
Text("Hello World")
.frame(height: 64) // <- Difference
}
}
.buttonStyle(.bordered)
/* .stroke() // something like this, but for a view */
Unfortunately, borders are drawn around the frame of a view. If you want to add a border to a rounded view, you need to know the corner radius.
You can hardcode the corner radius of your buttons using the .buttonBorderShape() modifier, then overlay your buttons with a shape that matches the shape you choose in .buttonBorderShape()
What is the easiest way to draw an arrow instead of the bar?
I have tried this method, to add an image in every point, but the arrow is not responsive and I can't set the size of each arrow image.
// Variables 'sun' and 'cloud' are created before with `new Image()`
Chart.pluginService.register({
afterUpdate: function(chart) {
chart.config.data.datasets[0]._meta[0].data[7]._model.pointStyle = sun;
chart.config.data.datasets[1]._meta[0].data[2]._model.pointStyle = cloud;
}
});
And will give you this result.
I have achieved it here JSFiddle link.
So I try to create animation using canvas in famo.us integreted with angularjs.
I found this directive in docs:
<fa-canvas-surface
fa-size="[400,400]"
class="main-canvas"
>
</fa-canvas-surface>
But I have no ideas (or tutorials) how to access it from my controller.js:
mysiteControllers.controller('UvodCtrl', ['$scope','$famous',
function($scope,$famous) {
}]);
or create an animated object (for example this something like: http://jsfiddle.net/7wEWU/46/ ). Do you have any ideas?
You cannot change the size of the surface in runtime, but you can change the size of a modifier.
To animate the canvas you need to place it inside fa-modifier directive and then use Transitionable to animate size change.
Here is the example of animating surface size from 100x100 to 400x400 over 2s:
mysiteControllers.controller('UvodCtrl', ['$scope','$famous',
function($scope,$famous) {
// gets famous Transitionable
var Transitionable = $famous['famous/transitions/Transitionable'];
// sets initial surface size
$scope.surfaceSize = new Transitionable([100, 100]);
// animates surface size change, sets size to 400x400 during 2000ms
$scope.surfaceSize.set([400, 400], {duration: 2000})
}]);
<fa-modifier fa-size="surfaceSize.get()">
<fa-canvas-surface class="main-canvas">
Surface content
</fa-canvas-surface>
</fa-modifier>
Here are the docs on Transitionables: https://famo.us/docs/transitions/Transitionable
And fa-modifier: https://famo.us/integrations/angular/docs/unstable/api/directive/faModifier/
p.s. you can use Transitionable to animate any of the modifier's attributes (fa-rotate, fa-scale, fa-transform, fa-opacity...)
I have a map of my country divider to touristic regions (PathOverlay), I wanna be able to have the name of every region above it, with just plain text, no bubbles no anything.
I've already searched how to do this but all I found was ItemizedOverlayWithFocus in the svn trunk of osmdroid.
Does anyone have any idea how to add simple text on the map (with latitude and longitude of course) ?
Sub-class Overlay (as for instance a "SimpleTextOverlay").
In the constructor or with setters, initialize your text, its position (GeoPoint), and the Paint to be used.
Then implement draw method this way:
#Override protected void draw(Canvas canvas, MapView mapView, boolean shadow) {
if (shadow) return;
//Get the screen position:
final Projection pj = mapView.getProjection();
pj.toMapPixels(geoPosition, screenPosition);
//And draw your text at screenPosition:
canvas.drawText(text, screenPosition.x, screenPosition.y, paint);
}
Answer posted here
How to add text below/above in the middle of the polyline in osmdroid
Use the Marker overlay class, which was added to osmdroid somewhere around v5.2.
Set the title, then set the icon to null, then add it to the map (in that order)
distanceMarker = new Marker(mapView);
distanceMarker.setIcon(null);
distanceMarker.setTextIcon(distance);
distanceMarker.setOnMarkerClickListener((marker, mapView) -> true);
GeoPoint p3 = new GeoPoint((loc.getLatitude()+poi.getLat())/2,(loc.getLongitude()+poi.getLon())/2);
distanceMarker.setPosition(p3);
mapView.getOverlayManager().add(distanceMarker);
I tried setting all possible styles to something other than grey, just to try and get rid of the grey overlay as shown in the "Hello item 1" in the attached image of a list. Nothing worked. I examined the ListSkin class too and didn't fins anything that would draw these. How to get rid of these overlays?
<s:List id="list" width="100%" height="100%"
dataProvider="{dp}"
focusAlpha="0"
contentBackgroundAlpha="0"
contentBackgroundColor="0xFFFFFF"
selectionColor="0xFFFFFF"
downColor="0xFFFFFF"
borderVisible="false"
>
</s:List>
I just helped a client with this same thing. You, basically, have to extend the LabelItemRemderer class to not draw the rectangle. It is not exposed via styles or colors for you to change.
Look at this code (Starting at line 853 in the LabelItemRemderer):
// Selected and down states have a gradient overlay as well
// as different separators colors/alphas
if (selected || down)
{
var colors:Array = [0x000000, 0x000000 ];
var alphas:Array = [.2, .1];
var ratios:Array = [0, 255];
var matrix:Matrix = new Matrix();
// gradient overlay
matrix.createGradientBox(unscaledWidth, unscaledHeight, Math.PI / 2, 0, 0 );
graphics.beginGradientFill(GradientType.LINEAR, colors, alphas, ratios, matrix);
graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);
graphics.endFill();
}
You basically need some way to force this code to not run. You can do this by creating your own itemRenderer from scratch. Or you can extend the LabelItemRenderer, override the drawBackground() method and copy all the parent drawBackground() code into your extended child; minus the block above.
I'd love to see the color exposed as a style or something. I'd love to see a magic property (or style) we could use to make the overlay vanish altogether. Feel free to log this as a bug into the Apache Flex Jira.