QML画图-Canvas画基本图形

1.canvas画矩形

a.无路径画法

ctx.fillRect(200,100,50,40);    //填充
ctx.strokeRect(200,100,50,40);  //描边

注：先用fillRect填充了矩形，用stroke()，不能描边，因为虽然有个矩形，但不存在路径。

b.rect

ctx.rect(300,100,50,40);
ctx.stroke();
ctx.fill();

注：填充或描边会消耗大量资源，先画路径再填充或描边。

c.lineTo

用4个lineTo画一个矩形，无必要。

d.圆角矩形

用arcTo画四个“钩子”，组成圆角矩形。

2.Canvas画圆

ctx.arc(300,300,100,0,Math.PI*2);
ctx.stroke();
ctx.fill();

3. Canvas画扇形

/** 扇形
* @param x 扇形圆心x左标
* @param y 扇形圆心y坐标
* @param r 扇形半径
* @param angleBegin 扇形开始角度
* @param angleEnd 扇形结束角度
* @param ifAnticlockwise 是否是逆时针
*/
function getsectorPath(ctx, x, y, r, angleBegin, angelEnd, ifAnticlockwise)
{
try
{
ctx.arc(x, y, r, angleBegin, angelEnd, ifAnticlockwise);
ctx.lineTo(x,y);
ctx.closePath();
} catch(e) {
console.log(e)
}
}

3.Canvas画椭圆

a.使用lineTo画椭圆

function getEllipsePath(ctx, xp, yp, a, b)//中点坐标，长轴/2，短轴/2
{
ctx.beginPath();
//lineTo的画法,循环次数多，耗资源
var xPos = xp + a;
var yPos = yp;
ctx.moveTo(xPos, yPos);
for(var i=0; i<=360; i++)
{
var angle = i * Math.PI / 180;
//参数方程：x=acosθ ， y=bsinθ
xPos = xp + a*Math.cos(angle);
yPos = yp - b*Math.sin(angle);
ctx.lineTo(xPos, yPos);
}
}

b.用arc画圆，然后把它缩放成一个椭圆

ctx.save(); //先保存，之前画的图形不变动
ctx.scale(a/b, 1); //缩放函数, 圆的中点坐标会改变，a/b:长轴/短轴的一半
ctx.beginPath();
ctx.arc(xp*b/a, yp, b, 0, 2 * Math.PI, false);
ctx.stroke()
// restore to original state
    ctx.restore() //将画布置回原来的状态，即不拉伸

c.用四条贝赛尔曲线画出来，起点坐标为椭圆对应矩形的左上角点。

var kappa = 0.5522848; //取值，来路不明？？
var ox = a * kappa, // control point offset horizontal
oy = b * kappa, // control point offset vertical
xe = xp + 2*a, // x-end
ye = yp + 2*b, // y-end
xm = xp + a, // x-middle
ym = yp + b; // y-middle
ctx.moveTo(xp, ym);
ctx.bezierCurveTo(xp, ym - oy, xm - ox, yp, xm, yp);
ctx.bezierCurveTo(xm + ox, yp, xe, ym - oy, xe, ym);
ctx.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
ctx.bezierCurveTo(xm - ox, ye, xp, ym + oy, xp, ym);
//ctx.closePath();

d.用四条贝赛尔曲线画出来，起点坐标为椭圆中点

var kappa = 1 - 0.5522848; //取值，来路不明？？
var ox = a * kappa, // control point offset horizontal
oy = b * kappa, // control point offset vertical
xe = xp + 2*a, // x-end
ye = yp + 2*b, // y-end
xm = xp + a, // x-middle
ym = yp + b; // y-middle
ctx.moveTo(xp-a, yp);
ctx.bezierCurveTo(xp-a, yp-oy, xp-ox, yp-b, xp, yp-b);
ctx.bezierCurveTo(xp+ox, yp-b, xp+a, xp-oy, xp+a, yp);
ctx.bezierCurveTo(xp+a, yp+oy, xp+ox, xp+b, xp, yp+b);
ctx.bezierCurveTo(xp-ox, yp+b, xp-a, yp+oy, xp-a, yp);
//ctx.closePath();

c.用两条贝塞尔曲线画出来

var k = (2*a/0.75)/2,
w = a,
h = b;
ctx.moveTo(xp, yp-h);
ctx.bezierCurveTo(xp+k, yp-h, xp+k, yp+h, xp, yp+h);
ctx.bezierCurveTo(xp-k, yp+h, xp-k, yp-h, xp, yp-h);
//ctx.closePath();