如何设置剪辑路径的起点
How to set the start point of clippath
我要使用 ClipPath()
制作一个形状。但是当我绘制它时,它似乎是从其父级的 (0.0) 坐标开始的。但我希望它从另一个点开始(size.width * 0.25, size.height
)。我想实现这个:
代码如下:
import 'dart:core';
import 'package:flutter/material.dart';
class TheHill extends CustomClipper<Path> {
@override
Path getClip(Size size) {
var path = Path();
path.moveTo(size.width * 0.15, size.height);
path.quadraticBezierTo(size.width * 0.25, size.height * 0.99999,
size.width * 0.40, size.height * 0.92);
path.quadraticBezierTo(size.width * 0.5, size.height * 0.87,
size.width * 0.60, size.height * 0.92);
path.quadraticBezierTo(size.width * 0.75, size.height * 0.99999,
size.width * 0.85, size.height);
path.lineTo(size.width, size.height);
path.lineTo(0, size.height);
path.lineTo(size.width, 0.0);
path.close();
return path;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}
这是输出(红色括号是额外的 IDK,它来自哪里):
您可以使用以下方式。
ClipPath(
clipper: TheHill(),
child: Container(
width: 250,
height: 250,
color: Colors.amber,
child: Align(
alignment: Alignment.bottomCenter,
child: Icon(Icons.play_arrow),
),
),
),
自定义剪辑器:
class TheHill extends CustomClipper<Path> {
@override
Path getClip(Size size) {
var path = Path();
path.moveTo(size.width * 0.15, size.height);
path.quadraticBezierTo(size.width * 0.25, size.height * 0.99999,
size.width * 0.40, size.height * 0.92);
path.quadraticBezierTo(size.width * 0.5, size.height * 0.87,
size.width * 0.60, size.height * 0.92);
path.quadraticBezierTo(size.width * 0.75, size.height * 0.99999,
size.width * 0.85, size.height);
path.lineTo(size.width, size.height);
path.close();
return path;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}
我要使用 ClipPath()
制作一个形状。但是当我绘制它时,它似乎是从其父级的 (0.0) 坐标开始的。但我希望它从另一个点开始(size.width * 0.25, size.height
)。我想实现这个:
代码如下:
import 'dart:core';
import 'package:flutter/material.dart';
class TheHill extends CustomClipper<Path> {
@override
Path getClip(Size size) {
var path = Path();
path.moveTo(size.width * 0.15, size.height);
path.quadraticBezierTo(size.width * 0.25, size.height * 0.99999,
size.width * 0.40, size.height * 0.92);
path.quadraticBezierTo(size.width * 0.5, size.height * 0.87,
size.width * 0.60, size.height * 0.92);
path.quadraticBezierTo(size.width * 0.75, size.height * 0.99999,
size.width * 0.85, size.height);
path.lineTo(size.width, size.height);
path.lineTo(0, size.height);
path.lineTo(size.width, 0.0);
path.close();
return path;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}
这是输出(红色括号是额外的 IDK,它来自哪里):
您可以使用以下方式。
ClipPath(
clipper: TheHill(),
child: Container(
width: 250,
height: 250,
color: Colors.amber,
child: Align(
alignment: Alignment.bottomCenter,
child: Icon(Icons.play_arrow),
),
),
),
自定义剪辑器:
class TheHill extends CustomClipper<Path> {
@override
Path getClip(Size size) {
var path = Path();
path.moveTo(size.width * 0.15, size.height);
path.quadraticBezierTo(size.width * 0.25, size.height * 0.99999,
size.width * 0.40, size.height * 0.92);
path.quadraticBezierTo(size.width * 0.5, size.height * 0.87,
size.width * 0.60, size.height * 0.92);
path.quadraticBezierTo(size.width * 0.75, size.height * 0.99999,
size.width * 0.85, size.height);
path.lineTo(size.width, size.height);
path.close();
return path;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}