How to draw an arc with fabric.js? - javascript

I want to draw an arc and I'm using a circle with a start and an end angle for this. But something is wrong. Here is my code for this:
var circle = new fabric.Circle({
radius: 30,
left: 20,
top: 20,
fill: "rgba(0, 0, 0, 0)",
stroke: 'black',
startAngle: 0,
endAngle: Math.PI
});
canvas.add(circle);
You can see (on jsfiddle) it always draws a complete circle — http://jsfiddle.net/tfn1772f/
What is wrong?

What about drawing an arc via fabric.Path? Try something like this:
var arc1 = new fabric.Path("M 255 135 A 50 50 0 0 1 200 110", {
stroke: 'black',
fill: "white"
});
Also see: https://groups.google.com/forum/#!msg/fabricjs/fp19BLlqauw/a-smtqe5ms8J
You could write a function that accepts params and generates the path. Looks like fabric also has a static function in fabric.util.drawArc which you could use:
http://fabricjs.com/docs/fabric.util.html#drawArc

Related

Snap.svg: casting a shadow from a masked shape

I'm trying to make a material-ish design wherein there's two layers with a shadow in between. I figured the simplest way to do this would be to draw the bottom layer directly (simply a covering rectangle for the background) and then draw another rectangle, using a mask, to draw the content of the image. This rectangle should be casting a shadow, but I believe that due to the shadow being outside the mask, it is not being rendered. How can I make it render?
Codepen demonstration: https://codepen.io/Krakob/pen/OjqNKP (on site snippet doesn't seem to be loading snap properly)
Used code:
function logo(conf) {
if (typeof conf === 'undefined') {
var ch = 0.5; // Hue
var cs = 0.4; // Saturation
var cl = 0.5; // Luminosity
conf = {
text: ':^(',
c_fg: Snap.hsl(ch, cs, cl),
c_bg: Snap.hsl(ch, cs * 0.9, cl * 0.4),
border: 10,
tri_height: 20
}
};
var canvas = Snap(100, 100);
var foregr = Snap(100, 100);
// Cover up the back of the canvas
canvas.rect(0, 0, 100, 100).attr('fill', conf.c_bg);
// Fill up the foreground with white
foregr.rect(0, 0, 100, 100).attr('fill', 'white');
// Subtract a circle
foregr.circle(50, 50, 50 - conf.border).attr('fill', 'black');
// Left triangle
foregr.polygon([
0, 50 - conf.tri_height / 2,
0, 50 + conf.tri_height / 2,
conf.tri_height, 50
]).attr({
fill: 'white',
});
// Top triangle
foregr.polygon([
50 - conf.tri_height / 2, 0,
50 + conf.tri_height / 2, 0,
50, conf.tri_height
]).attr({
fill: 'white',
})
foregr.text(50, 50, conf.text).attr({
fill: 'white',
'text-anchor': 'middle',
'alignment-baseline': 'middle',
'font-size': '2em',
'font-family': 'Quicksand',
});
var shadow = canvas.filter(Snap.filter.shadow(2.5, 2.5, 0, 'red', 1));
canvas.rect(0, 0, 100, 100).attr({
fill: conf.c_fg,
mask: foregr,
filter: shadow
})
return canvas;
}
logo();
<html>
<head>
<title>:^(</title>
</head>
<body>
<script src="https://raw.githubusercontent.com/adobe-webplatform/Snap.svg/master/dist/snap.svg.js"></script>
<script src="my.js"></script>
</body>
</html>

Fabric JS Replace Objects with Same Item(ID)

I need to replace the Circle shape with Rectangle shape with same Item Number used by canvas
First I created Circle :
canvas.add(new fabric.Circle({
left: 200,
top: 200,
radius: 30,
fill: 'gray',
stroke: 'black',
strokeWidth: 3}));
Then replace with Rectangle:
var Rectangle = new fabric.Rect({
width: 100,
height: 150,
fill: 'blue',
stroke: 'red' });
Assume that Circle is canvas.item(0) i need to replace Rectangle with same Id canvas.item(0) :
Something like This :
canvas.item(0).replace(Rectangle);
You can remove the rectangle with canvas.remove(Circle)
and add the new item with canvas.insertAt(Rectangle, 0, false).
see: insertAt fabricJS Docs

Place an Image inside a Polygon with Snap.svg

I have a polygon (in fact it's a hexagon) painted with Adobe's Snap.svg:
var s = Snap('#test');
var hexagon = s.paper.polygon([
0, 50,
50, 0,
100, 0,
150, 50,
100, 100,
50, 100,
0, 50
]);
hexagon.attr({
stroke: '#fff',
strokeWidth: 1
});
Instead of filling the polygon with some paint, I want to place an image inside of it. The only thing I have found in the docs is the image function, but I don't know how to insert it. Anyone any idea?
======
Final Solution:
var image = s.paper.image('http://placekitten.com/g/200/300', 0, 0, 150, 150);
image = image.pattern(0, 0, 150, 150);
...
hexagon.attr({
stroke: '#fff',
strokeWidth: 1,
fill: image
});
You can't directly fill an element with an image you have to go via a pattern.
What this means is that you need to create a pattern that contains an image and then fill the shape with the pattern.

kineticjs group cache and layer draw is hiding kinetic arc shapes

I am creating a circle as a group of kinetic arcs. When I cache the group and subsequently call the draw function on the layer, three quarters of the circle are hidden. I think layer.draw may require an offset but really I'm only guessing. When I remove the fill, stroke or opacity from the arc or the object literal from the cache call then the full circle is displayed. http://jsfiddle.net/leydar/gm2FT/5/ Any insights gratefully received.
function createArc(n){
var arc = new Kinetic.Arc({
innerRadius: 30,
outerRadius: 50,
/* if I remove the fill, stroke or opacity
the full wheel is correctly displayed */
fill: 'blue',
stroke: 'black',
opacity: 0.3,
strokeWidth: 1,
angle: 36,
rotation: 36*n
});
return arc;
}
function init() {
var arc;
var stage = new Kinetic.Stage({
container: 'container',
width: 104,
height: 104
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Group();
for(var i=0;i<10;i++) {
arc = createArc(i);
circle.add(arc);
};
layer.add(circle);
stage.add(layer);
/* if I do not cache or do not call layer.draw()
then again the wheel is correctly displayed */
circle.cache({
x: -52,
y: -52,
width: 104,
height: 104,
drawBorder: true
});
layer.draw();
}
init();
Stephen
This is a bug of KineticJS.
You may use this workaround:
Kinetic.Arc.prototype._useBufferCanvas = function() {
return false;
};
http://jsfiddle.net/gm2FT/6/

Kinetic JS draw a quarter arc

I am trying to draw a quarter circle using Kinetic JS. Unfortunately when I run the code below the shape drawn is actually a pie rather than an arc with two lines joining up to a centre point.
var arc = new Kinetic.Arc({
outerRadius: 80,
stroke: 'black',
strokeWidth: 5,
angle: 60,
rotationDeg: -120,
x:100,
y:100,
});
Does anyone know how I can draw just an arc without the addition of these two unwanted lines?
Fiddle: http://jsfiddle.net/GarryPas/55vYU/5/
Thanks in advance.
Just set the innerRadius to be the same as the outerRadius:
var arc = new Kinetic.Arc({
innerRadius: 80,
outerRadius: 80,
stroke: 'black',
strokeWidth: 5,
angle: 90,
rotationDeg: 0,
x:100,
y:100,
});
fiddle: http://jsfiddle.net/55vYU/6/

Categories

Resources