在曲线点处椭圆形较大边界行程的问题

问题描述

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

I am using fabricjs here i have an option CUSTOM DECAL to draw shape on on canvas.I am getting issue with the oval shape when i stroke or increase the border width of OVAL shape at the curve point of OVAL shape it's showing border width double compare than up and bottom side of OVAL.

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

Code sample i have used to stroke oval border

//*****************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------------

1. 点击贴图形状


2. 选择OVAL选项


3. 增加边框宽度

推荐答案

线条的变形是由ctx.scale

The deformation of your line is due to ctx.scale(2,1.2) which also scales the linewidth.

而是可以使用其数学公式绘制一个椭圆（不需要缩放）。

Instead, you can draw an ellipse using its math formula (no scaling required).

这样你的线条不会变形。

This way your lines are not deformed.

A演示：

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();
}

这篇关于在曲线点处椭圆形较大边界行程的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！