问题描述
图片没有背景，所以我认为应该很容易做...不。 我试图堆叠图像和画家，我试图在图像中添加一个孩子，这是不允许的。似乎没有任何作用。
这是一个基本的绘画应用程序，我需要的是能够在图像的牙齿内仅绘制，而在背景中不绘制
图片：
依赖项：
Flutter:
sdk: Flutter
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^0.1.3
animated_floatactionbuttons: ^0.1.0
代码：
import 'dart:ui' as ui;
import 'package:animated_floatactionbuttons/animated_floatactionbuttons.dart';
import 'package:Flutter/material.dart';
void main() {
runApp(MaterialApp(
debugShowCheckedModeBanner: false,home: WorkOne_8(),));
}
class WorkOne_8 extends StatefulWidget {
@override
_CanvasPaintingState createState() => _CanvasPaintingState();
}
class _CanvasPaintingState extends State<WorkOne_8> {
GlobalKey globalKey = GlobalKey();
List<TouchPoints> points = List();
double opacity = 1.0;
strokeCap strokeType = strokeCap.round;
double strokeWidth = 10.0;
Color selectedColor = Colors.black;
Future<void> _pickstroke() async {
//Shows AlertDialog
return showDialog<void>(
context: context,//dismiss alert dialog when set true
barrierdismissible: true,// user must tap button!
builder: (BuildContext context) {
//Clips its child in a oval shape
return Clipoval(
child: AlertDialog(
//Creates three buttons to pick stroke value.
actions: <Widget>[
//Resetting to default stroke value
FlatButton(
child: Icon(
Icons.clear,),onpressed: () {
strokeWidth = 3.0;
Navigator.of(context).pop();
},FlatButton(
child: Icon(
Icons.brush,size: 24,onpressed: () {
strokeWidth = 10.0;
Navigator.of(context).pop();
},size: 40,onpressed: () {
strokeWidth = 30.0;
Navigator.of(context).pop();
},size: 60,onpressed: () {
strokeWidth = 50.0;
Navigator.of(context).pop();
},],);
},);
}
Future<void> _opacity() async {
//Shows AlertDialog
print('=======');
return showDialog<void>(
context: context,builder: (BuildContext context) {
//Clips its child in a oval shape
return Clipoval(
child: AlertDialog(
//Creates three buttons to pick opacity value.
actions: <Widget>[
FlatButton(
child: Icon(
Icons.clear,FlatButton(
child: Icon(
Icons.opacity,onpressed: () {
//most transparent
opacity = 0.1;
Navigator.of(context).pop();
},onpressed: () {
opacity = 0.5;
Navigator.of(context).pop();
},onpressed: () {
//not transparent at all.
opacity = 1.0;
Navigator.of(context).pop();
},);
}
Future<void> _color() async {
//Shows AlertDialog
print('=======');
return showDialog<void>(
context: context,FloatingActionButton(
backgroundColor: Colors.white,mini: true,heroTag: "color_red",tooltip: 'Color',child: colorMenuItem(Colors.red),onpressed: () {
setState(() {
selectedColor = Colors.red;
});
},heroTag: "color_green",child: colorMenuItem(Colors.green),onpressed: () {
setState(() {
selectedColor = Colors.green;
});
},heroTag: "color_pink",child: colorMenuItem(Colors.pink),onpressed: () {
setState(() {
selectedColor = Colors.pink;
});
},heroTag: "color_blue",child: colorMenuItem(Colors.blue),onpressed: () {
setState(() {
selectedColor = Colors.blue;
});
},);
}
List<Widget> fabOption() {
return <Widget>[
FloatingActionButton(
heroTag: "paint_color",child: Icon(Icons.color_lens),// mini: true,onpressed: () {
//min: 0,max: 50
setState(() {
_color();
});
},FloatingActionButton(
heroTag: "paint_stroke",child: Icon(Icons.brush),tooltip: 'stroke',max: 50
setState(() {
_pickstroke();
});
},FloatingActionButton(
heroTag: "paint_opacity",child: Icon(Icons.opacity),tooltip: 'Opacity',onpressed: () {
//min:0,max:1
setState(() {
_opacity();
});
},FloatingActionButton(
heroTag: "home",child: Icon(Icons.home),tooltip: "Home",//mini: true,onpressed: () {}),];
}
@override
void dispose() {
super.dispose();
}
@override
Widget build(BuildContext context) {
//SystemChrome.setEnabledsystemUIOverlays([]);
final ui.Size logicalSize = MediaQuery.of(context).size;
final double _width = logicalSize.width;
final double _height = logicalSize.height;
return Scaffold(
backgroundColor: Colors.blue[50],appBar: AppBar(
title: Text('123'),automaticallyImplyLeading: false,body: RepaintBoundary(
key: globalKey,child: Center(
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(20.0)),child: Container(
color: Colors.grey,width: _width * 0.75,height: _height * 0.75,child: GestureDetector(
onPanUpdate: (details) {
setState(() {
RenderBox renderBox = context.findRenderObject();
points.add(TouchPoints(
points: renderBox.globalToLocal(details.localPosition),paint: Paint()
..strokeCap = strokeType
..isAntiAlias = true
..color = selectedColor.withOpacity(opacity)
..strokeWidth = strokeWidth));
});
},onPanStart: (details) {
setState(() {
RenderBox renderBox = context.findRenderObject();
points.add(TouchPoints(
points: renderBox.globalToLocal(details.localPosition),onPanEnd: (details) {
setState(() {
points.add(null);
});
},child: Stack(
children: <Widget>[
Center(
child: Image.asset(
'assets/images/01_08_01.png',width: _width * 0.7,CustomPaint(
size: Size.infinite,painter: MyPainter(
pointsList: points,floatingActionButton: AnimatedFloatingActionButton(
fabButtons: fabOption(),colorStartAnimation: Colors.blue,colorEndAnimation: Colors.cyan,animatedIconData: AnimatedIcons.menu_close,);
}
Widget colorMenuItem(Color color) {
return GestureDetector(
onTap: () {
setState(() {
selectedColor = color;
Navigator.of(context).pop();
});
},child: Clipoval(
child: Container(
padding: const EdgeInsets.only(bottom: 8.0),height: 36,width: 36,color: color,);
}
}
class MyPainter extends CustomPainter {
MyPainter({this.pointsList});
List<TouchPoints> pointsList;
List<Offset> offsetPoints = List();
@override
void paint(Canvas canvas,Size size) {
for (int i = 0; i < pointsList.length - 1; i++) {
if (pointsList[i] != null && pointsList[i + 1] != null) {
//Drawing line when two consecutive points are available
canvas.drawLine(pointsList[i].points,pointsList[i + 1].points,pointsList[i].paint);
} else if (pointsList[i] != null && pointsList[i + 1] == null) {
offsetPoints.clear();
offsetPoints.add(pointsList[i].points);
offsetPoints.add(Offset(
pointsList[i].points.dx + 0.1,pointsList[i].points.dy + 0.1));
//Draw points when two points are not next to each other
canvas.drawPoints(
ui.PointMode.points,offsetPoints,pointsList[i].paint);
}
}
}
//Called when CustomPainter is rebuilt.
//Returning true because we want canvas to be rebuilt to reflect new changes.
@override
bool shouldRepaint(MyPainter oldDelegate) => true;
}
class TouchPoints {
Paint paint;
Offset points;
TouchPoints({this.points,this.paint});
}
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）