如何绘制自定义背景

Question

我需要设计一个三角形并在其中显示一些文本，角度为45度，然后我需要在三角形边界之外放置一个TextView来显示其他文本，就像横幅一样。但是当我使用相对布局并设置三角形背景时，它仍然表现为矩形，遮挡了我的TextView。以下是我使用的代码：

<RelativeLayout
        android:id="@+id/relative"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:background="@drawable/image_sticker" >

        <com.example.AngledTextView
            android:id="@+id/textViewx"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:rotation="52"
            android:textColor="#FFFFFF" />
    </RelativeLayout>

我的AngledTextView类：

public class AngledTextView extends TextView  {  

    private int mWidth;
    private int mHeight;


    public AngledTextView(Context context, AttributeSet attrs)  {  
        super(context, attrs);  

    }  



    @Override  
    protected void onDraw(Canvas canvas) {  
        canvas.save();  
        /*Paint textPaint = new Paint(); 
        int xPos = (canvas.getWidth() / 2);
        int yPos = (int) ((canvas.getHeight() / 2) - ((textPaint.descent() + textPaint.ascent()) / 2)) ; 

            canvas.rotate(45, xPos,yPos);   */

        super.onDraw(canvas);  
        canvas.restore();  
    }  
}  

问题：

如果有任何提示或建议教程的链接，将不胜感激 :)

- User3

Answer 1

我最近也做了类似的事情���以下是我使用的一些技巧:

• Create customView class.
• Init at least one Paint (semitransparent, fill) and one Path on your init method. It should be called from constructors.

• On your onDraw method customize path. For example:

  mPath = new Path();
  mPath.moveTo(.0f, this.getHeight());
  mPath.lineTo(this.getWidth(), this.getHeight());
  mPath.lineTo(this.getWidth(),0.25f*this.getHeight());
  mPath.lineTo(.0f, .0f);
  mPath.lineTo(.0f, this.getHeight());
  

• This will make a Path similar to a trapezoid. Just customize your points to make a triangle. Then call

  canvas.clipPath(mPath);
  canvas.drawPath(mPath,mPaint);
  

• With these points, you will draw your triangle. You could pass a String to your init method and call drawText before drawing the path:

  canvas.drawText(str, xTit, yTit, mPaintTit);
  

我希望这能有所帮助 =)

- Luciano Rodríguez

---

谢谢，我正在研究这个。 - User3

Answer 2

在常规的TextView中使用旋转动画，如下所示。

 <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:rotation="45"
    android:text="@string/hello_world" />

- Akash

---

旋转整个视图，这不是我想要的。 - User3

你想旋转特定的textView。 - Akash

我只想在文本视图中旋转文本并使其成为三角形，以便我可以适应底部视图。 - User3

android:rotation="45" - Akash

Answer 3

您的实现可以继承 Drawable 并实现 getTransparentRegion()。 接下来，在一个视图上使用这个可绘制对象作为背景，该视图位于您的 TextView 上层（可能通过将两者作为 FrameView 的子元素来实现）。

- Lasse Magnussen

Answer 4

我有一些关于创建三角形背景的链接，如下所示：

链接1

链接2

链接3

希望对你有所帮助。

- Lokesh

Answer 5

在进行任何绘图之前，您必须初始化并加载计划绘制的形状。除非您程序中使用的形状的结构（原始坐标）在执行过程中发生更改，否则应在渲染器的onSurfaceCreated()方法中对它们进行初始化，以提高内存和处理效率。

public void onSurfaceCreated(GL10 unused, EGLConfig config) {
    ...

    // initialize a triangle
    mTriangle = new Triangle();
    // initialize a square
    mSquare = new Square();
}

例子

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Paint.Style;
import android.graphics.Path;
import android.graphics.Point;
import android.util.AttributeSet;
import android.util.Log;
import android.widget.LinearLayout;

public class Slice extends LinearLayout {

    final static String TAG = "Slice";
    Paint mPaint;
    Path mPath;

    public enum Direction {
        NORTH, SOUTH, EAST, WEST;
    }

    public Slice(Context context) {
        super(context);
        Create(context);
    }

    public Slice(Context context, AttributeSet attrs) {
        super(context, attrs);
        Create(context);
    }

    private void Create(Context context) {
        Log.i(TAG, "Creating ...");

        mPaint = new Paint();
        mPaint.setStyle(Style.FILL);
        mPaint.setColor(Color.RED);

        Point point = new Point();
        point.x = 80;
        point.y = 80;

        mPath = Calculate(point, 70, Direction.SOUTH);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        Log.i(TAG, "Drawing ...");

        canvas.drawPath(mPath, mPaint);
    }

    private Path Calculate(Point p1, int width, Direction direction) {
        Log.i(TAG, "Calculating ...");

        Point p2 = null, p3 = null;

        if (direction == Direction.NORTH) {
            p2 = new Point(p1.x + width, p1.y);
            p3 = new Point(p1.x + (width / 2), p1.y - width);
        } else if (direction == Direction.SOUTH) {
            p2 = new Point(p1.x + width, p1.y);
            p3 = new Point(p1.x + (width / 2), p1.y + width);
        } else if (direction == Direction.EAST) {
            p2 = new Point(p1.x, p1.y + width);
            p3 = new Point(p1.x - width, p1.y + (width / 2));
        } else if (direction == Direction.WEST) {
            p2 = new Point(p1.x, p1.y + width);
            p3 = new Point(p1.x + width, p1.y + (width / 2));
        }

        Path path = new Path();
        path.moveTo(p1.x, p1.y);
        path.lineTo(p2.x, p2.y);
        path.lineTo(p3.x, p3.y);

        return path;
    }
}

- Arihant Godha