《QT实用小工具·三十九》仿 Windows10 画图3D 的颜色选择器, 但更加强大

1、概述
源码放在文章末尾

该项目实现了仿 Windows10 画图3D 的颜色选择器，功能更加丰富更加强大。
在这里插入图片描述

项目部分代码如下所示：

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtGraphicalEffects 1.15Item {id: rootwidth: 460height: 500scale: 0opacity: 0enabled: falseproperty bool movable: trueproperty alias title: contentText.textproperty color initColor: "white"readonly property color currentColor: pickerRect.currentColoronInitColorChanged: pickerRect.setColor(initColor);signal accepted();signal rejected();function open() {focus = true;enabled = true;}function hide() {focus = false;enabled = false;}Keys.onEscapePressed: cancelButton.clicked();NumberAnimation on scale {running: root.enabledduration: 350easing.type: Easing.OutBackeasing.overshoot: 1.0to: 1.0}NumberAnimation on opacity {running: root.enabledduration: 300easing.type: Easing.OutQuadto: 1.0}NumberAnimation on scale {running: !root.enabledduration: 300easing.type: Easing.InBackeasing.overshoot: 1.0to: 0.0}NumberAnimation on opacity {running: !root.enabledduration: 250easing.type: Easing.OutQuadto: 0.0}RectangularGlow {width: parent.width + 4height: parent.height + 4anchors.centerIn: parentglowRadius: 4spread: 0.2color: "#206856E6"cornerRadius: 4}Rectangle {anchors.fill: parentcolor: "#f6f6f6"border.color: "#aea4ee"}MouseArea {anchors.fill: parentenabled: root.movableproperty point startPos: Qt.point(0, 0)property point offsetPos: Qt.point(0, 0)onClicked: (mouse) => mouse.accepted = false;onPressed: (mouse) => {startPos = Qt.point(mouse.x, mouse.y);cursorShape = Qt.SizeAllCursor;}onReleased: (mouse) => {startPos = Qt.point(mouse.x, mouse.y);cursorShape = Qt.ArrowCursor;}onPositionChanged: (mouse) => {if (pressed) {offsetPos = Qt.point(mouse.x - startPos.x, mouse.y - startPos.y);root.x = root.x + offsetPos.x;root.y = root.y + offsetPos.y;}}Text {id: contentTextheight: 20anchors.top: parent.topanchors.topMargin: 15anchors.left: parent.leftanchors.leftMargin: 25anchors.right: parent.rightfont.family: "微软雅黑"color: "#222255"text: qsTr("选择新颜色")antialiasing: trueverticalAlignment: Text.AlignVCenter}Item {id: pickerRectwidth: 330height: 290anchors.top: contentText.bottomanchors.left: contentText.leftanchors.leftMargin: -cursorWidth * 0.5property real cursorWidth: 30property color hueColor: {let v = 1.0 - hueSlider.value;if (0.0 <= v && v < 0.16) {return Qt.rgba(1.0, 0.0, v / 0.16, 1.0);} else if (0.16 <= v && v < 0.33) {return Qt.rgba(1.0 - (v - 0.16) / 0.17, 0.0, 1.0, 1.0);} else if (0.33 <= v && v < 0.5) {return Qt.rgba(0.0, ((v - 0.33) / 0.17), 1.0, 1.0);} else if (0.5 <= v && v < 0.76) {return Qt.rgba(0.0, 1.0, 1.0 - (v - 0.5) / 0.26, 1.0);} else if (0.76 <= v && v < 0.85) {return Qt.rgba((v - 0.76) / 0.09, 1.0, 0.0, 1.0);} else if (0.85 <= v && v <= 1.0) {return Qt.rgba(1.0, 1.0 - (v - 0.85) / 0.15, 0.0, 1.0);} else {return "red";}}property real saturation: colorPickerCursor.x / (width - cursorWidth)property real brightness: 1 - colorPickerCursor.y / (height - cursorWidth)property color currentColor: Qt.hsva(hueSlider.value, saturation, brightness, alphaSlider.value)property color __color: Qt.rgba(0, 0, 0, 0)function setColor(color) {alphaSlider.x = alphaPicker.width == 0 ? 0 : (alphaPicker.width - alphaSlider.width) * color.a;hueSlider.x = (huePicker.width - hueSlider.width) * (Math.max(color.hsvHue, 0));colorPickerCursor.x = color.hsvSaturation * (width - cursorWidth);colorPickerCursor.y = (1.0 - color.hsvValue) * (height - cursorWidth);}function fromColor() {pickerRect.setColor(Qt.rgba(parseInt(redEditor.text) / 255., parseInt(greenEditor.text) / 255., parseInt(blueEditor.text) / 255., parseInt(alphaEditor.text) / 255.));}function fromArgbColor() {__color = '#' + argbEditor.text;pickerRect.setColor(__color);}onCurrentColorChanged: {redEditor.text = (currentColor.r * 255).toFixed(0);greenEditor.text = (currentColor.g * 255).toFixed(0);blueEditor.text = (currentColor.b * 255).toFixed(0);alphaEditor.text = (currentColor.a * 255).toFixed(0);argbEditor.text = currentColor.toString().replace("#", "");}Rectangle {x: pickerRect.cursorWidth * 0.5y: pickerRect.height - pickerRect.cursorWidth * 0.5width: pickerRect.height - pickerRect.cursorWidthheight: pickerRect.width - pickerRect.cursorWidthrotation: -90transformOrigin: Item.TopLeftgradient: Gradient {GradientStop { position: 0.0; color: "white" }GradientStop { position: 1.0; color: pickerRect.hueColor }}}Rectangle {x: pickerRect.cursorWidth * 0.5y: pickerRect.cursorWidth * 0.5width: pickerRect.width - pickerRect.cursorWidthheight: pickerRect.height - pickerRect.cursorWidthgradient: Gradient {GradientStop { position: 1.0; color: "#ff000000" }GradientStop { position: 0.0; color: "#00000000" }}}Rectangle {id: colorPickerCursorwidth: pickerRect.cursorWidthheight: pickerRect.cursorWidthborder.color: "#e6e6e6"border.width: 1color: pickerRect.currentColorBehavior on scale { NumberAnimation { easing.type: Easing.OutBack; duration: 300 } }Rectangle {anchors.fill: parentanchors.margins: 1color: "transparent"border.color: "white"border.width: 1}}MouseArea {x: pickerRect.cursorWidthy: pickerRect.cursorWidthanchors.fill: parentfunction handleCursorPos(x, y) {let halfWidth = pickerRect.cursorWidth * 0.5;colorPickerCursor.x = Math.max(0, Math.min(width , x + halfWidth) - pickerRect.cursorWidth);colorPickerCursor.y = Math.max(0, Math.min(height, y + halfWidth) - pickerRect.cursorWidth);}onPositionChanged: (mouse) => handleCursorPos(mouse.x, mouse.y);onPressed: (mouse) => {colorPickerCursor.scale = 0.7;handleCursorPos(mouse.x, mouse.y);}onReleased: colorPickerCursor.scale = 1.0;}}Item {id: previewItemwidth: 90height: 90anchors.left: pickerRect.rightanchors.leftMargin: 10anchors.top: contentText.bottomanchors.topMargin: 15Grid {id: previwBackgroundanchors.fill: parentrows: 11columns: 11clip: trueproperty real cellWidth: width / columnsproperty real cellHeight: height / rowsRepeater {model: parent.columns * parent.rowsRectangle {width: previwBackground.cellWidthheight: widthcolor: (index % 2 == 0) ? "gray" : "transparent"}}}Rectangle {anchors.fill: parentanchors.margins: -2color: pickerRect.currentColorborder.color: "#e6e6e6"border.width: 2}}component ColorEditor: ColumnLayout {id: __layoutwidth: previewItem.widthheight: 50property alias label: label.textproperty alias text: input.textproperty alias validator: input.validatorsignal textEdited();signal accepted();Text {id: labelfont.family: "微软雅黑"color: "#222255"verticalAlignment: Text.AlignVCenterLayout.fillWidth: true}Rectangle {clip: truecolor: "transparent"border.color: "#e6e6e6"border.width: 2Layout.fillHeight: trueLayout.fillWidth: trueTextInput {id: inputleftPadding: 10rightPadding: 10selectionColor: "#398ed4"selectByMouse: trueanchors.fill: parenthorizontalAlignment: TextInput.AlignRightverticalAlignment: TextInput.AlignVCenteronTextEdited: __layout.textEdited();onAccepted: __layout.accepted();}}}Column {anchors.top: previewItem.bottomanchors.topMargin: 10anchors.left: previewItem.leftspacing: 6ColorEditor {id: redEditorlabel: "红色"validator: IntValidator { top: 255; bottom: 0 }onAccepted: pickerRect.fromColor();}ColorEditor {id: greenEditorlabel: "绿色"validator: IntValidator { top: 255; bottom: 0 }onAccepted: pickerRect.fromColor();}ColorEditor {id: blueEditorlabel: "蓝色"validator: IntValidator { top: 255; bottom: 0 }onAccepted: pickerRect.fromColor();}ColorEditor {id: alphaEditorlabel: "透明度"validator: IntValidator { top: 255; bottom: 0 }onAccepted: pickerRect.fromColor();}ColorEditor {id: argbEditorlabel: "十六进制 (ARGB)"validator: RegularExpressionValidator { regularExpression: /[0-9a-fA-F]{0,8}/ }onAccepted: pickerRect.fromArgbColor();}}Rectangle {id: huePickerwidth: pickerRect.width - pickerRect.cursorWidthheight: 32anchors.top: pickerRect.bottomanchors.topMargin: 10anchors.left: contentText.leftgradient: Gradient {orientation: Gradient.HorizontalGradientStop { position: 0.0;  color: "#ff0000" }GradientStop { position: 0.16; color: "#ffff00" }GradientStop { position: 0.33; color: "#00ff00" }GradientStop { position: 0.5;  color: "#00ffff" }GradientStop { position: 0.76; color: "#0000ff" }GradientStop { position: 0.85; color: "#ff00ff" }GradientStop { position: 1.0;  color: "#ff0000" }}Rectangle {id: hueSliderwidth: heightheight: parent.heightanchors.verticalCenter: parent.verticalCenterborder.color: "#e6e6e6"border.width: 2scale: 0.9color: pickerRect.hueColorproperty real value: x / (parent.width - width)Behavior on scale { NumberAnimation { easing.type: Easing.OutBack; duration: 300 } }Rectangle {anchors.fill: parentanchors.margins: 1color: "transparent"border.color: "white"border.width: 2}}MouseArea {anchors.fill: parentfunction handleCursorPos(x) {let halfWidth = hueSlider.width * 0.5;hueSlider.x = Math.max(0, Math.min(width, x + halfWidth) - hueSlider.width);}onPressed: (mouse) => {hueSlider.scale = 0.6;handleCursorPos(mouse.x);}onReleased: hueSlider.scale = 0.9;onPositionChanged: (mouse) => handleCursorPos(mouse.x);}}Item {id: alphaPickerItemwidth: huePicker.widthheight: huePicker.heightanchors.top: huePicker.bottomanchors.topMargin: 25anchors.left: huePicker.leftGrid {id: alphaPickeranchors.fill: parentrows: 4columns: 29clip: trueproperty real cellWidth: width / columnsproperty real cellHeight: height / rowsRepeater {model: parent.columns * parent.rowsRectangle {width: alphaPicker.cellWidthheight: widthcolor: (index % 2 == 0) ? "gray" : "transparent"}}}Rectangle {anchors.fill: parentgradient: Gradient {orientation: Gradient.HorizontalGradientStop { position: 1.0; color: "#ff000000" }GradientStop { position: 0.0; color: "#00ffffff" }}}Rectangle {id: alphaSliderx: parent.width - widthwidth: heightheight: parent.heightanchors.verticalCenter: parent.verticalCentercolor: Qt.rgba(0.1, 0.1, 0.1, (value + 1.0) / 2.0)border.color: "#e6e6e6"border.width: 2scale: 0.9property real value: x / (parent.width - width)Behavior on scale { NumberAnimation { easing.type: Easing.OutBack; duration: 300 } }Rectangle {anchors.fill: parentanchors.margins: 1color: "transparent"border.color: "white"border.width: 1}}MouseArea {anchors.fill: parentfunction handleCursorPos(x) {let halfWidth = alphaSlider.width * 0.5;alphaSlider.x = Math.max(0, Math.min(width, x + halfWidth) - alphaSlider.width);}onPressed: (mouse) => {alphaSlider.scale = 0.6;handleCursorPos(mouse.x);}onReleased: alphaSlider.scale = 0.9;onPositionChanged: (mouse) => handleCursorPos(mouse.x);}}Button {id: confirmButtonwidth: 200height: alphaPickerItem.heightanchors.top: alphaPickerItem.bottomanchors.topMargin: 25anchors.left: alphaPickerItem.lefttext: qsTr("确定")hoverEnabled: truetopInset: down ? 1 : 0bottomInset: topInsetleftInset: topInsetrightInset: topInsetfont.family: "微软雅黑"onClicked: {root.initColor = root.currentColor;root.hide();root.accepted();}}Button {id: cancelButtonwidth: 200height: alphaPickerItem.heightanchors.top: alphaPickerItem.bottomanchors.topMargin: 25anchors.right: parent.rightanchors.rightMargin: 25text: qsTr("取消")hoverEnabled: truetopInset: down ? 1 : 0bottomInset: topInsetleftInset: topInsetrightInset: topInsetfont.family: "微软雅黑"onClicked: {pickerRect.setColor(root.initColor);root.hide();root.rejected();}}}
}

源码下载

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/2967.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【leetcode面试经典150题】72. 从前序与中序遍历序列构造二叉树（C++）

【leetcode面试经典150题】72. 从前序与中序遍历序列构造二叉树（C++）

【leetcode面试经典150题】专栏系列将为准备暑期实习生以及秋招的同学们提高在面试时的经典面试算法题的思路和想法。本专栏将以一题多解和精简算法思路为主&#xff0c;题解使用C语言。&#xff08;若有使用其他语言的同学也可了解题解思路&#xff0c;本质上语法内容一致&…
阅读更多...
opencv绘制线段------c++

opencv绘制线段------c++

绘制线段 bool opencvTool::drawLines(std::string image_p, std::vector<cv::Point> points) {cv::Mat ima cv::imread(image_p.c_str()); // 读取图像&#xff0c;替换为你的图片路径 cv::Scalar red cv::Scalar(0, 0, 255); // Red color int thickness 2;// 遍…
阅读更多...
面试遇到算法题：实现LRU缓存

面试遇到算法题：实现LRU缓存

请你设计并实现一个满足 LRU (最近最少使用) 缓存约束的数据结构。 这是一道大厂面试高频出现的算法题&#xff0c;难度为⭐️⭐️⭐️&#xff0c;属于中等&#xff0c;老铁们来一起看看这个题该怎么解&#xff1f; 1. 原题再现 没有废话&#xff0c;翠花&#xff0c;上酸菜&…
阅读更多...
JS 添加数组元素（ 4种方法 ）

JS 添加数组元素（ 4种方法 ）

No.内容链接1Openlayers 【入门教程】 - 【源代码示例300】 2Leaflet 【入门教程】 - 【源代码图文示例 150】 3Cesium 【入门教程】 - 【源代码图文示例200】 4MapboxGL【入门教程】 - 【源代码图文示例150】 5前端就业宝典 【面试题详细答案 1000】 文章目录 一、四种…
阅读更多...
Spring Boot 集成 EasyExcel 3.x

Spring Boot 集成 EasyExcel 3.x

Spring Boot 集成 EasyExcel 3.x Spring Boot 集成 EasyExcel 3.x 本章节将介绍 Spring Boot 集成 EasyExcel&#xff08;优雅实现Excel导入导出&#xff09;。 &#x1f916; Spring Boot 2.x 实践案例&#xff08;代码仓库&#xff09; 介绍 EasyExcel 是一个基于 Java 的、…
阅读更多...
HZNUCTF -- web

HZNUCTF -- web

HZNUCTF第五届校赛实践赛初赛 Web方向 WriteUp-CSDN博客 ezssti 下载文件 访问 /login 可由源代码中看到 Eval 函数 &#xff0c;可以任意命令执行 按照格式&#xff0c;可执行命令 POST &#xff1a;name{{.Eval "env"}} 可以得到flag &#xff08;尝试ls 只能列出…
阅读更多...
「ChatGPT」掀起新一轮AI热潮！超越GPT-4 Turbo，商汤日日新大升级！

「ChatGPT」掀起新一轮AI热潮！超越GPT-4 Turbo，商汤日日新大升级！

目录 拳打 GPT-4 Turbo &#xff0c;脚踢 DALLE 3 端侧大模型&#xff0c;唯快不破 AI 应用落地需要一个即插即用的大模型超市 并不存在 AI 这个行业&#xff0c;只有 AI行业&#xff0c;强调 AI 需要与传统产业合作&#xff0c;这种关系是结合与赋能&#xff0c;而不是颠覆…
阅读更多...
java开发之路——用户管理中心_简单初始化

java开发之路——用户管理中心_简单初始化

用户管理中心_简单初始化 (一) 初始化项目1. 使用 Ant Design Pro(现成的管理系统) 进行前端初始化2. 后端初始化三种初始化java项目 (二) 遇到的问题【问题1】Ant design pro页面打不开&#xff0c;一直在budiling控制台出现错误error-./src/components/index.ts【问题2】初始…
阅读更多...
基于SSM的物业管理系统（含源码+sql+视频导入教程+文档+PPT）

基于SSM的物业管理系统（含源码+sql+视频导入教程+文档+PPT）

&#x1f449;文末查看项目功能视频演示获取源码sql脚本视频导入教程视频 1 、功能描述 基于SSM的物业管理系统2拥有三种角色 管理员&#xff1a;用户管理、物业管理、房产信息管理、小区概况管理、开发商管理、收费标准管理、物业公司管理等 物业&#xff1a;住户管理、收费…
阅读更多...
如何通过cURL库实现远程控制插座

如何通过cURL库实现远程控制插座

如何通过cURL库实现远程控制插座呢&#xff1f; 本文描述了使用cURL库调用HTTP接口&#xff0c;实现控制插座&#xff0c;即插即用&#xff0c;先插入插座&#xff0c;再接电器&#xff0c;实现远程控制。 可选用产品&#xff1a;可根据实际场景需求&#xff0c;选择对应的规格…
阅读更多...
udp/tcp错误总结

udp/tcp错误总结

udp tcp——多进程 tcp——多线程 tcp——线程池 tcp——守护进程 &#x1f386;udp  ✨pthread_create 错误总结  ✨LockGuard错误总结  ✨服务端需要写成多线程  ✨客户端也需要写成多线程  ✨多线程调试工具 &#x1f386;tcp  ✨tcp独有调试工具——telnet  ✨Threa…
阅读更多...
基于瞬时频率的语言信号清/浊音判决和高音检测（MATLAB R2021）

基于瞬时频率的语言信号清/浊音判决和高音检测（MATLAB R2021）

语音是由气流激励声道从嘴唇或鼻孔辐射出来而产生的。根据声带是否振动&#xff0c;发音可分为浊音和清音。浊音和清音有明显的区别&#xff0c;浊音具有周期信号的特征&#xff0c;而清音则具有随机噪声的特征&#xff1b;浊音在频域上具有共振峰结构&#xff0c;其能量主要集…
阅读更多...
⑤【Shiro】SpringBoot整合Shiro，实现登录认证

⑤【Shiro】SpringBoot整合Shiro，实现登录认证

个人简介&#xff1a;Java领域新星创作者&#xff1b;阿里云技术博主、星级博主、专家博主&#xff1b;正在Java学习的路上摸爬滚打&#xff0c;记录学习的过程~ 个人主页&#xff1a;.29.的博客 学习社区&#xff1a;进去逛一逛~ ⑤【Shiro】SpringBoot整合Shiro&#xff0c;实…
阅读更多...
AI助力科研创新与效率双提升：ChatGPT深度科研应用、数据分析及机器学习、AI绘图与高效论文撰写

AI助力科研创新与效率双提升：ChatGPT深度科研应用、数据分析及机器学习、AI绘图与高效论文撰写

2022年11月30日&#xff0c;可能将成为一个改变人类历史的日子——美国人工智能开发机构OpenAI推出了聊天机器人ChatGPT3.5&#xff0c;将人工智能的发展推向了一个新的高度。2023年4月&#xff0c;更强版本的ChatGPT4.0上线&#xff0c;文本、语音、图像等多模态交互方式使其在…
阅读更多...
计算机网络4——网络层2

计算机网络4——网络层2

文章目录 一、地址解析协议ARP二、IP数据报格式1、IP 数据报首部的固定部分中的各字段2、IP 数据报首部的可变部分 三、IP 层转发分组的过程1、流程2、案例分析3、最长前缀匹配4、分组转发算法5、使用二叉线索查找转发表 一、地址解析协议ARP 在实际应用中&#xff0c;我们经常…
阅读更多...
第一篇【传奇开心果系列】Python深度学习库技术点案例示例:深度解读深度学习在自动驾驶领域的应用

第一篇【传奇开心果系列】Python深度学习库技术点案例示例:深度解读深度学习在自动驾驶领域的应用

传奇开心果博文系列 系列博文目录Python深度学习库技术点案例示例系列 博文目录前言一、深度学习在自动驾驶方面的应用介绍二、目标检测和识别示例代码三、路况感知示例代码四、行为预测示例代码五、路径规划示例代码六、自动驾驶控制示例代码七、感知融合示例代码八、高精度地…
阅读更多...
【数据结构】串（String）

【数据结构】串（String）

文章目录 基本概念顺序存储结构比较当前串与串s的大小取子串插入删除其他构造函数拷贝构造函数扩大数组空间。重载重载重载重载[]重载>>重载<< 链式存储结构链式存储结构链块存储结构 模式匹配朴素的模式匹配算法(BF算法)KMP算法字符串的前缀、后缀和部分匹配值nex…
阅读更多...
Android 10.0 Launcher3替换桌面app图标后大小和其他app图标不一样的问题解决方案

Android 10.0 Launcher3替换桌面app图标后大小和其他app图标不一样的问题解决方案

1.前言 在10.0的系统ROM产品定制化开发中，在关于launcher3的产品定制化开发中，在有些时候需要对一些第三方的app图标做 替换或者是做一些动态图标的替换，发现在替换以后图标大小和其他app的图标大小不一样，所以就需要看是具体哪里 对app的图标做了缩放功能，接下来就需要去…
阅读更多...
【网页在线小游戏源码】

【网页在线小游戏源码】

网页在线小游戏源码 效果图部分源码领取源码下期更新预报 效果图 部分源码 index.html <!DOCTYPE html> <html> <head> <meta http-equiv"Content-Type" content"text/html; charsetUTF-8"> <meta id"viewport" na…
阅读更多...
WEB逆向—X-Bogus逆向分析(纯算+补环境)

WEB逆向—X-Bogus逆向分析(纯算+补环境)

声明 本文章中所有内容仅供学习交流&#xff0c;抓包内容、敏感网址、数据接口均已做脱敏处理&#xff0c;严禁用于商业用途和非法用途&#xff0c;否则由此产生的一切后果均与作者无关&#xff0c;若有侵权&#xff0c;请联系我立即删除&#xff01; 前言 此平台 本人 仅限…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023