Вопрос по android – Пользовательский стиль линии при рисовании на холсте
В настоящее время я работаю над наложением карты, которое выделяет маршрут вдоль указанных точек, и мне нужно реализовать определенный стиль линий (что-то вроде скриншота)
То, что я пытаюсь сделать, - это выделить маршрут чем-то вроде прозрачной линии с черными штриховыми линиями с обеих сторон.
Игра с различными стилями заливки и настройками рисования пока не привела меня к какому-либо решению.
Кто-нибудь знает, в каком направлении мне нужно искать?
В настоящее время мне удалось нарисовать только сплошную линию, но это не то, что я искал:
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);
используя & quot; тире штамп & quot; это два очень тонких прямоугольника и опция стиля MORPH. Смотрите последнюю и третью последнюю строку здесь:
Это было сделано путем измененияPathEffects
Пример в ApiDemos взят из 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;
}
}
}
Поэтому я избавился от своего собственного эффекта пути и начал использовать обычный ход. Таким образом, я в основном рисую свой путь 2 раза: сначала я рисую черную линию, затем я рисую более тонкую прозрачную линию, чтобы очистить центр предыдущей черной линии.
Единственная хитрость в этом подходе заключается в том, что мне нужно нарисовать мой путь в отдельном растровом изображении (используя временный холст), а когда растровое растровое изображение готово - отобразить его на главном холсте.
Надеюсь, это поможет кому-то еще
@Override
public void draw(Canvas canvas, final MapView mapView, boolean shadow)
{
//Generate new bitmap if old bitmap doesn't equal to the screen size (f.i. when screen orientation changes)
if(pathBitmap == null || pathBitmap.isRecycled() || pathBitmap.getWidth()!=canvas.getWidth() || pathBitmap.getHeight()!=canvas.getHeight())
{
if(pathBitmap != null)
{
pathBitmap.recycle();
}
pathBitmap = Bitmap.createBitmap(canvas.getWidth(), canvas.getHeight(), Config.ARGB_8888);
tempCanvas.setBitmap(pathBitmap);
}
//Render routes to the temporary bitmap
renderPathBitmap();
//Render temporary bitmap onto main canvas
canvas.drawBitmap(pathBitmap, 0, 0, null);
}
}
private void renderPath(Path path, Canvas canvas)
{
routePaint.setStrokeWidth(ROUTE_LINE_WIDTH);
routePaint.setColor(OUTER_COLOR);
routePaint.setXfermode(null);
canvas.drawPath(path, routePaint); //render outer line
routePaint.setStrokeWidth(ROUTE_LINE_WIDTH/1.7f);
routePaint.setColor(Color.TRANSPARENT);
routePaint.setXfermode(new PorterDuffXfermode(Mode.CLEAR));
canvas.drawPath(path, routePaint); //render inner line
}
Итак, результат выглядит так:
if(pathBitmap == null || pathBitmap.isRecycled() || pathBitmap.getWidth()!=canvas.getWidth() || pathBitmap.getHeight()!=canvas.getHeight()) { if(pathBitmap != null) { pathBitmap.recycle(); } pathBitmap = Bitmap.createBitmap(canvas.getWidth(), canvas.getHeight(), Config.ARGB_8888); tempCanvas = new Canvas(pathBitmap); } tempCanvas .drawPath(path, routePaint); canvas.drawBitmap(pathBitmap, 0, 0, null);