Flutter自定义圆盘取色器

本文实例为大家分享了Flutter自定义圆盘取色器的具体代码,供大家参考,具体内容如下

下面展示一些 内联代码片。

圆盘取色器
效果图

完整代码

import 'dart:math';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

class CircularColorFinder extends StatefulWidget {
  Color color;
  double size;
  double thumbSize;
  ValueChanged<Color> onColorChange;
  ValueChanged<Color> onColorChangeEnd;
  CircularColorFinder({Key key,this.color,this.size=300,this.thumbSize=25,this.onColorChange,this.onColorChangeEnd}) : super(key: key);

  @override
  _CircularColorFinderState createState() => _CircularColorFinderState();
}

class _CircularColorFinderState extends State<CircularColorFinder> {
  Offset topPosition;
  Offset center;
  Offset position;
  Offset currentOffset;
  double radians = 0;
  double radius;
  double hue = 0;
  Color color;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    radius = widget.size/2;
    color = Colors.white;
    topPosition = Offset(0, widget.size/2);
    center = Offset(widget.size/2, widget.size/2);
    position = Offset(widget.size/2, widget.size/2);
    currentOffset = Offset(widget.size/2, widget.size/2);
  }
  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      width: widget.size+40,
      height: widget.size+40,
      child: Stack(
        children: [
          Container(
            width: widget.size+40,
            height: widget.size+40,
            alignment: Alignment.center,
            child: GestureDetector(
              onPanDown: onPanDown,
              onPanUpdate: onPanUpdate,
              onPanEnd: onPanEnd,
              child: Container(
                alignment: Alignment.center,
                width: widget.size,
                height: widget.size,
                child: Stack(
                  alignment: Alignment.center,
                  children: [
                    Transform.rotate(
                      angle:pi,
                      child: CustomPaint(
                        painter: CircularColorPainter(
                          color: color,
                          center: center,
                          radius: radius,
                        ),
                        child: Container(
                          alignment: Alignment.center,
                          width: widget.size,
                          height: widget.size,
                        ),
                      ),
                    ),
                    Row(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.center,
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Icon(Icons.wb_sunny_sharp,color: Color.fromRGBO(183, 202, 208, 1.0)),
                            Text('Warm',style: TextStyle(color: Color.fromRGBO(183, 202, 208, 1.0)),),
                            Text('White',style: TextStyle(color: Color.fromRGBO(183, 202, 208, 1.0)),),
                          ],
                        ),
                        SizedBox(width: 15,),
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.center,
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Icon(Icons.brightness_2_sharp,color: Color.fromRGBO(183, 202, 208, 1.0)),
                            Text('Cool',style: TextStyle(color: Color.fromRGBO(183, 202, 208, 1.0)),),
                            Text('White',style: TextStyle(color: Color.fromRGBO(183, 202, 208, 1.0)),),
                          ],
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            ),
          ),
          Thumb(
            // top: 0,
            // left: 0,
            top: currentOffset.dy+20,
            left: currentOffset.dx+20,
            thumbSize:widget.thumbSize,
            color: color,
          ),
        ],
      ),
    );
  }
  ///获取象限
  static int getQuadrant(double x, double y, double size) {
    if (x >= size / 2) {
      return y >= size / 2 ? 3 : 4;
    }
    return y >= size / 2 ? 2 : 1;
  }
  onPanDown(DragDownDetails details){
    change(details);
    widget.onColorChange(color);
  }
  onPanUpdate(DragUpdateDetails details){
    change(details);
    widget.onColorChange(color);
  }
  onPanEnd(DragEndDetails details){
    widget.onColorChangeEnd(color);
  }
  change(details){
    setState(() {
      position = Offset(details.localPosition.dx, details.localPosition.dy);
    });
    double cosA;
    double x = (sqrt(pow((topPosition.dx - center.dx), 2) + pow((topPosition.dy - center.dy), 2)));
    double y = (sqrt(pow((position.dx - center.dx), 2) + pow((position.dy - center.dy), 2)));
    double z = (sqrt(pow((topPosition.dx - position.dx), 2) + pow((topPosition.dy - position.dy), 2)));
    cosA = (x * x + y * y - z * z) / (2 * x * y);
    int quadrant = getQuadrant(position.dx, position.dy, center.dx*2);
    radians = acos(cosA);
    if (quadrant == 1 || quadrant == 4) {
      radians = acos(cosA);
    } else if (quadrant == 2 || quadrant == 3) {
      radians = 2 * pi - acos(cosA);
    }
    hue = 360*radians/(2*pi);
    // print('radians:${radians} hue:${hue}');
    color = HSVColor.fromAHSV(1, hue, 1, 1).toColor();
    if(y<=center.dx){
      currentOffset = Offset(details.localPosition.dx, details.localPosition.dy);
    }else{
      double dx = position.dx - center.dx;
      double dy = position.dy - center.dy;
      double distance = sqrt(dx * dx + dy * dy);
      double ratio = radius / distance;
      currentOffset = Offset(dx * ratio + center.dx, dy * ratio + center.dy);
    }
    if(y<=center.dx/2){
      if(position.dx<widget.size/2){
        color =Color.fromRGBO(255, 225, 178, 1.0);
      }else{
        color = Color.fromRGBO(220, 244, 255, 1.0);
      }
    }
  }
}

class CircularColorPainter extends CustomPainter {
  Color color;
  double radius;
  Offset center;
  List<Color> colorList;
  CircularColorPainter({this.color,this.center,this.radius});

  @override
  void paint(Canvas canvas, Size size) {
    Paint _paint = Paint()
      ..style = PaintingStyle.fill
      ..strokeWidth = 1
      ..color = Colors.black;
    Paint _paint2 = Paint()
      ..style = PaintingStyle.fill
      ..strokeWidth = 1
      ..color = Colors.black;
    Paint _paint3 = Paint()
      ..style = PaintingStyle.stroke
      ..strokeWidth = 1
      ..color = Colors.black;
    Paint _paint4 = Paint()
      ..style = PaintingStyle.fill
      ..strokeWidth = 0
      ..color = Color.fromRGBO(color.red, color.green, color.blue, 0.3);
    colorList = [Color(0xFFFF0000),Color(0xFFFFFF00),Color(0xFF00FF00),Color(0xFF00FFFF),Color(0xFF0000FF),Color(0xFFFF00FF),Color(0xFFFF0000),];
    Gradient gradient = SweepGradient(
      startAngle: 0,
      endAngle: 2 * pi,
      colors: colorList.map((e) => e).toList(),
    );
    _paint4..maskFilter = MaskFilter.blur(BlurStyle.outer, 30);
    canvas.drawArc(Rect.fromLTWH(0, 0, radius * 2, radius * 2), -pi / 2, pi * 2, false, _paint4);
    var rect = Rect.fromLTWH(0, 0, radius * 2, radius * 2);
    _paint.shader = gradient.createShader(rect);
    canvas.drawCircle(center, radius, _paint);
    var rect2 = Rect.fromLTWH(radius/2, radius/2, radius, radius);
    _paint2.color = Color.fromRGBO(255, 225, 178, 1.0);
    canvas.drawArc(rect2, -pi/2, pi, true, _paint2);
    _paint2.color = Color.fromRGBO(220, 244, 255, 1.0);
    canvas.drawArc(rect2, pi/2, pi, true, _paint2);
    canvas.drawCircle(center, radius/2, _paint3);
    _paint3.color = Colors.grey;
    canvas.drawLine(Offset(radius,radius/2), Offset(radius,radius+radius/2), _paint3);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

class Thumb extends StatelessWidget {
  const Thumb({
    Key key,
    @required double top,
    @required double thumbSize,
    @required double left,
    @required Color color,
  })  : _top = top,
        _Thumbsize = thumbSize,
        _left = left,
        _color = color,
        super(key: key);

  final double _top;
  final double _Thumbsize;
  final double _left;
  final Color _color;

  @override
  Widget build(BuildContext context) {
    return Positioned(
      top: _top - _Thumbsize / 2,
      left: _left - _Thumbsize / 2,
      child: GestureDetector(
        child: Container(
          // width: 50.0,
          child: Icon(
            Icons.circle,
            color: _color == null ? Colors.white : _color,
            size: _Thumbsize,
          ),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(300),
            boxShadow: [
              BoxShadow(
                blurRadius: 0.1, //阴影范围
                spreadRadius: 0.001, //阴影浓度
                color: Colors.white, //阴影颜色
              ),
            ],
          ),
        ),
      ),
    );
  }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2021-10-13

Flutter实现矩形取色器的封装

前言 最近看插件库上少有的取色器大都是圆形的或者奇奇怪的的亚子,所以今天做两个矩形的颜色取色器 提示:以下是本篇文章正文内容,下面案例可供参考 一.BarTypeColorPicker 条形选色板的功能实现,颜色的获取是通过位置来判断,然后赋予相应的颜色.这个封装好的组件可通过colorListener.onTapUpListener的回调方法,把颜色传出去. 代码如下(示例): import 'package:flutter/cupertino.dart'; import 'package:f

javascript编程开发中取色器及封装$函数用法示例

本文实例讲述了javascript编程开发中取色器及封装$函数用法.分享给大家供大家参考,具体如下: 1.封装$函数 function $(str){ //如果传入的是'#' 则选择id标签 //如果传入的是'.' 则选择所有的类名标签 //如果传入的既不是'#也不是'.' 选择复合标签 //判断传入的值 if(typeof str !='string'){ console.log('传入的参数有误!'); return null; } //获取参数的第一个字母 var firstChar=st

JS实现的RGB网页颜色在线取色器完整实例

本文实例讲述了JS实现的RGB网页颜色在线取色器.分享给大家供大家参考,具体如下: 运行效果图如下: 完整实例代码如下: <html> <head> <meta content="text/html; charset=utf-8" http-equiv="content-type"> <meta name="description" content="在线取色器"> <me

Android基于IJKPlayer视频播放器简单封装设计

播放器的简单设计 播放器基于IJKPlayer来设计的, 播放器大致分三层 1.播放内核(基于ijkMediaplayer) 2.播放器View 3.播放器的MediaController 1.封装播放内核 我们都知道需要播放一个视频需要三个过程 1.create MediaPlayer 2.MediaPlayer prepare 3.MediaPlayer 与 Surface 绑定 xinvideoplayer中使用了VideoManager来控制ijkmediaplayer 所有的操作 三个

iOS实现无限循环图片轮播器的封装

项目中很多时候会碰到这个需求,实现多张图片的无限循环轮转,以前做过,项目中几个地方的都用到了,当时没有封装,几个地方都拷贝几乎一样的代码,代码复用性不好,今天没事封装了一下,使用起来比较简单. 首先,说说我实现循环轮转图片的思想,在UIScrollView中添加了3个UIImageView,并排排列,我们看到的永远只是第二个UIImageView,这样的话,你一直可以向左,向右滑动,当你向左滑动是,这是你滑动到了最后一个UIImageView不能在向左边滑动了,这时,我在后面悄悄的将第二个UII

详解flutter之网络请求dio,请求,拦截器简单示例

flutter一直很火的网络请求插件dio 直接上代码,写成一个类,可以直接使用 包含请求的封装,拦截器的封装 import 'package:dio/dio.dart'; import 'dart:async'; import 'dart:io'; import './apidomain.dart'; import './httpHeaders.dart'; import 'package:shared_preferences/shared_preferences.dart'; class D

网页取色

移动鼠标改变背景颜色 网页安全色取色器 移动鼠标改变背景颜色,单击复制颜色RGB代码到剪贴板.                                                                                                                                                                                                           

Vue封装Swiper实现图片轮播效果

图片轮播是前端中经常需要实现的一个功能.最近学习Vue.js,就针对Swiper进行封装,实现一个简单的图片轮播组件. 一.Swiper 在实现封装之前,先介绍一下Swiper. Swiper是纯Javascript打造的滑动特效插件,面向手机.平板电脑等移动终端. Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. Swiper开源.免费.稳定.使用简单.功能强大,是架构移动终端网站的重要选择. Swiper的应用场景广泛,实现效果很好,下面个这实际案例就是Swiper的典

基于vue-video-player自定义播放器的方法

先看一下效果. 图1--显示侧边栏 图2-收起侧边栏: 图三:全屏. 写在前面 本次项目中需要用到vue,vue-video-player,我用的是iview的ui框架,但是ui框架无妨,这里关注的是基于video.js开发的vue-video-player的使用,以及如何操作video.js中的api. vue-video-player 项目地址:https://github.com/surmon-china/vue-video-player. video.js文档地址:http://docs

Django框架自定义模型管理器与元选项用法分析

本文实例讲述了Django框架自定义模型管理器与元选项用法.分享给大家供大家参考,具体如下: 自定义模型管理器 每个模型类默认都有一个 objects 类属性,可以把它叫 模型管理器.它由django自动生成,类型为 django.db.models.manager.Manager 可以在模型类中自定义模型管理器,自定义后, Django将不再生成默认的 objects.(模型类可以自定义多个管理器) 例如: class Department(models.Model): # 自定义模型管理器

Flutter混合开发详解

混合开发简介 使用Flutter从零开始开发App是一件轻松惬意的事情,但对于一些成熟的产品来说,完全摒弃原有App的历史沉淀,全面转向Flutter是不现实的.因此使用Flutter去统一Android.iOS技术栈,把它作为已有原生App的扩展能力,通过有序推进来提升移动终端的开发效率. 目前,想要在已有的原生App里嵌入一些Flutter页面主要有两种方案.一种是将原生工程作为Flutter工程的子工程,由Flutter进行统一管理,这种模式称为统一管理模式.另一种是将Flutter工程作