Desenhe forma de hexágono

votos
0

Estou tentando criar um hexágono usando vector

Isto é o que eu tenho:

<?xml version=1.0 encoding=utf-8?>
<vector android:height=24dp android:viewportHeight=628.0
android:viewportWidth=726.0 android:width=27dp xmlns:android=http://schemas.android.com/apk/res/android>
<path android:fillColor=#c3c3c3
    android:pathData=m723,314c-60,103.9 -120,207.8 -180,311.8
     -120,0 -240,0 -360,0C123,521.8 63,417.9 3,314 63,210.1 123,106.2
     183,2.2c120,0 240,0 360,0C603,106.2 663,210.1 723,314Z
    android:strokeColor=#fff android:strokeWidth=4/>
</vector>

Este é o resultado:

digite

Mas eu quero algo com isto:

digite

Como posso resolver isto?

Publicado 08/11/2018 em 06:44
fonte usuário
Em outras línguas...                            


3 respostas

votos
0

Alternativamente baixar o .XML Vector Drawable através do ícone do pacote aqui:

https://materialdesignicons.com/icon/hexagon

que tem esta aparência:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="24dp"
    android:width="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">
    <path android:fillColor="#000" android:pathData="M21,16.5C21,16.88 20.79,17.21 20.47,17.38L12.57,21.82C12.41,21.94 12.21,22 12,22C11.79,22 11.59,21.94 11.43,21.82L3.53,17.38C3.21,17.21 3,16.88 3,16.5V7.5C3,7.12 3.21,6.79 3.53,6.62L11.43,2.18C11.59,2.06 11.79,2 12,2C12.21,2 12.41,2.06 12.57,2.18L20.47,6.62C20.79,6.79 21,7.12 21,7.5V16.5Z" />
</vector>

e tem a forma que você necessita. Esta pode ser a solução mais limpa.

Respondeu 08/11/2018 em 07:40
fonte usuário

votos
0

Tente este código ...

HexagonMaskView.java

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PorterDuff;
import android.graphics.Region;
import android.util.AttributeSet;
import android.widget.ImageView;

public class HexagonMaskView extends ImageView {
private Path hexagonPath;
private Path hexagonBorderPath;
private Paint mBorderPaint;

public HexagonMaskView(Context context) {
    super(context);
    init();
}

public HexagonMaskView(Context context, AttributeSet attrs) {
    super(context, attrs);
    init();
}

public HexagonMaskView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init();
}

private void init() {
    this.hexagonPath = new Path();
    this.hexagonBorderPath = new Path();

    this.mBorderPaint = new Paint();
    this.mBorderPaint.setColor(Color.WHITE);
    this.mBorderPaint.setStrokeCap(Paint.Cap.ROUND);
    this.mBorderPaint.setStrokeWidth(50f);
    this.mBorderPaint.setStyle(Paint.Style.STROKE);
}

public void setRadius(float radius) {
    calculatePath(radius);
}

public void setBorderColor(int color) {
    this.mBorderPaint.setColor(color);
    invalidate();
}

private void calculatePath(float radius) {
    float halfRadius = radius / 2f;
    float triangleHeight = (float) (Math.sqrt(3.0) * halfRadius);
    float centerX = getMeasuredWidth() / 2f;
    float centerY = getMeasuredHeight() / 2f;

    this.hexagonPath.reset();
    this.hexagonPath.moveTo(centerX, centerY + radius);
    this.hexagonPath.lineTo(centerX - triangleHeight, centerY + halfRadius);
    this.hexagonPath.lineTo(centerX - triangleHeight, centerY - halfRadius);
    this.hexagonPath.lineTo(centerX, centerY - radius);
    this.hexagonPath.lineTo(centerX + triangleHeight, centerY - halfRadius);
    this.hexagonPath.lineTo(centerX + triangleHeight, centerY + halfRadius);
    this.hexagonPath.close();

    float radiusBorder = radius - 5f;
    float halfRadiusBorder = radiusBorder / 2f;
    float triangleBorderHeight = (float) (Math.sqrt(3.0) * halfRadiusBorder);

    this.hexagonBorderPath.reset();
    this.hexagonBorderPath.moveTo(centerX, centerY + radiusBorder);
    this.hexagonBorderPath.lineTo(centerX - triangleBorderHeight, centerY + halfRadiusBorder);
    this.hexagonBorderPath.lineTo(centerX - triangleBorderHeight, centerY - halfRadiusBorder);
    this.hexagonBorderPath.lineTo(centerX, centerY - radiusBorder);
    this.hexagonBorderPath.lineTo(centerX + triangleBorderHeight, centerY - halfRadiusBorder);
    this.hexagonBorderPath.lineTo(centerX + triangleBorderHeight, centerY + halfRadiusBorder);
    this.hexagonBorderPath.close();
    invalidate();
}

@Override
public void onDraw(Canvas c) {
    c.drawPath(hexagonBorderPath, mBorderPaint);
    c.clipPath(hexagonPath, Region.Op.INTERSECT);
    c.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR);
    super.onDraw(c);
}

@Override
public void onMeasure(int widthMeasureSpec, int heightMeasureSpec){
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    int width = MeasureSpec.getSize(widthMeasureSpec);
    int height = MeasureSpec.getSize(heightMeasureSpec);
    setMeasuredDimension(width, height);
    calculatePath(Math.min(width / 2f, height / 2f) - 10f);
}
}

traçado

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:background="@android:color/holo_green_dark">

<com.scelus.hexagonmaskimproved.HexagonMaskView
    android:id="@+id/image"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:src="@drawable/greencolor"
    android:background="@android:color/holo_green_light"/>

</RelativeLayout>

Espero que este irá ajudar ...!

Respondeu 08/11/2018 em 07:27
fonte usuário

votos
0

Defina o ImageView rotação = 30 e clipChilden = false no pai ViewGroup. Algo como isso talvez:

<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:clipChildren="false"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="74dp"
        android:layout_height="63dp"
        android:src="@drawable/hexagon"
        android:layout_gravity="center"
        android:rotation="30"/>

</FrameLayout>

digite descrição da imagem aqui

Respondeu 08/11/2018 em 07:26
fonte usuário

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more