javascript - Drawing an arc in KineticJS - Stack Overflow

admin管理员组

文章数量:1435090

I know you can draw a wedge using a Kinetic.Wedge:

  var passArc = new Kinetic.Wedge({
    x: stage.getWidth() / 2,
    y: stage.getHeight() / 2,
    radius: 70,
    angleDeg: 60,
    fill: 'red',
    stroke: 'black',
    strokeWidth: 4,
    rotationDeg: -90
  });

This draws a "pizza slice" with a black outline around the whole thing. I just want the "crust" of the pizza, with no straight lines ing back to the center of the circle. How can I do this?

Setting the fill to null removes the red but leaves the outline.

I know you can draw a wedge using a Kinetic.Wedge:

  var passArc = new Kinetic.Wedge({
    x: stage.getWidth() / 2,
    y: stage.getHeight() / 2,
    radius: 70,
    angleDeg: 60,
    fill: 'red',
    stroke: 'black',
    strokeWidth: 4,
    rotationDeg: -90
  });

This draws a "pizza slice" with a black outline around the whole thing. I just want the "crust" of the pizza, with no straight lines ing back to the center of the circle. How can I do this?

Setting the fill to null removes the red but leaves the outline.

• javascript
• html
• kineticjs

Share Improve this question Follow asked Feb 5, 2013 at 22:12 you786you786 3,55066 gold badges5454 silver badges7575 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

How about creating a custom shape fot this using arc?

http://www.html5canvastutorials./tutorials/html5-canvas-arcs/

Please keep in mind that not to close path and not to fill strokes. if so, you will get what you want. It is a KineticJS object, so that you can drag around if you want.

Here is the working example.

http://jsfiddle/bighostkim/WzxxH/

var arc = new Kinetic.Shape({
    drawFunc: function(canvas) {
        var context = canvas.getContext();
        var x = stage.getWidth() / 2;
        var y = stage.getHeight()/2;
        var radius = 70;
        var startAngle = 1 * Math.PI;
        var endAngle = 0 * Math.PI;
        var context = canvas.getContext('2d');
        context.beginPath();
        context.arc(x, y, radius, startAngle, endAngle, false);
        //context.closePath();
        canvas.stroke(this);
    },
    fill: '#00D2FF',
    stroke: 'black',
    strokeWidth: 4,
    draggable:true
});

allenhwkim answer is a bit outdated and has some problems. For example the kinetic dash array would not work. So here is a revised version:

var arc = new Kinetic.Shape({
        x: 100,
        y: 100,
        stroke: '#000',
        strokeWidth: 4,
        dash: [8, 4],
        drawFunc: function(context) {
            var radius = 50;
            var startAngle = 1 * Math.PI;
            var endAngle = 0 * Math.PI;
            context.beginPath();
            context.arc(0, 0, radius, startAngle, endAngle, false);
            context.fillStrokeShape(this);
        },
        draggable:true      
    });

There is a Kinetic.Arc class which you can use. Make outerRadius equal to innerRadius and you will get what you want.

this.arc = new Kinetic.Arc({
  innerRadius: 90,
  outerRadius: 90,
  stroke: 'red',
  strokeWidth: 2,
  angle: 60,
  rotationDeg: 210
});

本文标签： javascriptDrawing an arc in KineticJSStack Overflow