Change/Show trim path on svg? - animation
I am new to animation in android (and in general) and I'm using a library RichPath, the thing is that I want the borderlines of the SVG to animate, and then filled with color.
Its animating well, but I think my SVG needs something else because its only doing the outside border, and then filling in, I did it in inkscape based on a text:
Desired:
I'm asuming it is something about the trim path because of the code for animating:
RichPathAnimator.animate(svg)
.trimPathEnd(0, 1)
.duration(800)
.animationListener(new AnimationListener() {
#Override
public void onStart() {
a1.setFillColor(Color.TRANSPARENT);
}
#Override
public void onStop() {
}
})
My vector asset:
<path
android:name="a1"
android:pathData="m10.511,2.596q0.869,0 1.569,0.418 0.711,0.406 1.118,1.129 0.418,0.711 0.418,1.592v2.517q0,0.248 -0.169,0.418 -0.158,0.158 -0.406,0.158 -0.248,0 -0.418,-0.158 -0.158,-0.169 -0.158,-0.418v-0.418q-0.395,0.485 -0.96,0.756 -0.564,0.271 -1.219,0.271 -0.813,0 -1.479,-0.406 -0.655,-0.406 -1.039,-1.118 -0.373,-0.722 -0.373,-1.603 0,-0.881 0.406,-1.592 0.406,-0.722 1.118,-1.129 0.722,-0.418 1.592,-0.418zM10.511,7.846q0.564,0 1.016,-0.271 0.463,-0.282 0.722,-0.756 0.26,-0.485 0.26,-1.084 0,-0.598 -0.26,-1.084 -0.26,-0.485 -0.722,-0.756 -0.452,-0.282 -1.016,-0.282 -0.564,0 -1.027,0.282 -0.452,0.271 -0.722,0.756 -0.26,0.485 -0.26,1.084 0,0.598 0.26,1.084 0.271,0.474 0.722,0.756 0.463,0.271 1.027,0.271z"
android:fillColor="#3768d2"
android:strokeColor="#3768d2"
android:strokeWidth="0.26458332" />
Thanks in advance (y)
I have split your vector into 3 paths and it works with me:
Java:
RichPath outPath = richPathView.findRichPathByName("outPath");
RichPath innerPath = richPathView.findRichPathByName("innerPath");
RichPath filledPath = richPathView.findRichPathByName("filledPath");
filledPath.setFillColor(Color.TRANSPARENT);
RichPathAnimator
.animate(outPath, innerPath)
.trimPathStart(1, 0)
.duration(800)
.thenAnimate(filledPath)
.fillColor(Color.TRANSPARENT, 0xff3768d2)
.duration(800)
.start();
XML:
<?xml version="1.0" encoding="utf-8"?>
<vector
xmlns:android="http://schemas.android.com/apk/res/android"
android:width="48dp"
android:height="48dp"
android:viewportHeight="24"
android:viewportWidth="24">
<path
android:name="outPath"
android:pathData="M12,1.7c1.9,0,3.6,0.5,5.2,1.4c1.6,0.9,2.8,2.1,3.7,3.7c0.9,1.6,1.4,3.3,1.4,5.3v8.3c0,0.5-0.2,1-0.6,1.4
c-0.3,0.3-0.8,0.5-1.3,0.5s-1-0.2-1.4-0.5c-0.3-0.4-0.5-0.8-0.5-1.4V19c-0.9,1.1-1.9,1.9-3.2,2.5c-1.2,0.6-2.6,0.9-4,0.9
c-1.8,0-3.4-0.4-4.9-1.3c-1.4-0.9-2.6-2.1-3.4-3.7C2.1,15.7,1.7,14,1.7,12s0.4-3.7,1.3-5.3C4,5.2,5.2,3.9,6.8,3
C8.3,2.1,10.1,1.7,12,1.7L12,1.7z"
android:strokeColor="#3768d2"
android:strokeWidth="0.5"/>
<path
android:name="innerPath"
android:pathData="M12,19c1.2,0,2.4-0.3,3.4-0.9c1-0.6,1.8-1.5,2.4-2.5c0.6-1.1,0.9-2.3,0.9-3.6c0-1.3-0.3-2.5-0.9-3.6
c-0.6-1.1-1.4-1.9-2.4-2.5C14.4,5.3,13.3,5,12,5S9.6,5.3,8.6,5.9c-1,0.6-1.8,1.4-2.4,2.5C5.7,9.5,5.4,10.7,5.4,12
c0,1.3,0.3,2.5,0.9,3.6c0.6,1,1.4,1.9,2.4,2.5C9.6,18.7,10.8,19,12,19z"
android:strokeColor="#3768d2"
android:strokeWidth="0.5"/>
<path
android:name="filledPath"
android:fillColor="#3768d2"
android:pathData="M12,1.7c1.9,0,3.6,0.5,5.2,1.4c1.6,0.9,2.8,2.1,3.7,3.7c0.9,1.6,1.4,3.3,1.4,5.3v8.3c0,0.5-0.2,1-0.6,1.4
c-0.3,0.3-0.8,0.5-1.3,0.5s-1-0.2-1.4-0.5c-0.3-0.4-0.5-0.8-0.5-1.4V19c-0.9,1.1-1.9,1.9-3.2,2.5c-1.2,0.6-2.6,0.9-4,0.9
c-1.8,0-3.4-0.4-4.9-1.3c-1.4-0.9-2.6-2.1-3.4-3.7C2.1,15.7,1.7,14,1.7,12s0.4-3.7,1.3-5.3C4,5.2,5.2,3.9,6.8,3
C8.3,2.1,10.1,1.7,12,1.7L12,1.7z M12,19c1.2,0,2.4-0.3,3.4-0.9c1-0.6,1.8-1.5,2.4-2.5c0.6-1.1,0.9-2.3,0.9-3.6
c0-1.3-0.3-2.5-0.9-3.6c-0.6-1.1-1.4-1.9-2.4-2.5C14.4,5.3,13.3,5,12,5S9.6,5.3,8.6,5.9c-1,0.6-1.8,1.4-2.4,2.5
C5.7,9.5,5.4,10.7,5.4,12c0,1.3,0.3,2.5,0.9,3.6c0.6,1,1.4,1.9,2.4,2.5C9.6,18.7,10.8,19,12,19z"/>
</vector>
Related
How to make part of the graphics gray (shaded) as in the picture?
I use SfChart.I use trackball and I want that when I move the trackball then the right part of the screen after the line becomes shaded as in the picture, how to do it?
We have analyzed your query and we have achieved your requirement “Make part of the graphics gray with trackball movement” with the help of RectangleAnnotation and Trackball created event in SfChart. Please find the code example below.
CodeSnippet:
MainPage.xaml
<chart:SfChart TrackballCreated="SfChart_TrackballCreated" >
. . .
<chart:SfChart.ChartAnnotations>
<chart:RectangleAnnotation Y1="0" IsVisible="False"
FillColor="#80d3d3d3"
StrokeWidth="0"
x:Name="rectangleAnnotation"
CoordinateUnit="Pixels" />
</chart:SfChart.ChartAnnotations>
<chart:SfChart.ChartBehaviors>
<local:ChartTrackballExt x:Name="trackballBehavior" ShowLabel="False">
<local:ChartTrackballExt.MarkerStyle>
<chart:ChartTrackballMarkerStyle ShowMarker="False"/>
</local:ChartTrackballExt.MarkerStyle>
<local:ChartTrackballExt.LineStyle>
<chart:ChartLineStyle StrokeColor="Black" StrokeWidth="2"/>
</local:ChartTrackballExt.LineStyle>
</local:ChartTrackballExt>
</chart:SfChart.ChartBehaviors>
</chart:SfChart>
MainPage.xaml.cs
private void SfChart_TrackballCreated(object sender, ChartTrackballCreatedEventArgs e)
{
rectangleAnnotation.X1 = (e.ChartPointsInfo[0] as ChartPointInfo).XPosition;
if (!rectangleAnnotation.IsVisible)
{
rectangleAnnotation.IsVisible = true;
var seriesBounds = (sender as SfChart).SeriesBounds;
rectangleAnnotation.Y1 = seriesBounds.Top;
rectangleAnnotation.Y2 = seriesBounds.Bottom;
rectangleAnnotation.X2 = seriesBounds.Right;
}
}
public class ChartTrackballExt : ChartTrackballBehavior
{
protected override void OnTouchUp(float pointX, float pointY)
{
base.OnTouchUp(pointX, pointY);
if (this.Chart.ChartAnnotations.Count > 0)
(this.Chart.ChartAnnotations[0] as RectangleAnnotation).IsVisible = false;
}
}
Also, we have attached the complete sample for your reference. Please find the sample from the below link.
Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ChartSample_Trackball-1332628840
Output:
For more details, please refer the below link
https://help.syncfusion.com/xamarin/charts/trackball
https://help.syncfusion.com/xamarin/charts/chartannotation#shape-annotation
Issue on resize Event with Apache Royale SDK 0.9.6
How to handle parent container resize Event or at least browser resize Event ?
I try this code, but handleResize is never call :
package
{
//import org.apache.royale.html.Group;
import org.apache.royale.jewel.Group;
import org.apache.royale.core.BrowserResizeListener;
public class Slideshow extends Group
{
public function Slideshow(){
super();
this.addBead(new BrowserResizeListener());
this.addEventListener("sizeChanged",handleResize);
}
protected function handleResize():void{
// this is never called
trace(this.height)
trace(this.width)
}
}
}
Thanks for any help
Here's an example of listening to window resize:
<?xml version="1.0" encoding="utf-8"?>
<js:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
applicationComplete="applicationCompleteHandler()"
xmlns:js="library://ns.apache.org/royale/basic"
>
<fx:Script>
<![CDATA[
import org.apache.royale.html.SimpleAlert;
private function applicationCompleteHandler():void
{
myInitialView.addEventListener("sizeChanged", sizeChangedHandler)
}
private function sizeChangedHandler(event:Event):void
{
SimpleAlert.show("Application size is: " + this.width + " " + this.height, this);
}
]]>
</fx:Script>
<js:beads>
<js:BrowserResizeHandler/>
</js:beads>
<js:valuesImpl>
<js:SimpleCSSValuesImpl />
</js:valuesImpl>
<js:initialView>
<js:View id="myInitialView" width="100%" height="100%">
<js:Label text="Hello World"/>
</js:View>
</js:initialView>
</js:Application>
How can I change react-map-gl icons?
I'm trying to customize my web application's map, I'm using react-map-gl (Uber opensource code) I try to change the map's icon pins but I could not figure out, what does the string code ICON mean?
import React, { PureComponent } from 'react';
const ICON = M20.2,15.7L20.2,15.7c1.1-1.6,1.8-3.6,1.8-5.7c0-5.6-4.5-10-10-10S2,4.5,2,10c0,2,0.6,3.9,1.6,5.4c0,0.1,0.1,0.2,0.2,0.3
c0,0,0.1,0.1,0.1,0.2c0.2,0.3,0.4,0.6,0.7,0.9c2.6,3.1,7.4,7.6,7.4,7.6s4.8-4.5,7.4-7.5c0.2-0.3,0.5-0.6,0.7-0.9
C20.1,15.8,20.2,15.8,20.2,15.7z;
const pinStyle = {
cursor: 'pointer',
fill: '#d00',
stroke: 'none'
};
export default class CityPin extends PureComponent {
render() {
const { size = 20, onClick } = this.props;
return (
<svg
height={size}
viewBox="0 0 24 24"
style={{ ...pinStyle, transform: `translate(${-size / 2}px,${-size}px)` }}
onClick={onClick}
>
<path d={ICON} />
</svg>
);
}
}
What does it mean all those numbers in ICON const? How can I change the style based on this code? Please help, thanks :)
All of the gibberish that is the ICON constant is SVG Path notation and is actually drawing your current symbol. If you want to learn more about it, here is another resource. There are even websites that can help you build your own SVG path string, Option 1 Option 2, and searching the web will pull up many more. Note that you likely need to update the viewbox numbers to fit your new thing once you have the symbol you want. It otherwise chops off the symbol at those dimensions. In trying to figure this out, my example update was: const ICON = 'm 10 35 l 15 30 l 15 -30 A 20 20 180 1 0 10 35 z' with a viewbox in the svg tag of: viewBox="-8 0 55 65" EDIT:: you can also use any image as explained in the other answers. There is an article on using custom images at Medium with a good explanation and more details.
You mentioned you're using react-map-gl, so you could use the Marker component to change your icon pins.
Is there a specific image you'd like to use for your icons, say a .png file? If so, add that image to the directory called "public." Then, in your map where you create the markers, you can display this specific image.
For example, if you have an image called mapicon.png, you'd add that to your public folder. Then, when you're creating your markers, you could do something like this.
import ReactMapGL, {Marker} from 'react-map-gl';
<Marker key={} latitude={} longitude={}>
<img
src="mapicon.png"
alt="map icon"
/>
</Marker>
From what I understand, the string is just a reference to where the icon image is stored. Hope this helps!
You can create a custom map marker with an SVG file. If you are using create-react-app, you can import your svg icon as a component like this:
import { ReactComponent as Pin } from '../../images/map-marker-icon.svg';
Then, in your example code above you can replace the
<path d={ICON} />
with this component. Here is an example:
export default class MapPin extends PureComponent {
render() {
<Marker longitude={this.props.longitude} latitude=this.props.latitude}>
<svg
onClick={() => onClick()}
viewBox="0 0 60 100"
enable-background="new 0 0 60 100">
<Pin/>
</svg>
</Marker>
));
}
}
Write MXML Code in Actionscript3
I have the following MXML Code but I need to run it from Actionscript. How can I write this in AS? Thanks a lot!!
<?xml version="1.0"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo"
applicationComplete="applicationCompleteHandler()">
<fx:Script>
<![CDATA[
private var bannerIntegration : BannerAd;
public function applicationCompleteHandler():void
{
Security.allowDomain("*");
bannerIntegration = new BannerAd(banner);
}
]]>
</fx:Script>
<s:Image id="banner" width="300" height="250"/>
</s:Application>
That is just from memory so it might need some tweaks:
Basically you would create a normal
class SpecialApplication extends Application {
In your IDE or mxmlc call you choose SpecialApplication as the class to build.
Inside the class you have the properties as you have them now:
private var bannerIntegration : BannerAd;
private var banner:Image;
everything else is simple to answer for your example but I'm sure this is not the complete application, so you should read something about the Flex Lifecycle (be careful that you look at the right one: the one for Flex 3.* is a bit different from the one in Flex 4.*)
So ideally
override protected function createChildren():void {
to create and add UI elements:
if (image == null) {
image = new Image();
image.width = 300;
image.hight = 250;
addChild(image);
bannerIntegration = new BannerAd(banner);
}
I'm not sure if Security.allowDomain("*"); requires some special timing maybe you can also do it inside createChildren().
Otherwise you can have the same method that you have in your script block above (with an additional event:FlexEvent argument), to do this call. Just do
addEventListener(FlexEvent.CREATION_COMPLETE, applicationCompleteHandler)
inside the constructor.
The if inside createChildren() is there to make sure to only create ui elements once. As createChildren() will be called each time this component is added. (Not so important inside Application, but a good habit for creating components using ActionScript classes.
Wrong SVGSVGElement width in Firefox
On th following document:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/SVG/DTD/svg10.dtd">
<svg width = "100%"
height = "100%"
id="pic"
version="1.1"
style="background-color:blue"
xml:space="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlns:ev="http://www.w3.org/2001/xml-events"
xmlns:xlink="http://www.w3.org/1999/xlink">
</svg>
I'm trying to get the width value of the root SVGSVGElement:
document.getElementById ("pic").width.baseVal.value
Chromium says: 969
Firefox says: 1
Sure value maybe a little implementation dependent, but (what indeed must be independent) when i try to get a converted value:
var w = evt.target.width.baseVal;
w.convertToSpecifiedUnits (5);
alert(w.valueInSpecifiedUnits);
chrome gives again 969, but Firefox' answer is 1.
I need this value to adjust some elements in my scripts, but they don't work in Firefox.
How can i obtain the real value of width?
This is the way I got it to give consistent values cross-browser:
This was the way I fixed it:
var heightComponents = ['height', 'paddingTop', 'paddingBottom', 'borderTopWidth', 'borderBottomWidth'],
widthComponents = ['width', 'paddingLeft', 'paddingRight', 'borderLeftWidth', 'borderRightWidth'];
var svgCalculateSize = function (el) {
var gCS = window.getComputedStyle(el), // using gCS because IE8- has no support for svg anyway
bounds = {
width: 0,
height: 0
};
heightComponents.forEach(function (css) {
bounds.height += parseFloat(gCS[css]);
});
widthComponents.forEach(function (css) {
bounds.width += parseFloat(gCS[css]);
});
return bounds;
};
Not very pretty, but works.
2 years later this is still an issue..
I found a temporary solution:
var style = window.getComputedStyle(svg,null);
var svgWidth = style.getPropertyValue("width").slice(0, -2); // "1240px" -> "1240"
but in my case this is very expensive and the browser gets super slow..
so, has anyone got a better solution?
I also tried to convert "the magic 1" into a pixel width following this article:
https://developer.mozilla.org/en/docs/Web/API/SVGLength
but no luck either..
From Firefox 33 onwards you will be able to use getBoundingClientRect to get the width/height you want. Firefox 33 will be released on 14th October 2014 but you could try a nightly right now if you want to.