I have this triangle
and a i would like that its shape would be like this
Can someone help me ?
this is my actual code
class TriangleClipperr extends CustomClipper<Path> {
#override
Path getClip(Size size) {
final path = Path();
path.lineTo(size.width, 0.0);
path.lineTo(size.width / 2, size.height);
path.close();
return path;
}
#override
bool shouldReclip(TriangleClipperr oldClipper) => false;
}
First, you need to move the current point to middle, then draw rest path.
class TriangleClipperr extends CustomClipper<Path> {
#override
Path getClip(Size size) {
final path = Path();
path.moveTo(size.width / 2, 0);
path.lineTo(size.width, size.height);
path.lineTo(0, size.height);
path.close();
return path;
}
#override
bool shouldReclip(TriangleClipperr oldClipper) => false;
}
Shape depends on parent size.
Related
I'm trying to clip a widget using ClipPath CustomClipper -> so far I was able to recreate a wave shape
ClipPath(
clipper: WaveClipper(),
child: CustomWidget(),
);
class WaveClipper extends CustomClipper<Path> {
#override
Path getClip(Size size) {
var path = new Path();
path.lineTo(
0, size.height);
var firstStart = Offset(size.width / 5, size.height);
var firstEnd = Offset(size.width / 2.25, size.height - 50.0);
path.quadraticBezierTo(
firstStart.dx, firstStart.dy, firstEnd.dx, firstEnd.dy);
var secondStart =
Offset(size.width - (size.width / 3.24), size.height - 105);
var secondEnd = Offset(size.width, size.height - 10);
path.quadraticBezierTo(
secondStart.dx, secondStart.dy, secondEnd.dx, secondEnd.dy);
path.lineTo(
size.width, 0);
path.close();
return path;
}
#override
bool shouldReclip(CustomClipper<Path> oldClipper) {
return false; //if new instance have different instance than old instance
//then you must return true;
}
but what I would need to achieve is this pink shape shown on this image :
the top part does not need to be clipped as it's the edge of the screen, only the bottom
Maybe it's not exactly how you want it, but with small adjustments it stays the same, you have to pay attention to where you left off to start correctly
class CustomClipperImage extends CustomClipper<Path> {
#override
bool shouldReclip(CustomClipper oldClipper) {
return false;
}
#override
getClip(Size size) {
var path = Path();
path.lineTo(0, size.height-70);
path.quadraticBezierTo(0, size.height+40,size.width-40, size.height-
130);
path.quadraticBezierTo(size.width+60, size.height-170,size.width, 0);
path.close();
return path;
}
}
Did you see flutter_custom_clippers package? I think its source code will be helpfull.
Path I am trying to achieve
I had been trying to achieve this path, but I am having trouble when clipping, not only it clips the opposite part of the container but also gets my path to be dirty.
I am also looking on achieving the same effect, but with an opposite direction.
This is the code i have done so far(It is an up arc clip path):
class UpArcClip extends CustomClipper<Path> {
#override
Path getClip(Size size) {
final path = Path();
path.lineTo(0, size.height);
path.lineTo(0.0, size.height - 100);
path.quadraticBezierTo(
size.width / 2, size.height, size.width, size.height - 100);
path.lineTo(size.width, 0.0);
path.close();
return path;
}
#override
bool shouldReclip(CustomClipper old) => false;
}
Already achieved it by myself:
class LeftInclinedArcClipper extends CustomClipper<Path> {
#override
Path getClip(Size size) {
final path = Path();
path.moveTo(0, size.height);
path.lineTo(0, size.height * 0.7);
path.quadraticBezierTo(
size.width / 3, size.height * 0.45, size.width, size.height * 0.53);
path.lineTo(size.width, size.height);
path.close();
return path;
}
#override
bool shouldReclip(CustomClipper old) => false;
}
I am currently unable to draw a bezier curve.
The output I have right now is :
The output that I need is :
What should I add here as bezier values to get the curve?
The code snippet of the custom clipper is:
class OnBoardingClipper extends CustomClipper<Path> {
#override
Path getClip(Size size) {
var path = Path();
path.moveTo(0.0, size.height * 0.18);
path.lineTo(0.0, size.height);
path.lineTo(size.width, size.height);
path.lineTo(size.width, 0.0);
return path;
}
#override
bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}
P.S. Thanks for reading and apologies in case of bad formatting. :-)
You can add a quadraticBezier with values of e.g., (3 / 4 * size.width, size.height * 0.18) , (size.width, size.height * 0.05).
Code:
#override
Path getClip(Size size) {
var path = Path();
path.moveTo(0.0, size.height * 0.18);
path.quadraticBezierTo(
3 / 4 * size.width, size.height * 0.18, size.width, size.height * 0.05);
path.lineTo(size.width, size.height);
path.lineTo(0.0, size.height);
return path;
}
Result:
I am trying to make multiple pointed edge at the left side.
class CustomClipPath extends CustomClipper<Path> {
#override
Path getClip(Size size) {
Path path = Path();
path.lineTo(size.width, 0.0);
var curYPos = 0.0;
var curXPos = size.width;
var increment = size.height / 30;
while (curYPos < size.height) {
curYPos += increment;
curXPos = curXPos == size.width ? size.width - 8 : size.width;
path.lineTo(curXPos, curYPos);
}
path.lineTo(0, size.height);
return path;
}
#override
bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}
However, instead of multiple pointed edge on the left side, i got multiple pointed edge on the right side like image below:
Text
Here's a clipper that is using left side of the child.
class CustomClipPath extends CustomClipper<Path> {
#override
Path getClip(Size size) {
Path path = Path();
var curYPos = 0.0;
var curXPos = 0.0;
var increment = size.height / 30;
while (curYPos < size.height) {
curYPos += increment;
curXPos = curXPos == 0.0 ? 8.0 : 0.0;
path.lineTo(curXPos, curYPos);
}
path.lineTo(size.width, size.height);
path.lineTo(size.width, 0.0);
path.close();
return path;
}
#override
bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}
Try this
class CustomClipPath extends CustomClipper<Path> {
#override
Path getClip(Size size) {
Path path = Path();
path.lineTo(size.width, 0.0);
var curYPos = 0.0;
var curXPos = 0.0;
path.lineTo(0.0, 0.0);
var increment = size.height / 30;
while (curYPos < size.height) {
curYPos += increment;
curXPos = curXPos == 0 ? 8 : 0;
path.lineTo(curXPos, curYPos);
}
path.lineTo(size.width, size.height);
path.lineTo(size.width, 0.0);
return path;
}
#override
bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}
I'm using path drawing. I must scale that path. I'm using bounds for scale but It doesn't work same for clipper and painter. I need same output.
Here is codes.
class PaintSvg extends CustomPainter{
PaintSvg(this.pathStr);
String pathStr;
#override
void paint(Canvas canvas, Size size) {
Paint paint = Paint();
paint.style = PaintingStyle.fill;
paint.color = Colors.red;
Path path = Path();
path = parseSvgPathData(pathStr);
Rect pathBounds = path.getBounds();
Matrix4 matrix4 = Matrix4.identity();
matrix4.scale(size.width/pathBounds.width, size.height/pathBounds.height);
path = path.shift(Offset(0,0));
path = path.transform(matrix4.storage);
canvas.drawShadow(path, Colors.green, 2, true);
//canvas.rotate(-math.pi/1.18);
canvas.drawPath(path, paint);
}
#override
bool shouldRepaint(CustomPainter oldDelegate) {
return true;
}
}
class ClipSvg extends CustomClipper<Path>{
String pathStr;
ClipSvg(this.pathStr);
#override
Path getClip(Size size) {
Path path = Path();
path = parseSvgPathData(pathStr);
Rect pathBounds = path.getBounds();
Matrix4 matrix4 = Matrix4.identity();
matrix4.scale(size.width/pathBounds.width, size.height/pathBounds.height);
path = path.transform(matrix4.storage);
path = path.shift(Offset(0,0));
return path;
}
#override
bool shouldReclip(ClipSvg oldClipper) => true;
}
Here is output.
ScreenShot of output
Brown one is clipper red one that behind the brown is painter. Two of them uses same svg data string.