在画布上绘制时自定义路径线型 [英] Custom path line style when drawing on canvas

查看:113
本文介绍了在画布上绘制时自定义路径线型的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我目前正在在地图上的叠加,突出沿指定点的路线,我需要实现某种线条样式(像上图)

我想要做的是什么 - 是突出的东西,如在双方黑色笔触线条透明线的路线

与不同的填充样式和油漆设置播放没有导致我至今任何解决方案。

有谁知道我需要什么样的方向去寻找?

目前,我设法只画实线,但是这不是我要找:

油漆设置:

  mPaint.setStyle(Paint.Style.STROKE);
mPaint.setColor(COLOR_DEFAULT);
mPaint.setPathEffect(新CornerPathEffect(10));
mPaint.setStrokeWidth(6);
mPaint.setAntiAlias​​(真正的);
 

绘图程序

  canvas.drawPath(的mpath,mPaint);
 

解决方案

我得到PathDashPathEffect使用破折号邮票这是两个非常薄的矩形和由变形样式选项pretty的好成绩。在这里看到最后,三最后一行:

这是通过修改 PathEffects 例如从SDK中获得ApiDemos得出:

 包com.example.android.apis.graphics;

进口android.content.Context;
进口android.graphics *。
进口android.os.Bundle;
进口android.view.KeyEvent;
进口android.view.View;

公共类PathEffects扩展GraphicsActivity {

    @覆盖
    保护无效的onCreate(包savedInstanceState){
        super.onCreate(savedInstanceState);
        的setContentView(新SampleView(本));
    }

    私有静态类SampleView扩展视图{
        私人油漆mPaint;
        私人路径的mpath;
        私人PathEffect [] mEffects;
        私人INT [] mColors;
        私人浮动MPHASE = 3;

        私有静态无效makeEffects(PathEffect [] E,浮动期){
            E [0] = NULL; // 没有效果
            E [1] =新CornerPathEffect(10);
            E [2] =新DashPathEffect(新浮法[] {10,5,5,5},阶段);
            E [3] =新PathDashPathEffect(makePathDash(),12,相位,
                                          PathDashPathEffect.Style.MORPH);
            E [4] =新ComposePathEffect(E [2],E [1]);
            E [5] =新ComposePathEffect(E [3],E [1]);
        }

        公共SampleView(上下文的背景下){
            超(上下文);
            setFocusable(真正的);
            setFocusableInTouchMode(真正的);

            mPaint =新的油漆(Paint.ANTI_ALIAS_FLAG);
            mPaint.setStyle(Paint.Style.STROKE);
            mPaint.setStrokeWidth(6);

            的mpath = makeFollowPath();

            mEffects =新PathEffect [6];

            mColors =新INT [] {Color.BLACK,Color.RED,Color.BLUE,
                                  Color.GREEN,Color.MAGENTA,Color.BLACK
                                };
        }

        @覆盖保护无效的OnDraw(帆布油画){
            canvas.drawColor(Color.WHITE);

            RectF边界=新RectF();
            mPath.computeBounds(边界,假);
            canvas.translate(10  -  bounds.left,10  -  bounds.top);

            makeEffects(mEffects,MPHASE);
            无效();

            的for(int i = 0; I< mEffects.length;我++){
                mPaint.setPathEffect(mEffects [I]);
                mPaint.setColor(mColors [I]);
                canvas.drawPath(的mpath,mPaint);
                canvas.translate(0,28);
            }
        }

        @覆盖公共布尔的onkeydown(INT键code,KeyEvent的事件){
            开关(钥匙code){
                案例KeyEvent.KEY code_DPAD_CENTER:
                    的mpath = makeFollowPath();
                    返回true;
            }
            返回super.onKeyDown(键code,事件);
        }

        私有静态路径makeFollowPath(){
            路径P =新路径();
            p.moveTo(0,0);
            的for(int i = 1; I< = 15;我++){
                p.lineTo(I * 20,(浮动)的Math.random()* 35);
            }
            返回磷;
        }

        私有静态路径makePathDash(){
            路径P =新路径();
            p.moveTo(-6,4);
            p.lineTo(6,4);
            p.lineTo(6,3);
            p.lineTo(-6,3);
            p.close();
            p.moveTo(-6,-4);
            p.lineTo(6,-4);
            p.lineTo(6,-3);
            p.lineTo(-6,-3);
            返回磷;
        }
    }
}
 

I'm currently working on map overlay which highlights the route along specified points and I need to implement certain line style (something like on screenshot)

What I'm trying to do - is to highlight the route with something like transparent line with black stroke lines from both sides

Playing with different fill styles and Paint settings haven't led me to any solution so far.

Does anybody know what direction I need to look for?

Currently I managed to draw only solid line, but this is not what I'm looking for:

Paint setup:

mPaint.setStyle(Paint.Style.STROKE);
mPaint.setColor(COLOR_DEFAULT);
mPaint.setPathEffect(new CornerPathEffect(10));
mPaint.setStrokeWidth(6);
mPaint.setAntiAlias(true);

Drawing routine

canvas.drawPath(mPath, mPaint);

解决方案

I get pretty good results with PathDashPathEffect using a "dash stamp" that's two very thin rectangles and the MORPH style option. See last and 3rd last line here:

This was drawn by modifying the PathEffects example in ApiDemos taken from the SDK:

package com.example.android.apis.graphics;

import android.content.Context;
import android.graphics.*;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.View;

public class PathEffects extends GraphicsActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(new SampleView(this));
    }

    private static class SampleView extends View {
        private Paint mPaint;
        private Path mPath;
        private PathEffect[] mEffects;
        private int[] mColors;
        private float mPhase = 3;

        private static void makeEffects(PathEffect[] e, float phase) {
            e[0] = null;     // no effect
            e[1] = new CornerPathEffect(10);
            e[2] = new DashPathEffect(new float[] {10, 5, 5, 5}, phase);
            e[3] = new PathDashPathEffect(makePathDash(), 12, phase,
                                          PathDashPathEffect.Style.MORPH);
            e[4] = new ComposePathEffect(e[2], e[1]);
            e[5] = new ComposePathEffect(e[3], e[1]);
        }

        public SampleView(Context context) {
            super(context);
            setFocusable(true);
            setFocusableInTouchMode(true);

            mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
            mPaint.setStyle(Paint.Style.STROKE);
            mPaint.setStrokeWidth(6);

            mPath = makeFollowPath();

            mEffects = new PathEffect[6];

            mColors = new int[] { Color.BLACK, Color.RED, Color.BLUE,
                                  Color.GREEN, Color.MAGENTA, Color.BLACK
                                };
        }

        @Override protected void onDraw(Canvas canvas) {
            canvas.drawColor(Color.WHITE);

            RectF bounds = new RectF();
            mPath.computeBounds(bounds, false);
            canvas.translate(10 - bounds.left, 10 - bounds.top);

            makeEffects(mEffects, mPhase);
            invalidate();

            for (int i = 0; i < mEffects.length; i++) {
                mPaint.setPathEffect(mEffects[i]);
                mPaint.setColor(mColors[i]);
                canvas.drawPath(mPath, mPaint);
                canvas.translate(0, 28);
            }
        }

        @Override public boolean onKeyDown(int keyCode, KeyEvent event) {
            switch (keyCode) {
                case KeyEvent.KEYCODE_DPAD_CENTER:
                    mPath = makeFollowPath();
                    return true;
            }
            return super.onKeyDown(keyCode, event);
        }

        private static Path makeFollowPath() {
            Path p = new Path();
            p.moveTo(0, 0);
            for (int i = 1; i <= 15; i++) {
                p.lineTo(i*20, (float)Math.random() * 35);
            }
            return p;
        }

        private static Path makePathDash() {
            Path p = new Path();
            p.moveTo(-6, 4);
            p.lineTo(6,4);
            p.lineTo(6,3);
            p.lineTo(-6, 3);
            p.close();
            p.moveTo(-6, -4);
            p.lineTo(6,-4);
            p.lineTo(6,-3);
            p.lineTo(-6, -3);
            return p;
        }
    }
}

这篇关于在画布上绘制时自定义路径线型的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆