I have the fallowing code to draw ellipses:
enum OriginType { bottomLeft, bottomRight, topLeft, topRight, center }
class Background extends CustomPainter {
final double screenWidth;
final double screenHeight;
Background({required this.screenWidth, required this.screenHeight});
@override
void paint(Canvas canvas, Size size) {
final paint = Paint()..style = PaintingStyle.fill;
const double degToRad = 3.141592653589793238 / 180;
canvas.drawRect(Offset.zero & size, Paint()..color = const Color(0xFFFFFFFF));
void drawEllipse(double centerXPercent, double centerYPercent, double widthPercent, double heightPercent,
Color color, double blurSigma, double rotateDegrees,
{double opacity = 0.7, OriginType origin = OriginType.bottomRight}) {
paint.color = color.withOpacity(opacity);
double sigma = convertRadiusToSigma(blurSigma);
paint.maskFilter = MaskFilter.blur(BlurStyle.normal, sigma);
// Convert centerX, centerY, width, and height percentages to actual pixel values
double centerX = size.width * centerXPercent / 100;
double centerY = size.height * centerYPercent / 100;
double width = size.width * widthPercent / 100;
double height = size.height * heightPercent / 100;
canvas.save();
// Calculate the translation offset based on the specified origin type
Offset translateOffset;
switch (origin) {
case OriginType.bottomRight:
translateOffset = Offset(centerX - width, centerY - height);
break;
case OriginType.bottomLeft:
translateOffset = Offset(centerX, centerY - height);
break;
case OriginType.topRight:
translateOffset = Offset(centerX - width, centerY);
break;
case OriginType.topLeft:
translateOffset = Offset(centerX, centerY);
break;
case OriginType.center:
translateOffset = Offset(centerX - width / 2, centerY - height / 2);
break;
}
canvas.translate(translateOffset.dx, translateOffset.dy);
// Rotate around the center of the ellipse if the origin is center; otherwise rotate around the bottom right if specified
canvas.translate(width / 2, height / 2);
canvas.rotate(rotateDegrees * degToRad);
canvas.translate(-width / 2, -height / 2);
// Draw the ellipse
canvas.drawOval(Rect.fromLTWH(0, 0, width, height), paint);
canvas.restore();
}
drawEllipse(50, 50, 60, 60, const Color(0xFFF00000), 0, 135, origin: OriginType.bottomRight);
}
depends on the shape of the ellipse sometimes like is not going to respect the origin points which should be the corners of the rectangle that should surround the ellipse.
Example:
drawEllipse(50, 50, 60, 60, const Color(0xFFF00000), 0, 135, origin: OriginType.bottomRight);
Is going to generate this image:
Instead the ellipse because it is centered on the middle of the screen with the origin point been the bottom right corner should be a bit more on the left.
Could anyone explain to me where the drawing is wrong?