I wrote a function in Javascript that draws an arc. It is based on the Bresenham circle algorithm and, while drawing the points, i check if they are between an initial and a final angle.
It works ok, but the angle "0" is on the "far left" side of the circle, while I'd like it to be on the top while still calculating the angle clockwise. How to do this? Thanks
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
function pset(x, y) {
ctx.fillRect(x, y, 1, 1);
}
function arc (x, y, rd, a1 = 0, a2 = 360) {
let xx = rd;
let yy = 0;
let radiusError = 1 - xx;
function inAngle(x1, y1) {
const deltaY = y1 - y;
const deltaX = x1 - x;
const angleInDegrees = (Math.atan2(deltaY, deltaX) * 180 / Math.PI) + 180;
return angleInDegrees >= a1 && angleInDegrees <= a2;
}
while (xx >= yy) {
if (inAngle( xx + x, yy + y)) pset( xx + x, yy + y);
if (inAngle( yy + x, xx + y)) pset( yy + x, xx + y);
if (inAngle(-xx + x, yy + y)) pset(-xx + x, yy + y);
if (inAngle(-yy + x, xx + y)) pset(-yy + x, xx + y);
if (inAngle(-xx + x, -yy + y)) pset(-xx + x, -yy + y);
if (inAngle(-yy + x, -xx + y)) pset(-yy + x, -xx + y);
if (inAngle( xx + x, -yy + y)) pset( xx + x, -yy + y);
if (inAngle( yy + x, -xx + y)) pset( yy + x, -xx + y);
yy++;
if (radiusError < 0) {
radiusError += 2 * yy + 1;
}
else {
xx--;
radiusError+= 2 * (yy - xx + 1);
}
}
}
arc(50, 50, 20, 0, 45);
arc(50, 70, 20, 0, 90);
arc(50, 90, 20, 0, 180);
<canvas width="128" height="128" id="canvas"/>
Just add the following two lines to the beginning of your arc function:
a1 += 90;
a2 += 90;
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
function pset(x, y) {
ctx.fillRect(x, y, 1, 1);
}
function arc (x, y, rd, a1 = 0, a2 = 360) {
a1 += 90; // add this line
a2 += 90; // add this line
let xx = rd;
let yy = 0;
let radiusError = 1 - xx;
function inAngle(x1, y1) {
const deltaY = y1 - y;
const deltaX = x1 - x;
const angleInDegrees = (Math.atan2(deltaY, deltaX) * 180 / Math.PI) + 180;
return angleInDegrees >= a1 && angleInDegrees <= a2;
}
while (xx >= yy) {
if (inAngle( xx + x, yy + y)) pset( xx + x, yy + y);
if (inAngle( yy + x, xx + y)) pset( yy + x, xx + y);
if (inAngle(-xx + x, yy + y)) pset(-xx + x, yy + y);
if (inAngle(-yy + x, xx + y)) pset(-yy + x, xx + y);
if (inAngle(-xx + x, -yy + y)) pset(-xx + x, -yy + y);
if (inAngle(-yy + x, -xx + y)) pset(-yy + x, -xx + y);
if (inAngle( xx + x, -yy + y)) pset( xx + x, -yy + y);
if (inAngle( yy + x, -xx + y)) pset( yy + x, -xx + y);
yy++;
if (radiusError < 0) {
radiusError += 2 * yy + 1;
}
else {
xx--;
radiusError+= 2 * (yy - xx + 1);
}
}
}
arc(50, 50, 20, 0, 45);
arc(50, 70, 20, 0, 90);
arc(50, 90, 20, 0, 180);
<canvas width="128" height="128" id="canvas"/>
Related
I want to draw a image which is Square to canvas and round it.
My code is
const x = 100
const y = 100
const iconRadius = 60
const iconWidth = iconRadius * 2
const iconHeight = iconRadius * 2
ctx.beginPath()
ctx.moveTo(x + iconRadius, y)
ctx.lineTo(x + iconWidth - iconRadius, y)
ctx.quadraticCurveTo(x + iconWidth, y, x + iconWidth, y + iconRadius)
ctx.lineTo(x + iconWidth, y + iconHeight - iconRadius)
ctx.quadraticCurveTo(
x + iconWidth,
y + iconHeight,
x + iconWidth - iconRadius,
y + iconHeight
)
ctx.lineTo(x + iconRadius, y + iconHeight)
ctx.quadraticCurveTo(x, y + iconHeight, x, y + iconHeight - iconRadius)
ctx.lineTo(x, y + iconRadius)
ctx.quadraticCurveTo(x, y, x + iconRadius, y)
ctx.closePath()
ctx.clip()
drawImageProp(ctx, userIconImage, x, y, iconWidth, iconHeight)
but the result is like:
I use this solution
Looks like it is not a Round image,
I donot know how to fix it.
In order to draw a circle you can use the arc method of the canvas context.
ctx.beginPath();
ctx.arc(x+iconRadius, y+iconRadius,iconRadius,0,2*Math.PI);
ctx.stroke();
However if what you want is drawing a circle using bezier curves, maybe for a future animation, here is how I would do it:
let ctx = canvas.getContext("2d");
canvas.width=320;
canvas.height=320;
const x = 100
const y = 100
const iconRadius = 60
const iconWidth = iconRadius * 2
const iconHeight = iconRadius * 2
ctx.beginPath();
ctx.arc(x+iconRadius, y+iconRadius,iconRadius,0,2*Math.PI);
ctx.stroke();
//drawElipseWithBezier(ctx, x, y, iconWidth, iconHeight)
ctx.clip()
ctx.drawImage(userIconImage, x, y, iconWidth, iconHeight)
function drawElipseWithBezier(ctx, x, y, w, h) {
var kappa=0.5522847498;
var ox = (w / 2) * kappa; // horizontal offset
var oy = (h / 2) * kappa; // vertical offset
var xf = x + w; // x final
var yf = y + h; // y final
var xm = x + w / 2; // x middle
var ym = y + h / 2; // y middle
ctx.beginPath();
ctx.moveTo( x, ym );
ctx.bezierCurveTo( x, ym - oy, xm - ox, y, xm, y );
ctx.bezierCurveTo( xm + ox, y, xf, ym - oy, xf, ym );
ctx.bezierCurveTo( xf, ym + oy, xm + ox, yf, xm, yf );
ctx.bezierCurveTo( xm - ox, yf, x, ym + oy, x, ym );
ctx.closePath();
ctx.stroke();
}
canvas{border:1px solid}
<canvas id="canvas">
<img src="data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAAZAAD/4QMBaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjMtYzAxMSA2Ni4xNDU2NjEsIDIwMTIvMDIvMDYtMTQ6NTY6MjcgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjM0ODBGMTdBQjMwQTExRTdBMTMzQ0JDMjUzRkE2MDhFIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjM0ODBGMTc5QjMwQTExRTdBMTMzQ0JDMjUzRkE2MDhFIiB4bXA6Q3JlYXRvclRvb2w9IjguMSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSI3RURCQTlGMDRBOThGQjcwM0QzQzk4MzYwQjAyNDM1QSIgc3RSZWY6ZG9jdW1lbnRJRD0iN0VEQkE5RjA0QTk4RkI3MDNEM0M5ODM2MEIwMjQzNUEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7QBIUGhvdG9zaG9wIDMuMAA4QklNBAQAAAAAAA8cAVoAAxslRxwCAAACAAIAOEJJTQQlAAAAAAAQ/OEfici3yXgvNGI0B1h36//uAA5BZG9i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" id="userIconImage"/>
</canvas>
To understand better please read this article: Drawing a circle with Bézier Curves
As you see here: http://jsfiddle.net/Da7SP/60/ I have 64 pie pieces that I want to have a radial gradient from the middle out to the edge. (Live each piece will have different colors) but I don't succeed to create that effect.
Here is the code:
var canvas = window._canvas = new fabric.Canvas('c');
var x=300
, y=300
, totalGates=64
, start=0
, radius=200
, val = 360 / totalGates;
for (var i = 0; i < totalGates; i++) {
createPath(x, y, radius, val*i, (val*i)+val);
}
function createPath (x, y, radius, startAngle, endAngle) {
var flag = (endAngle - startAngle) > 180;
startAngle = (startAngle % 360) * Math.PI / 180;
endAngle = (endAngle % 360) * Math.PI / 180;
var path = 'M '+x+' '+y+' l ' + radius * Math.cos(startAngle) + ' ' + radius * Math.sin(startAngle) +
' A ' + radius + ' ' + radius + ' 0 ' + (+flag) + ' 1 ' + (x + radius * Math.cos(endAngle))+ ' ' + (y + radius * Math.sin(endAngle)) + ' z';
var piePiece = new fabric.Path(path);
piePiece.set({
strokeWidth:0
});
piePiece.setGradient('fill', {
type:'radial',
x1: x,
y1: y,
//x2: x + radius * Math.cos(endAngle),
//y2: y + radius * Math.sin(endAngle),
r1: radius,
r2: 0,
colorStops: {
0: '#000',
1: '#fff',
}
});
canvas.add(piePiece);
}
I thought that it would be enough to set x1 to x and y1 to y to define the coordinates for the middle and then the radius, (before when I used PathGroup that did the trick). but now when I add the Path to a Group or directly to the Canvas the gradient looks completely different.
So, how do I use the setGradient with a radial gradient so it is displayed as if the complete pie was a circle, it would go from the center to the edge
Update:
I noticed that if I set x=0 and y=0 then the gradient get centered.
Update2:
If both x1 and y2 is set to 0 the gradient is drawn from the top left corner, this makes the gradient looks good in the 90 degree bottom - right corner: http://jsfiddle.net/Da7SP/61/
Update3:
I solved it! Here http://jsfiddle.net/Da7SP/64/ is the Fiddle for you who has the same problem and below you see the result and the code.
This made the trick:
x1: x > Math.round(piePiece.left) ? x - piePiece.left : 0,
y1: y > Math.round(piePiece.top) ? y - piePiece.top : 0,
x2: x > Math.round(piePiece.left) ? x - piePiece.left : 0,
y2: y > Math.round(piePiece.top) ? y - piePiece.top : 0,
Here is the expected result:
Here is the code
var canvas = window._canvas = new fabric.Canvas('c');
var x=300
, y=300
, totalGates=64
, start=0
, radius=200
, val = 360 / totalGates;
/* Loops through each gate and prints selected options */
for (var i = 0; i < totalGates; i++) {
createPath(x, y, radius, val*i, (val*i)+val, i);
}
function createPath (x, y, radius, startAngle, endAngle,i ) {
var flag = (endAngle - startAngle) > 180;
startAngle = (startAngle % 360) * Math.PI / 180;
endAngle = (endAngle % 360) * Math.PI / 180;
var path = 'M '+x+' '+y+' l ' + radius * Math.cos(startAngle) + ' ' + radius * Math.sin(startAngle) +
' A ' + radius + ' ' + radius + ' 0 ' + (+flag) + ' 1 ' + (x + radius * Math.cos(endAngle))+ ' ' + (y + radius * Math.sin(endAngle)) + ' z';
var piePiece = new fabric.Path(path);
piePiece.set({
strokeWidth:0
});
piePiece.setGradient('fill', {
type:'radial',
x1: x > Math.round(piePiece.left) ? x - piePiece.left : 0,
y1: y > Math.round(piePiece.top) ? y - piePiece.top : 0,
x2: x > Math.round(piePiece.left) ? x - piePiece.left : 0,
y2: y > Math.round(piePiece.top) ? y - piePiece.top : 0,
r1: radius,
r2: 0,
colorStops: {
0: '#000',
1: '#f0f',
}
});
canvas.add(piePiece);
}
Here is the code that was missing:
piePiece.setGradient('fill', {
type:'radial',
x1: x > Math.round(piePiece.left) ? x - piePiece.left : 0,
y1: y > Math.round(piePiece.top) ? y - piePiece.top : 0,
x2: x > Math.round(piePiece.left) ? x - piePiece.left : 0,
y2: y > Math.round(piePiece.top) ? y - piePiece.top : 0,
r1: radius,
r2: 0,
colorStops: {
0: '#000',
1: '#f0f',
}
});
I'm working with fabricjs and I need to create few Rects that attached each other..
The first and the last rect need to have a rounded corner only on the side facing outwards..
I know that I can create custom class on fabricjs but I really new in all the canvas stuff..
Is someone can give me a guidance?
Yes creating a custom class is the best and less hackish thing you can do.
You have to extend rect and override the render function:
fabric.RectAsymmetric = fabric.util.createClass(fabric.Rect, /** #lends fabric.Rect.prototype */ {
/**
* Side of rounding corners
* #type String
* #default
*/
side: 'left',
_render: function(ctx, noTransform) {
if (this.width === 1 && this.height === 1) {
ctx.fillRect(0, 0, 1, 1);
return;
}
var rx = this.rx ? Math.min(this.rx, this.width / 2) : 0,
ry = this.ry ? Math.min(this.ry, this.height / 2) : 0,
w = this.width,
h = this.height,
x = noTransform ? this.left : -this.width / 2,
y = noTransform ? this.top : -this.height / 2,
isRoundedLeft = (rx !== 0 || ry !== 0) && side === 'left',
isRoundedRight = (rx !== 0 || ry !== 0) && side === 'right',
k = 1 - 0.5522847498
ctx.beginPath();
ctx.moveTo(x + (isRoundedLeft ? rx : 0), y);
ctx.lineTo(x + w - (isRoundedRight ? rx : 0), y);
isRoundedRight && ctx.bezierCurveTo(x + w - k * rx, y, x + w, y + k * ry, x + w, y + ry);
ctx.lineTo(x + w, y + h - (isRoundedRight ? ry : 0));
isRoundedRight && ctx.bezierCurveTo(x + w, y + h - k * ry, x + w - k * rx, y + h, x + w - rx, y + h);
ctx.lineTo(x + (isRoundedLeft ? rx : 0), y + h);
isRoundedLeft && ctx.bezierCurveTo(x + k * rx, y + h, x, y + h - k * ry, x, y + h - ry);
ctx.lineTo(x, y + (isRoundedLeft ? ry : 0));
isRoundedLeft && ctx.bezierCurveTo(x, y + k * ry, x + k * rx, y, x + rx, y);
ctx.closePath();
this._renderFill(ctx);
this._renderStroke(ctx);
},
}
Please consider a draft of the class, but should get you the idea.
Then just do var rect = fabric.rectAsymmetric({width:200, height:100, side:'left'}); and try. Change the name of the class to something less ugly.
I'm trying to draw regular polygons(square and equilateral triangle) inscribed in a circle of a given centre (x,y) and a radius (r). I'm using raphael.js.
Here's my function to draw a inscribed square:
function draw_square(x,y,radius){
var side= radius*(Math.sqrt(2));
var x = x - (side/2);
var y = y - (side/2);
var square= paper.rect(x, y, side, side);
}
Can anyone shed some light on how I could draw an equilateral triangle(inscribed in a given circle)?
First time I've used raphael, so you'll have to extract what you need from the following:
<html>
<body>
<div id="paper"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.4/raphael-min.js"></script>
<script>
var paper = new Raphael(document.getElementById('paper'), 256, 256);
var x = 128, y = 128, r = 64, n = 9;
paper.circle(x, y, r);
var xx, yy, i, a, pathString = "";
for (i = 0; i <= n; ++i) {
a = ((4 * Math.PI * i) + (Math.PI * n) + (2 * Math.PI)) / (2 * n);
xx = x + r * Math.cos(a);
yy = y + r * Math.sin(a);
pathString += (i == 0 ? "M " : " L ") + xx + " " + yy;
}
pathString += " z";
paper.path(pathString);
</script>
</body>
</html>
EDIT: Refactored to use var a, and to always have a horizontal base.
function draw_triangle(x, y, radius){
var x_offset =radius*(Math.cos(Math.PI/6));
var y_offset =radius*(Math.sin(Math.PI/6));
var x1 = x;
var y1 = y - radius;
var x2 = x + x_offset;
var y2 = y + y_offset;
var x3 = x - x_offset;
var y3 = y + y_offset;
var triangle = "M"+x1+","+y1+"L"+x2+","+y2+"L"+x3+","+y3+"Z";
var triangle= paper.path(triangle);
}
With a little help of trigo and raphael paper.path().
I'm hacking at a fiddle and cannot control the path width.
see the 2nd last line, really baffling:
var paper = Raphael(20, 20, 320, 320);
function arc(center, radius, startAngle, endAngle) {
angle = startAngle;
coords = toCoords(center, radius, angle);
path = "M " + coords[0] + " " + coords[1];
while(angle<=endAngle) {
coords = toCoords(center, radius, angle);
path += " L " + coords[0] + " " + coords[1];
angle += 1;
}
return path;
}
function toCoords(center, radius, angle) {
var radians = (angle/180) * Math.PI;
var x = center[0] + Math.cos(radians) * radius;
var y = center[1] + Math.sin(radians) * radius;
return [x, y];
}
var ps = paper.path(arc([100, 100], 80, -90, 90));
ps.attr({stroke:'#C00',width:100});
ps.glow({color: '#f00',width: 20});
here's the fiddle:
http://jsfiddle.net/U5Kpx/5/
can anyone see what I'm doing wrong here?
Thanks very much
You should use stroke-width
eg:
ps.attr({stroke:'#C00',"stroke-width":5});
ps.glow({color: '#f00',width: 40});
Check this fiddle