javascript - 如何在fabric js中绘制扇形(不是圆弧)？

Question

我正在尝试用fabricjs绘制semecircle(扇形):

$('#button').click(function(){
  fov+=10;
  drawSector(fov);

});

$('#button2').click(function(){
    fov-=10;
  drawSector(fov);
});


var w=500,h=500;
var R = 100;
var fov = 75.0;
var lastFOV;

var ele = {
    center: {x: 0.5, y:0.5},
    focal: {x: 0.5, y: 0.5},
    radius: 0.6,
    transform: {
        rotate: 0,
        translate: {
            x: 0,
            y: 0,
        },
        scale: {
            x: 1,
            y: 1,
        }
    },
    stops: [
        {offset: '0', color: "purple",alpha:'0.75'},
        {offset: '0.9', color: "transparent",opacity:'0'}
    ]
};

var tr_str = "rotate("+ele.transform.rotate+",0.5,0.5) translate("+ele.transform.translate.x*w+","+ele.transform.translate.y*h+") scale("+ele.transform.scale.x+","+ele.transform.scale.y+")";
var tr_matrix = fabric.parseTransformAttribute(tr_str);

var rg = {
    type: 'radial',
    x1: ele.center.x,
    y1: ele.center.y,
    r1: 0,
    x2: ele.focal.x,
    y2: ele.focal.y,
    r2: R,
    //transformMatrix: [1,0,0,2,0,0],
    //gradientTransform: [1,0,0,2,0,0],
    gradientTransform: tr_matrix,
    colorStops: (function(){
        var color_stops = {};
        for(var i=0;i<ele.stops.length;i++){
            color_stops[ele.stops[i].offset] = ele.stops[i].color;
        }
        return color_stops;
    })()
};

var HideControls = {
                'tl':false,
                'tr':false,
                'bl':false,
                'br':false,
                'ml':false,
                'mt':false,
                'mr':false,
                'mb':false,
                'mtr':true
            };

    var canvas = new fabric.Canvas('canvas1');
    canvas.setWidth(w);
    canvas.setHeight(h);

var x,y,my,startPoints;
var sector;
var rotationAngle = 0;
drawSector(fov);

function drawSector(fov){
        $('#fov').html("FOV = "+fov);
    x = Math.cos(fov*Math.PI/180.0)*R;
    y = Math.sin(fov*Math.PI/180.0)*R;
    my = -Math.sin(fov/2.*Math.PI/180.0)*R/2.;
    startPoints = [
        {x: 0, y: 0},
        {x: R, y: 0},
        {x: x, y: y}
      ];

        if(sector) {
        rotationAngle = sector.angle;
      canvas.remove(sector);
    }

    sector = new fabric.Polygon(startPoints,{
      left: w/2,
      top: h/2,
      originX:'left',
      originY:'top',
      centeredRotation:false,
      hasBorders:false,
      lockMovementX:true,
      lockMovementY:true,
      rotatingPointOffset:my,
      width: R,
      height: R
    });
    sector.setControlsVisibility(HideControls);
    sector.setGradient('fill', rg);
    rotationAngle = rotationAngle==0?-fov/2:rotationAngle-(fov-lastFOV)/2;
    sector.setAngle(rotationAngle);
    canvas.add(sector);
    lastFOV = fov;
}

https://jsfiddle.net/2v0es4xh/35/

但是当FOV大于90时，rotationX/Y会发生变化。

传单中有内容http://jieter.github.io/Leaflet-semicircle/examples/semicircle.html

如果我能用布料画出这样的半圆那就太好了。有人尝试过这样做吗？

提前谢谢您。

Answer 1

尝试这样的事情:http://jsfiddle.net/qoadhrop/

在主圆之上设置两个半圆，即可获得这种“半径”效果

HTML:

<canvas id="c" width="300" height="300"></canvas>

JS:

var canvas  = new fabric.Canvas('c');

var c1 = new fabric.Circle({
    radius: 50,
    left: 100,
    top: 100,
    stroke: '#000',
    strokeWidth: 1,
    fill: 'lightblue',
    opacity: 0.8
});

var c2 = new fabric.Circle({
    radius: 50,
    left: 100,
    top: 100,
    startAngle: 0,
    endAngle: Math.PI,
    stroke: '#000',
    strokeWidth: 1,
    fill: 'red'
});
c2.setAngle(45);

var c3 = new fabric.Circle({
    radius: 50,
    left: 100,
    top: 100,
    flipX: true,
    startAngle: 0,
    endAngle: Math.PI,
    stroke: '#000',
    strokeWidth: 1,
    fill: 'red'
});
c3.setAngle(-45);

canvas.add(c1);
canvas.add(c2);
canvas.add(c3);