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.
Related
I would like to create my custom arrow similar to Message Flow 2 arrow of draw.io palette.
The mentioned arrow has an object in the middle and they behave nicely; middle object not gets resized, it moves with the line, stays upright etc.
When inspecting the style of this arrow I only see the individual elements but not any expression binding them.
Arrow:
startArrow=oval;startFill=0;startSize=7;endArrow=block;endFill=0;endSize=10;dashed=1;html=1;strokeWidth=2;align=center;
Object in middle:
shape=message;html=1;outlineConnect=0;
I tried grouping an arrow with an object but could not reach the same result; the group no longer behaves as an arrow.
The simplest method I know is just to change the symbol's style (not the arrow's one), which is by default:
shape=message;html=1;outlineConnect=0;
to the desired one. Say, an isometric cube:
shape=isoCube2;isoAngle=15;html=1;
The new object will retain the behavior you describe. Then simply move it to the scratchpad, from where you can export a bunch of them as a library.
It's possible, but I don't know clean way of doing this.
To understand how Message Flow 2 works you can either look at the code:
var edge = new mxCell('', new mxGeometry(0, 0, 0, 0), 'startArrow=oval;startFill=0;startSize=7;endArrow=block;endFill=0;endSize=10;dashed=1;html=1;');
edge.geometry.setTerminalPoint(new mxPoint(0, 0), true);
edge.geometry.setTerminalPoint(new mxPoint(100, 0), false);
edge.geometry.relative = true;
edge.edge = true;
var cell = new mxCell('', new mxGeometry(0, 0, 20, 14), 'shape=message;html=1;outlineConnect=0;');
cell.geometry.relative = true;
cell.vertex = true;
cell.geometry.offset = new mxPoint(-10, -7);
edge.insert(cell);
or at diagram's XML (which you can find in menu Extras -> Edit Diagram)
...
<mxCell id="YzitZNannA--EQJoASZJ-14" value="" style="startArrow=oval;startFill=0;startSize=7;endArrow=block;endFill=0;endSize=10;dashed=1;html=1;" edge="1" parent="1">
<mxGeometry relative="1" as="geometry">
<mxPoint x="370" y="160" as="sourcePoint" />
<mxPoint x="470" y="160" as="targetPoint" />
</mxGeometry>
</mxCell>
<mxCell id="YzitZNannA--EQJoASZJ-15" value="" style="shape=message;html=1;outlineConnect=0;" vertex="1" parent="YzitZNannA--EQJoASZJ-14">
<mxGeometry width="20" height="14" relative="1" as="geometry">
<mxPoint x="-10" y="-7" as="offset" />
</mxGeometry>
</mxCell>
...
From here you can see two things:
Object inside must have arrow object set as its parent. I don't know any way to do that other then js code, or direct change in Edit Diagram dialog.
Geometry must be relative. This can be set by Edit Diagram dialog or with Edit -> Edit Geometry option.
this is something that cannot be changed using style only. Since draw.io is an open source project, I suggest to take a closer look at: https://github.com/jgraph/drawio
It might help.
Regards,
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();
}
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...)
Wondering if someone might help with another pair of eyes - as I am trying to work out why some of my Famo.us 'Views' are being displayed despite having an opacity StateModifier set to '0'.
Here is my code - My apologies for it not being standard - I have "Panels" instead of "Views" and a few other things..but happy to expand on the code if needed.
function _buildSidePanel() {
this._sidePanel = _createPanel.call(this);
this._sidePanel.setOptions(this.constructor.DEFAULT_OPTIONS.sideMenu);
this._sidePanel.position = this.cm(this.constructor.DEFAULT_OPTIONS.sideMenu.position);
this._container.add(this._sidePanel.position).add(this._sidePanel);
this._menuHolder = _createPanel.call(this); //My version of a View
this._menuHolder.setOptions(this.constructor.DEFAULT_OPTIONS.sideMenu.menuHolder);
// Create StateModifiers
this._menuHolder.position = this.cm({ align: [.5,.6], origin: [.5,.6], proportions: [.9,.8] });
this._menuHolder.fadeState = this.cm({ opacity: 0 });
this._menuHolder.sizeState = this.cm();
this._menuHolder.mC = new ModifierChain();
this._menuHolder.mC.addModifier(this._menuHolder.fadeState);
this._menuHolder.mC.addModifier(this._menuHolder.sizeState);
this._menuHolder.mC.addModifier(this._menuHolder.position);
/* Tried splitting it to just modifiers but getting the same thing
this._sidePanel._container.add(this._menuHolder.fadeState)
.add(this._menuHolder.sizeState)
.add(this._menuHolder.position)
.add(this._menuHolder);
*/
this._sidePanel._container.add(this._menuHolder.mC).add(this._menuHolder);
// this._menuHolder.fadeState.setOpacity(1,this.constructor.DEFAULT_OPTIONS.sideMenu.menuHolder.transition.in);
}
I have created a ModifierChain and added among other things an Opacity State of 0. When I add this and then add the modifier and 'View' to the container it displays the View even though the View has a StateModifier of '0' so should not be displayed.
The 'fadeState.setOpacity' command is meant to transition the fadeState to display the View but it is commented out, so the View should not be displayed.
I have this working in other areas so know the approach works. I am also (hopefully) not using the same variable names, so not using a StateModifier more than once. But still stuck as to why this is being displayed.
Any help or thoughts would be gratefully appreciated.
Thanks.
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);