问题描述
这是使用 ClipPath 获取字母“A”的自定义三个容器的代码。此代码也可以在这三个容器内绘制。但是可以在任何方向上进行绘图。我想让这段代码在第一个容器内从上到下绘制,当第一次绘制完成时,第二个容器被激活,在绘制第二个容器后,然后第三个被激活(跟踪字母表)。我认为应该有 3 对 Draggable 和 DragTarget。绘图是通过使用 GestureDetector 完成的。有没有什么方法可以使用 Draggable 小部件画线,请回答任何知道解决方案的人
import 'package:Flutter/cupertino.dart';
import 'package:Flutter/material.dart';
import 'dart:ui' as ui;
import 'package:Flutter/services.dart';
void main() {
WidgetsFlutterBinding.ensureInitialized();
SystemChrome.setEnabledsystemUIOverlays ([]);
SystemChrome.setPreferredOrientations([DeviceOrientation.landscapeRight,DeviceOrientation.landscapeLeft]).then((_){
runApp(MyApp());
});
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage(),);
}
}
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
List<Offset> points1 = [];
List<Offset> points2 = [];
List<Offset> points3 = [];
@override
Widget build(BuildContext context) {
final double width = MediaQuery.of(context).size.width;
final double height = MediaQuery.of(context).size.height;
return Scaffold(
floatingActionButton: FloatingActionButton(
onpressed: (){
points1.clear();
points2.clear();
points3.clear();
},),backgroundColor: Colors.teal,body: SafeArea(
child:Center(
child: Stack(
children: [
Positioned(
left: MediaQuery.of(context).size.width*0.381,top:MediaQuery.of(context).size.height*0.560,child: ClipPath(
clipper: CPath3(),child: Container(
height: height*0.07,width: width*0.18,child: GestureDetector(
onPanStart: (details){
this.setState(() {
points3.add(details.localPosition);
});
},onPanUpdate: (details){
this.setState(() {
points3.add(details.localPosition);
});
},onPanEnd: (details){
this.setState(() {
points3.add(null);
});
},child: CustomPaint(
painter: MyPainter3(points3: points3),//THIRD PATH
Positioned(
left: MediaQuery.of(context).size.width*0.283,// bottom: 0,top: MediaQuery.of(context).size.height*0.194,//right: 0,child: ClipPath(
clipper: CPath1(),child: Container(
height: height*0.60,width: width*0.20,child: GestureDetector(
onPanStart: (details){
this.setState(() {
points1.add(details.localPosition);
});
},onPanUpdate: (details){
this.setState(() {
points1.add(details.localPosition);
});
},onPanEnd: (details){
this.setState(() {
points1.add(null);
});
},child: CustomPaint(
painter: MyPainter1(points1: points1),//FirsT PATH
Positioned(
left: MediaQuery.of(context).size.width*0.467,child: ClipPath(
clipper: CPath2(),child: GestureDetector(
onPanStart: (details){
this.setState(() {
points2.add(details.localPosition);
});
},onPanUpdate: (details){
this.setState(() {
points2.add(details.localPosition);
});
},onPanEnd: (details){
this.setState(() {
points2.add(null);
});
},child: CustomPaint(
painter: MyPainter2(points2: points2),//SECOND PATH
],);
}
}
class CPath1 extends CustomClipper<Path> {
@override
Path getClip(Size size) {
var path_0 = Path();
path_0.moveto(0,size.height);
path_0.lineto(size.width*0.2983628,size.height);
path_0.lineto(size.width,0);
path_0.lineto(size.width*0.7591676,0);
path_0.lineto(0,size.height);
path_0.close();
return path_0;
}
@override
bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
// Todo: implement shouldReclip
return true;
}
}
class MyPainter1 extends CustomPainter {
List<Offset> points1;
MyPainter1({this.points1});
@override
void paint(Canvas canvas,Size size) {
Paint background = Paint()..color = Colors.white;
Rect rect = Rect.fromLTWH(0,size.width,size.height);
canvas.drawRect(rect,background);
Paint paint = Paint();
paint.color = Colors.deepPurpleAccent;
paint.strokeWidth = 70;
paint.isAntiAlias = true;
paint.strokeCap = strokeCap.round;
for(int x=0;x<points1.length-1;x++)
{
if(points1[x] != null && points1[x+1] != null)
{
canvas.drawLine(points1[x],points1[x+1],paint);
}
else if(points1[x] != null && points1[x+1] == null)
{
canvas.drawPoints(ui.PointMode.points,[points1[x]],paint);
}
}
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
// Todo: implement shouldRepaint
return true;
}
}
class CPath2 extends CustomClipper<Path> {
@override
Path getClip(Size size) {
var path_0 = Path();
path_0.moveto(size.width*0.6738603,size.height);
path_0.lineto(size.width*0.1934179,0);
path_0.lineto(size.width*0.08001079,size.height*0.1078064);
path_0.lineto(size.width*0.6738603,size.height);
path_0.close();
return path_0;
}
@override
bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
// Todo: implement shouldReclip
return true;
}
}
class MyPainter2 extends CustomPainter {
List<Offset> points2;
MyPainter2({this.points2});
@override
void paint(Canvas canvas,Size size) {
Paint background = Paint()..color = Colors.white;
Rect rect = Rect.fromLTWH(0,size.height);
canvas.drawRect(rect,background);
Paint paint = Paint();
paint.color = Colors.deepPurpleAccent;
paint.strokeWidth = 70;
paint.isAntiAlias = true;
paint.strokeCap = strokeCap.round;
for(int x=0;x<points2.length-1;x++)
{
if(points2[x] != null && points2[x+1] != null)
{
canvas.drawLine(points2[x],points2[x+1],paint);
}
else if(points2[x] != null && points2[x+1] == null)
{
canvas.drawPoints(ui.PointMode.points,[points2[x]],paint);
}
}
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
// Todo: implement shouldRepaint
return true;
}
}
class CPath3 extends CustomClipper<Path> {
@override
Path getClip(Size size) {
var path_0 = Path();
path_0.moveto(size.width*0.9108546,0);
path_0.lineto(size.width*0.08746101,size.height*0.9771505);
path_0.lineto(size.width*0.9108546,0);
path_0.close();
return path_0;
}
@override
bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
// Todo: implement shouldReclip
return true;
}
}
class MyPainter3 extends CustomPainter {
List<Offset> points3;
MyPainter3({this.points3});
@override
void paint(Canvas canvas,background);
Paint paint = Paint();
paint.color = Colors.deepPurpleAccent;
paint.strokeWidth = 70;
paint.isAntiAlias = true;
paint.strokeCap = strokeCap.round;
for(int x=0;x<points3.length-1;x++)
{
if(points3[x] != null && points3[x+1] != null)
{
canvas.drawLine(points3[x],points3[x+1],paint);
}
else if(points3[x] != null && points3[x+1] == null)
{
canvas.drawPoints(ui.PointMode.points,[points3[x]],paint);
}
}
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
// Todo: implement shouldRepaint
return true;
}
}
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)