Android：如下关于绘制圆角矩形边框问题，怎么解决？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Android：如下关于绘制圆角矩形边框问题，怎么解决？相关的知识，希望对你有一定的参考价值。
android：通过Canvas用path绘制出来的圆角矩形A，通过shape xml制作的圆角矩形B，前者的圆角处比后者模糊，怎么让前者的效果和后者一样？
参考技术A paint.setAntiAlias(true);尝试在画笔上设置抗锯齿 参考技术B 一、直接用矩形选框工具，先画出一个矩形，然后选择菜单——选择——修改里面的平滑，就是把矩形的四边变成圆角。
然后填充颜色，然后在选择修改里面的收缩，就是说把选区往里面收缩，然后删除即可，这样可以得到带边框的圆角矩形。
二、还是用矩形选框工具画出一个矩形，还是用修改里面的平滑，然后你可以直接选择变换选区，也是在选择菜单里面的，这样你可以自己控制那个选区，可以自己缩放，然后在删除即可。
这个方法比较好。
三、可以直接用形状工具，就是工具里面的圆角矩形工具，可以在属性上设置为图形，就是上面第一个，然后画出一个圆角矩形，接下来你在选择圆角矩形工具，这里需要注意的是，在属性上选择从形状区域减去，就是说相减，这样你可以在画出一个矩形，这样可以把里面的地方掏空，而且还能移动位置，可以配合路径选择工具调整位置。
html5中canvas通过js绘制圆角矩形
添加绘制圆角矩形的方法，核心代码如下：
/**
* x 起始X坐标(必须)
* y 其实Y坐标(必须)
* w 矩形宽度(必须)
* h 矩形高度(必须)
* r 矩形圆角半径(可选，默认为0)
* b 矩形边框宽度(可选，默认为1)
* c 矩形边框颜色(可选，默认"#FFF")
**/
CanvasRenderingContext2D.prototype.roundRect = function (x, y, w, h, r, b, c)
//设置默认圆角半径
if(!r)
r = 0;
//设置线条宽度
if(b)
this.lineWidth = b;
else
this.lineWidth = 1;
//设置颜色
if(c)
this.strokeStyle = c;
else
this.strokeStyle = "#000";
/*
*由于Canvas画图时边框宽度由理论中心线向两边扩展，为使绘图边框只向外扩展，
*逻辑上将矩形高宽相对中心扩大1/2边框宽度
*/
x -= this.lineWidth / 2;
y -= this.lineWidth / 2;
w += this.lineWidth;
h += this.lineWidth;
//当长宽小于2倍半径时，将半径缩小为长宽一般（即画圆）
if (h >= w && w < 2 * r)
r = w / 2;
else if(w > h && h < 2 * r)
r = h / 2;
this.beginPath();
this.moveTo(x + w - r, y);
this.arcTo(x + w , y, x + w , y + r, r);
this.arcTo(x + w, y + h , x + w - r, y + h , r);
this.arcTo(x, y + h, x , y + h - r, r);
this.arcTo(x, y , x+r, y , r);
this.closePath();
return this;
在js代码中对添加的该方法进行调用即可绘制出相应的圆角矩形。
其中js代码如下：
$(function()
/**
* x 起始X坐标(必须)
* y 其实Y坐标(必须)
* w 矩形宽度(必须)
* h 矩形高度(必须)
* r 矩形圆角半径(可选，默认为0)
* b 矩形边框宽度(可选，默认为1)
* c 矩形边框颜色(可选，默认"#FFF")
**/
CanvasRenderingContext2D.prototype.roundRect = function (x, y, w, h, r, b, c)
//设置默认圆角半径
if(!r)
r = 0;
//设置线条宽度
if(b)
this.lineWidth = b;
else
this.lineWidth = 1;
//设置颜色
if(c)
this.strokeStyle = c;
else
this.strokeStyle = "#000";
/*
*由于Canvas画图时边框宽度由理论中心线向两边扩展，为使绘图边框只向外扩展，
*逻辑上将矩形高宽相对中心扩大1/2边框宽度
*/
x -= this.lineWidth / 2;
y -= this.lineWidth / 2;
w += this.lineWidth;
h += this.lineWidth;
//当长宽小于2倍半径时，将半径缩小为长宽一般（即画圆）
if (h >= w && w < 2 * r)
r = w / 2;
else if(w > h && h < 2 * r)
r = h / 2;
this.beginPath();
this.moveTo(x + w - r, y);
this.arcTo(x + w , y, x + w , y + r, r);
this.arcTo(x + w, y + h , x + w - r, y + h , r);
this.arcTo(x, y + h, x , y + h - r, r);
this.arcTo(x, y , x+r, y , r);
this.closePath();
return this;
$("#tb input").on('change',function()
var x = 0;
var y = 0;
var w = 0;
var h = 0;
var r = 0;
var b = 1;
var c = "#000";
if(/^[+-]?[0-9]*/.test($("#_x").val()))
x = parseInt($("#_x").val());
if(/^[+-]?[0-9]*/.test($("#_y").val()))
y = parseInt($("#_y").val());
if(/^[0-9]*/.test($("#_w").val()))
w = parseInt($("#_w").val());
if(/^[0-9]*/.test($("#_h").val()))
h = parseInt($("#_h").val());
if(/^0|([1-9][0-9]*)(\\.[0-9]*)?$/.test($("#_r").val()))
r = $("#_r").val();
if(/[1-9][0-9]*$/.test($("#_b").val()))
b = $("#_b").val();
if(/^\\#[0-9A-Fa-f]3|[0-9A-Fa-f]6$/.test($("#_c").val()))
c = $("#_c").val();
var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.roundRect(x,y,w,h,r,b,c).stroke();
);
$("#mycanvas").mousemove(function(e)
$("#m_x").text(e.offsetX);
$("#m_y").text(e.offsetY);
).mouseleave(function()
$("#m_x").text("");
$("#m_y").text("");
);
$("#tb input:eq(0)").change();
);
html展示页面代码如下：
<html>
<head>
<style type="text/css">
*
margin: 0px auto;
padding: 0px;
list-style: none;
text-decoration: none;
#main
margin: 0px auto;
width: 1000px;
#main > ul
width: 100%;
list-style: none;
#main > ul > li
width: 100%;
margin: 5px 0px;
#canvas_div
margin: auto;
width: 400px;
height:400px;
border: 1px solid #0f0;
#tb
margin: 10px auto;
#tb input
width: 100%;
height: 20px;
</style>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/test.js"></script>
</head>
<body>
<div id="main">
<ul>
<li>
<table border="1" id="tb">
<thead>
<th width="120">名称</th>
<th width="200">值</th>
</thead>
<tbody>
<tr>
<td>起始X坐标</td>
<td><input id="_x" value="150" /></td>
</tr>
<tr>
<td>起始Y坐标</td>
<td><input id="_y" value="150" /></td>
</tr>
<tr>
<td>矩形宽度</td>
<td><input id="_w" value="100" /></td>
</tr>
<tr>
<td>矩形高度</td>
<td><input id="_h" value="100" /></td>
</tr>
<tr>
<td>圆滑度</td>
<td><input id="_r" value="5" /></td>
</tr>
<tr>
<td>边框宽度</td>
<td><input id="_b" value="1" /></td>
</tr>
<tr>
<td>边框颜色</td>
<td><input id="_c" value="#000"/></td>
</tr>
</tbody>
</table>
<div id="canvas_div">
<canvas id="mycanvas" width="400px"height="400px"></canvas>
</div>
<div>
鼠标坐标X：<span id="m_x"></span>
鼠标坐标Y：<span id="m_y"></span>
</div>
</li>
</ul>
</div>
</body>
</html>完成展示。
以上是关于Android：如下关于绘制圆角矩形边框问题，怎么解决？的主要内容，如果未能解决你的问题，请参考以下文章