曲线点处椭圆形较粗的边框笔划问题

Question

我在这里使用 fabricjs 我有一个选项 CUSTOM DECAL 在画布上绘制形状。当我在 OVAL 形状的曲线点上描边或增加 OVAL 形状的边框宽度时，我遇到了椭圆形的问题，它显示了边框width double 比较 OVAL 的上侧和下侧。

我用来描边椭圆形边框的代码示例

//*****************scale oval canvas border width*******************

var ovalstrokewidth=0;
$("#ovalstrokewidth").change(function() {
var otrokew=(this.value);
$(".width_val_oval").html(otrokew);
ovalstrokewidth= parseInt(otrokew);
ovalcval=(this.value);
var w;
var h;
var ctx = canvas.getContext('2d');
canvas.clipTo = function(ctx) {
w=canvas.width / 4;
h=canvas.height / 2.4;
ctx.save();
ctx.scale(2, 1.2);
ctx.arc(w, h,ovalcrad , 0, 2 * Math.PI, true);

$("#decal_color").css('display', 'block');

//ctx.fillStyle = "#555";
ctx.fillStyle =decal_border_colour_oval;
ctx.strokeStyle = ctx.fillStyle;
//ctx.lineWidth = 1.5;
ctx.lineWidth = ovalstrokewidth;
ctx.stroke();
ctx.restore();

};
canvas.renderAll();
});

//-----------------End scale oval canvas border width------------

Site Link

1. 点击贴花形状
2. 选择 OVAL 选项
3. 增加边框宽度

Answer 1

线条的变形是由于 ctx.scale(2,1.2) 也会缩放线宽。

相反，您可以使用其数学公式绘制椭圆（无需缩放）。

这样你的线条就不会变形。

演示：http://jsfiddle.net/m1erickson/2s7pH/

drawEllipse(150,150,2,1.2,50);


function drawEllipse(cx,cy,ratioWidth,ratioHeight,radius){
    var PI2=Math.PI*2;
    var increment=PI2/100;
    var ratio=ratioHeight/ratioWidth;

    ctx.beginPath();
    var x = cx + radius * Math.cos(0);
    var y = cy - ratio * radius * Math.sin(0);
    ctx.lineTo(x,y);

    for(var radians=increment; radians<PI2; radians+=increment){ 
        var x = cx + radius * Math.cos(radians);
        var y = cy - ratio * radius * Math.sin(radians);
        ctx.lineTo(x,y);
     }

    ctx.closePath();
    ctx.stroke();
}