Drawing an arc in KineticJS
I know that you can draw a wedge using Kinetic.Wedge:
var compassArc = 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 "slice of pizza" with a black outline around everything. I just want the pizza "crust", without straight lines going back to the center of the circle. How can i do this?
Setting the fill to null
remove the red color but leave the outline.
source to share
How do I create a custom shape using an arc?
http://www.html5canvastutorials.com/tutorials/html5-canvas-arcs/
Please keep in mind not to close the path, not fill in the strokes. if so, you will get what you want. This is a KineticJS object, so you can drag and drop if you want.
Here's a working example.
http://jsfiddle.net/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
});
source to share
allenhwkim's answer is a bit outdated and has some problems. For example, a kinetic dash array will not work. So here's the 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
});
source to share
There is a Kinetic.Arc class that you can use. Make outerRadius equal to innerRadius and you get what you want.
this.arc = new Kinetic.Arc({
innerRadius: 90,
outerRadius: 90,
stroke: 'red',
strokeWidth: 2,
angle: 60,
rotationDeg: 210
});
source to share