如何繪製帶有圓角的正方形的線條？

Question

我很高興你的幫助！我使用以下代碼：

Paint mPaintShape = new Paint(); 
mPaintShape.setStrokeWidth(AppUtill.dp2px(getContext(), 4)); 
mPaintShape.setColor(mNormalColor); 
mPaintShape.setStyle(Paint.Style.STROKE); 

@Override 
    protected void onDraw(Canvas canvas) { 
     RectF rect = new RectF(0, 0, mSize, mSize); 
     canvas.drawRoundRect(rect, mCornerRadius, mCornerRadius, mPaintShape); 
    } 

而且我得到以下結果。但我想要有圓角的外角 我該怎麼做？

Answer 1

首先創建一個樣式文件給出 allround.xml

<?xml version="1.0" encoding="utf-8"?> 
<selector xmlns:android="http://schemas.android.com/apk/res/android"> 
<item android:state_pressed="true" > 
    <shape android:shape="rectangle"> 
     <solid 
      android:color="#ff6600" /> 
     <stroke 
      android:width="2dp" 
      android:color="#EAD61C" /> 
     <corners 
      android:radius="7dp" /> 
     <padding 
      android:left="5dp" 
      android:top="5dp" 
      android:right="5dp" 
      android:bottom="5dp" /> 
    </shape> 
</item> 
<item> 
    <shape android:shape="rectangle"> 
     <gradient 
      android:startColor="#ffff00" 
      android:endColor="#FEC34D" 
      android:angle="270" /> 
     <stroke 
      android:width="2dp" 
      android:color="#2f6699" /> 
     <corners 
      android:radius="7dp" /> 
     <padding 
      android:left="5dp" 
      android:top="5dp" 
      android:right="5dp" 
      android:bottom="5dp" /> 
    </shape> 
</item> 
</selector> 

，並在你的佈局組件應用此風格爲後續

android:background="@drawable/allround" 

或者您可以使用> >>>>>>>>>

RectF r = new RectF(1,2,3,4); 
canvas.drawRoundRect(r, 0, 0, mPaint); 

Answer 2

試試這個：

<?xml version="1.0" encoding="utf-8"?> 
<selector xmlns:android="http://schemas.android.com/apk/res/android"> 
    <item android:state_pressed="true" 
     android:drawableRight="@drawable/btnpressed"> 
     <shape> 
      <solid 
       android:color="#6B0000" /> 
      <stroke 
       android:width="3dp" 
       android:color="#6B0000" /> 
      <corners 
       android:radius="6dp" /> 
      <padding 
       android:left="10dp" 
       android:top="10dp" 
       android:right="10dp" 
       android:bottom="10dp" /> 
     </shape> 
    </item> 

    <item> 
     <shape> 
      <gradient 
       android:startColor="#794C3F" 
       android:endColor="#794C3F" 
       android:angle="270" /> 
      <stroke 
       android:width="3dp" 
       android:color="#794C3F" /> 
      <corners 
       android:radius="7dp" /> 
      <padding 
       android:left="10dp" 
       android:top="10dp" 
       android:right="10dp" 
       android:bottom="10dp" /> 
     </shape> 
    </item> 
</selector> 

Answer 3

該解決方案使用Canvas.drawLine()和Canvas.draw Arc()。我介紹了偏移量並根據測量的高度/寬度設置了「mSize」，以確保在所有邊緣上都能看到所需的筆觸寬度。修改'mCornerRadius'當然會改變角落。

我用紅色油漆與圓角半徑8得到這個：

@Override 
protected void onDraw(Canvas canvas) 
{ 
    // to make sure that the whole shape fits into the View 
    // (else some lines may be thinner/ missing) 
    mSize = Math.min(getMeasuredHeight(), getMeasuredWidth())*0.8f; 

    float offset_top = 4; 
    float offset_left = 4; 
    float sizeMinusRadius = mSize - mCornerRadius; 

    // horizontal lines 
    canvas.drawLine(offset_left + mCornerRadius, offset_top, offset_left + sizeMinusRadius, offset_top, mPaintShape); 
    canvas.drawLine(offset_left + mCornerRadius, offset_top + mSize, offset_left + sizeMinusRadius, offset_top + mSize, mPaintShape); 

    // vertical lines 
    canvas.drawLine(offset_left, offset_top + mCornerRadius, offset_left, offset_top + sizeMinusRadius, mPaintShape); 
    canvas.drawLine(offset_left + mSize, offset_top + mCornerRadius, offset_left + mSize, offset_top + sizeMinusRadius, mPaintShape); 

    // corner bottom left 
    RectF rBottomLeft = new RectF(offset_left, 
      offset_top + mSize - 2 * mCornerRadius, offset_left + 2 * mCornerRadius, 
      offset_top + mSize); 
    canvas.drawArc(rBottomLeft, 90, 90, false, mPaintShape); 
    // corner bottom right 
    RectF rBottomRight = new RectF(offset_left + mSize - 2 * mCornerRadius, 
     offset_top + mSize - 2 * mCornerRadius, offset_left + mSize, offset_top + mSize); 
    canvas.drawArc(rBottomRight, 0, 90, false, mPaintShape); 
    // corner top left 
    RectF rTopLeft = new RectF(offset_left, offset_top, 
       offset_left + 2 * mCornerRadius, offset_top + 2 * mCornerRadius); 
    canvas.drawArc(rTopLeft, 180, 90, false, mPaintShape); 
    // corner top right 
    RectF rTopRight = new RectF(offset_left + mSize - 2 * mCornerRadius, offset_top, 
          offset_left + mSize, offset_top + 2 * mCornerRadius); 
    canvas.drawArc(rTopRight, 270, 90, false, mPaintShape); 
}