Home PC Games Linux Windows Database Network Programming Server Mobile  
           
  Home \ Programming \ Cool Android realization SVG animation     - Detailed usage history command (Linux)

- PHP interview questions of design patterns (Programming)

- Oracle Linux 6.4 installed Oracle 11gR2 + RAC + ASM (Database)

- PHP file upload methods exist in the database (Programming)

- CentOS Nginx achieve 3 virtual machine load balancing (Server)

- C ++ inheritance and derived (induction principle) (Programming)

- Ubuntu 14.04 configure JDK1.8.0_25, switchable version (Linux)

- To repair Shell script by default open in Ubuntu (Linux)

- Autojump: an advanced cd command in the Linux file system fast navigation (Linux)

- Redis configuration file interpretation (Database)

- Based on Python: OpenCV simple image manipulation (Programming)

- Basic Java JNI (Programming)

- Simple to use Linux GPG (Linux)

- Ubuntu system process is bound CPU core (Linux)

- Gitlab installation under CentOS 7 (Linux)

- Ubuntu apt-mirror established local private sources (Linux)

- Linux Basic Course: tar command description (Linux)

- Oracle Database asynchronous IO cause slow query response (Database)

- IronPython and C # to interact (Programming)

- Oracle to start to solve the error ORA-27102 (Database)

 
         
  Cool Android realization SVG animation
     
  Add Date : 2017-08-31      
         
         
         
  Svg is currently very popular image file formats of, svg strictly speaking it should be an open-standard vector graphics language, use svg format we can use the code to describe the image, you can open svg images using any word processing tool, by changing part of the code to make an image with interactive features, and can always be inserted into the HTML browser (such as Firefox) to watch. Use svg format allows you to design an exciting, high-resolution graphic Web pages.

svg format with the current network of popular formats such as jpg and png can not have the advantage: can be enlarged graphical display, but never at the expense of image quality at the cost; retain editable and searchable state svg images; averaging speak, svg file formats other than the image file is much smaller, so download quickly.

If we own to achieve such effects, very troublesome, but then to introduce an open source control, you can achieve these effects with SVG.

First we have to understand format SVG file, for example:

< Svg xmlns = "http://www.w3.org/2000/svg" id = "svg" class = "svg" viewBox = "0 0 960 480" preserveAspectRatio = "xMinYMin meet">
        < Path fill = "# B4BEC8" stroke = "# B4BEC8" stroke-width = "2px" stroke-miterlimit = "10" d = "M570.14 440.2l-29.165-28.99c-7.103-8.5-6.152-36.718- 6.02-40.665H425.048c.133 3.947 1.082 32.164-6.018 40.666l-29.166 28.99c-1.237 1.404-1.712 2.505-1.623 3.37h-.054c.76 7.727 6.664 6.332 13.607 6.332H558.01c6.696 0 12.412 1.27 13.493-5.56 .58-.953.274-2.282-1.364-4.14z "style =" fill-opacity: 1; stroke-opacity: 0; -webkit-transition: fill-opacity 1s ease-in-out, stroke-opacity 1s ease-in -out; transition: fill-opacity 1s ease-in-out, stroke-opacity 1s ease-in-out; stroke-dasharray: 474.095184326172px, 474.095184326172px; stroke-dashoffset: 0px; "> < / path>

        < Path fill = "# C8D2DC" stroke = "# C8D2DC" stroke-width = "2px" stroke-miterlimit = "10" d = "M727.488 355.125c0 8.514-6.597 15.42-14.738 15.42h-465.5c-8.14 0 -14.74-6.906-14.74-15.42V45.42c0-8.517 6.6-15.42 14.74-15.42h465.5c8.142 0 14.738 6.903 14.738 15.42v309.705z "style =" fill-opacity: 1; stroke-opacity: 0; -webkit -transition: fill-opacity 1s ease-in-out, stroke-opacity 1s ease-in-out; transition: fill-opacity 1s ease-in-out, stroke-opacity 1s ease-in-out; stroke-dasharray: 1645.18310546875 px, 1645.18310546875px; stroke-dashoffset: 0px; "> < / path>

        < Path fill = "# fff" stroke = "# C8D2DC" stroke-width = "2px" stroke-miterlimit = "10" d = "M489.01 343.713c-.042-4.223 3.447-6.254 3.605-6.352-1.963- 2.866-5.018-3.263-6.102-3.31-2.602-.26-5.074 1.53-6.39 1.53s-3.356-1.49-5.506-1.448c-2.836.04-5.445 1.645-6.907 4.182-2.942 5.11-.75 12.672 2.116 16.814 1.4 2.02 3.072 4.305 5.268 4.22 2.114-.08 2.913-1.362 5.467-1.362 2.556 0 3.274 1.363 1.322 2.273 5.51-.04 3.716-2.064 5.105-4.098 2.313-4.748 1.61-2.35 2.273-4.63-.05-.02-4.434-1.7 -4.48-6.75M484.807 331.31c1.168-1.41 1.953-3.37 1.738-5.327-1.68.068-3.713 1.12-4.916 2.53-1.08 1.247-2.027 3.245-1.77 5.16 1.87.143 3.784-.95 4.947-2.362 "style = "fill-opacity: 1; stroke-opacity: 0; -webkit-transition: fill-opacity 1s ease-in-out, stroke-opacity 1s ease-in-out; transition: fill-opacity 1s ease-in-out , stroke-opacity 1s ease-in-out; stroke-dasharray: 115.244583129883px, 115.244583129883px; stroke-dashoffset: 0px; "> < / path>

        < Path fill = "# 3C4650" stroke = "# 3C4650" stroke-width = "2px" stroke-miterlimit = "10" d = "M727.488 315.527V45.982c0-8.828-6.597-15.982-14.738-15.982h- 465.5c-8.14 0-14.74 7.155-14.74 15.982v269.545H727.49z "style =" fill-opacity: 1; stroke-opacity: 0; -webkit-transition: fill-opacity 1s ease-in-out, stroke-opacity 1s ease-in-out; transition: fill-opacity 1s ease-in-out, stroke-opacity 1s ease-in-out; stroke-dasharray: 1547.85571289063px, 1547.85571289063px; stroke-dashoffset: 0px; "> < / path >

        < Path fill = "# 141E28" stroke = "# 141E28" stroke-width = "2px" stroke-miterlimit = "10" d = "M251.2 48.887h457.205v245.52H251.2z" style = "fill-opacity: 1; stroke-opacity: 0; -webkit-transition: fill-opacity 1s ease-in-out, stroke-opacity 1s ease-in-out; transition: fill-opacity 1s ease-in-out, stroke-opacity 1s ease -in-out; stroke-dasharray: 1405.44995117188px, 1405.44995117188px; stroke-dashoffset: 0px; "> < / path>
      < / Svg>

The above code is very complicated, if they are code words, but we may note that this way of writing, somewhat similar to html, are using labels

The label is the most used path, the path is

Some people also think that to achieve a dynamic effect on the picture, we can use the Android built-in drawing classes and functions, complex curved path, we can use this path to develop class

It would not be inside the SVG path, in fact, is the case, then we can be in SVG path, corresponds to the android, and then draw out just fine.

SVG There is also a variety of labels:

Including straight line, circle round, rect rectangle, eliipse ellipse, polygon polygon, etc.

These long as we have an SVG file, you can convert it into a java code

As a programmer, we certainly can not do this work manually, it involves two issues, one is parsing SVG, a draw is parsed

Fortunately, this work has already been completed, and open source on Github https://github.com/geftimov/android-pathview

This article will serve as a simple example, to use the above open-source controls

To parse SVG, we need to be included into a androidsvg.jar our lib

Let's look at this simple to use control as a custom control, we only need to add a layout file inside

< ? Xml version = "1.0" encoding = "utf-8"?>
< LinearLayout
    xmlns: android = "http://schemas.android.com/apk/res/android"
    android: orientation = "vertical"
    android: background = "# ff0000"
    android: layout_width = "fill_parent"
    android: layout_height = "fill_parent">

    < Com.example.kaiyicky.myapplication.PathView
        xmlns: app = "http://schemas.android.com/apk/res-auto"
        android: id = "@ + id / pathView"
        android: layout_width = "match_parent"
        android: layout_height = "match_parent"
        app: pathColor = "@ android: color / white"
        app: svg = "@ raw / ironman_white"
        app: pathWidth = "5" />
< / LinearLayout>

In fact, app: svg specify a SVG file, we can put this article on the raw directory

Activity then look inside:

public class MainActivity extends FragmentActivity {
    
    @Override
    protected void onCreate (Bundle savedInstanceState) {
        super.onCreate (savedInstanceState);
        setContentView (R.layout.activity_main);

        final PathView pathView = (PathView) findViewById (R.id.pathView);
// Final Path path = makeConvexArrow (50, 100);
// PathView.setPath (path);
        pathView.setFillAfter (true);
        pathView.useNaturalColors ();
        pathView.setOnClickListener (new View.OnClickListener () {
            @Override
            public void onClick (View v) {
                pathView.getPathAnimator ().
                        delay (100).
                        duration (1500).
                        interpolator (new AccelerateDecelerateInterpolator ()).
                        start ();
            }
        });
    }

    private Path makeConvexArrow (float length, float height) {
        final Path path = new Path ();
        path.moveTo (0.0f, 0.0f);
        path.lineTo (length / 4f, 0.0f);
        path.lineTo (length, height / 2.0f);
        path.lineTo (length / 4f, height);
        path.lineTo (0.0f, height);
        path.lineTo (length * 3f / 4f, height / 2f);
        path.lineTo (0.0f, 0.0f);
        path.close ();
        return path;
    }

}

See some comments, call makeConvexArraw () method, if we do not specify svg file xml file inside, we can also specify the path drawn manually in code

Is so simple, so as to make SVG file, we can help find artists using ps and ai, pictures can be converted to SVG

The whole process has two classes, one SVG analytic tools:

/ **
 * Util class to init and get paths from svg.
 * /
public class SvgUtils {
    / **
    * It is for logging purposes.
    * /
    private static final String LOG_TAG = "SVGUtils";
    / **
    * All the paths with their attributes from the svg.
    * /
    private final List mPaths = new ArrayList ();
    / **
    * The paint provided from the view.
    * /
    private final Paint mSourcePaint;
    / **
    * The init svg.
    * /
    private SVG mSvg;

    / **
    * Init the SVGUtils with a paint for coloring.
    *
    * @param SourcePaint - the paint for the coloring.
    * /
    public SvgUtils (final Paint sourcePaint) {
        mSourcePaint = sourcePaint;
    }

    / **
    * Loading the svg from the resources.
    *
    * @param Context Context object to get the resources.
    * @param SvgResource int resource id of the svg.
    * /
    public void load (Context context, int svgResource) {
        if (mSvg = null!) return;
        try {
            mSvg = SVG.getFromResource (context, svgResource);
            mSvg.setDocumentPreserveAspectRatio (PreserveAspectRatio.UNSCALED);
        } Catch (SVGParseException e) {
            Log.e (LOG_TAG, "Could not load specified SVG resource", e);
        }
    }

    / **
    * Draw the svg to the canvas.
    *
    * @param Canvas The canvas to be drawn.
    * @param Width The width of the canvas.
    * @param Height The height of the canvas.
    * /
    public void drawSvgAfter (final Canvas canvas, final int width, final int height) {
        final float strokeWidth = mSourcePaint.getStrokeWidth ();
        rescaleCanvas (width, height, strokeWidth, canvas);
    }

    / **
    * Render the svg to canvas and catch all the paths while rendering.
    *
    * @param Width - the width to scale down the view to,
    * @param Height - the height to scale down the view to,
    * @return All the paths from the svg.
    * /
    public List getPathsForViewport (final int width, final int height) {
        final float strokeWidth = mSourcePaint.getStrokeWidth ();
        Canvas canvas = new Canvas () {
            private final Matrix mMatrix = new Matrix ();

            @Override
            public int getWidth () {
                return width;
            }

            @Override
            public int getHeight () {
                return height;
            }

            @Override
            public void drawPath (Path path, Paint paint) {
                Path dst = new Path ();

                // Noinspection deprecation
                getMatrix (mMatrix);
                path.transform (mMatrix, dst);
                paint.setAntiAlias (true);
                paint.setStyle (Paint.Style.STROKE);
                paint.setStrokeWidth (strokeWidth);
                mPaths.add (new SvgPath (dst, paint));
            }
        };

        rescaleCanvas (width, height, strokeWidth, canvas);

        return mPaths;
    }

    / **
    * Rescale the canvas with specific width and height.
    *
    * @param Width The width of the canvas.
    * @param Height The height of the canvas.
    * @param StrokeWidth Width of the path to add to scaling.
    * @param Canvas The canvas to be drawn.
    * /
    private void rescaleCanvas (int width, int height, float strokeWidth, Canvas canvas) {
        final RectF viewBox = mSvg.getDocumentViewBox ();

        final float scale = Math.min (width
                        / (ViewBox.width () + strokeWidth),
                height / (viewBox.height () + strokeWidth));

        canvas.translate ((width - viewBox.width () * scale) / 2.0f,
                (Height - viewBox.height () * scale) / 2.0f);
        canvas.scale (scale, scale);

        mSvg.renderToCanvas (canvas);
    }

    / **
    * Path with bounds for scalling, length and paint.
    * /
    public static class SvgPath {
        / **
        * Region of the path.
        * /
        private static final Region REGION = new Region ();
        / **
        * This is done for clipping the bounds of the path.
        * /
        private static final Region MAX_CLIP =
                new Region (Integer.MIN_VALUE, Integer.MIN_VALUE,
                        Integer.MAX_VALUE, Integer.MAX_VALUE);
        / **
        * The path itself.
        * /
        final Path path;
        / **
        * The paint to be drawn later.
        * /
        final Paint paint;
        / **
        * The length of the path.
        * /
        final float length;
        / **
        * The bounds of the path.
        * /
        final Rect bounds;
        / **
        * The measure of the path, we can use it later to get segment of it.
        * /
        final PathMeasure measure;

        / **
        * Constructor to add the path and the paint.
        *
        * @param Path The path that comes from the rendered svg.
        * @param Paint The result paint.
        * /
        SvgPath (Path path, Paint paint) {
            this.path = path;
            this.paint = paint;

            measure = new PathMeasure (path, false);
            this.length = measure.getLength ();

            REGION.setPath (path, MAX_CLIP);
            bounds = REGION.getBounds ();
        }
    }
}
     
         
         
         
  More:      
 
- exp / imp Export Import version of the problem and the ORA-6550 error (Database)
- Git remote repository Explanation (Linux)
- Using Java to build micro-services (Server)
- Linux network security backdoor technology and advanced skill practice (Linux)
- Linux use iptables ban Ping (Linux)
- Linux environment installation of rvm and ruby (Linux)
- Linux - Common process the command (Linux)
- Difference LVS three scheduling modes (Server)
- XP virtual machine under VirtualBox solve occupy 100% CPU problem (Linux)
- Wildcards and special symbols usage comments under Linux (Linux)
- To install Spotify in Ubuntu / Mint (Linux)
- Android Fragment really fully resolve (Programming)
- Using Vagrant create cross-platform development environment (Linux)
- Execute command sentence can result in equipment permanently bricked in Linux laptop (Linux)
- Let your PHP 7 faster the Hugepage (Linux)
- How to create a cloud encrypted file system in Linux systems (Linux)
- top command causes the system load increases (Linux)
- C ++ Fundamentals study notes (Programming)
- Open source backup software installed on Ubuntu Systemback 1.6.201 (Linux)
- PL / SQL in forall simple test (Database)
     
           
     
  CopyRight 2002-2020 newfreesoft.com, All Rights Reserved.