狗狗能看到什么颜色视觉工具，实现过程

最新推荐文章于 2025-05-03 10:35:30 发布

hi-meetqy

最新推荐文章于 2025-05-03 10:35:30 发布

阅读量882

点赞数 16

分类专栏：个人作品文章标签： typescript reactjs ui

本文链接：https://blog.youkuaiyun.com/u013931411/article/details/144978129

版权

个人作品专栏收录该内容

3 篇文章

订阅专栏

从代码到现实：狗狗能看到什么颜色视觉工具

狗狗能看到什么颜色视觉工具

引言

作为一名对前端技术充满热情的技术爱好者，我一直想把技术应用到实际生活中的场景中。最近，我决定挑战一下：能不能做一个在线工具，帮助大家理解狗狗的颜色视觉？于是，我开始了我的狗狗颜色视觉模拟工具的开发之旅，本文将从技术层面介绍我的实现过程。

技术选型与项目架构

我选择了 React 作为前端框架，配合 NextUI 组件库来快速构建用户界面。react-colorful 库提供了颜色选择器，同时我编写了 JavaScript 函数来模拟狗狗的视觉效果。

前端框架: React
UI 组件库: NextUI
颜色选择器: react-colorful
状态管理: 使用 useState hook 管理颜色状态
useEffect: 使用 useEffect 监听颜色变化，并获取颜色名称

核心功能实现

颜色输入:
- Input 组件: 我使用了 NextUI 的 Input 组件，用于用户输入十六进制颜色代码，并且实现了即时更新颜色状态的功能。
- HexColorPicker 组件: 我集成了 react-colorful 的 HexColorPicker 组件，使用户可以通过图形化的方式选择颜色，并实时更新颜色状态。
颜色转换 & 视觉模拟:
- isColorVisibleToDog 函数: 我编写了 isColorVisibleToDog 函数，用于模拟狗狗的颜色视觉。该函数接收一个十六进制颜色值作为输入，然后根据简化的颜色转换规则返回模拟后的颜色、可见度评级以及狗狗是否能看到该颜色。
- 简化算法： isColorVisibleToDog 内部的算法主要基于：
  - 灰色感知： 计算输入颜色的灰度值（通过 0.3 * r + 0.6 * g + 0.1 * b），模拟狗狗看到的灰度部分。
  - 蓝-黄感知： 计算输入颜色中蓝色和黄色的成分（通过 0.4 * g + 0.6 * b ），然后根据此值生成模拟的颜色。
  - 可见度评级： 基于模拟颜色的蓝-黄成分，定义可见度等级（高、中、低）。
getColorName 函数：
- 我使用了 getColorName 函数，它接收一个十六进制颜色值并返回该颜色的名称。这增加了用户界面的友好性和信息量。
视觉呈现:
- Card 组件: 我使用 NextUI 的 Card 组件作为容器，将颜色选择器和视觉模拟结果组织起来。
- 背景颜色和阴影: 通过动态设置 backgroundColor 和 boxShadow 样式，我将人类和狗狗的视觉感知结果直观地展现出来。
- 可见度等级显示: 我使用了不同的文本颜色和描述，以视觉化的方式显示颜色的可见度等级。
- 判断是否可见： 我直接使用 isColorVisibleToDog 函数的返回值来展示狗狗是否能看到这个颜色。
响应式布局：
- Grid: 我使用 CSS Grid 布局，确保在不同屏幕尺寸下都能呈现良好的视觉效果。

代码片段（`is-color-visible-to-dog.js`）

这是我实现颜色转换和可见度判断的核心代码（简化版）：

export function isColorVisibleToDog(hexColor) {
  if (!hexColor || hexColor.length !== 7 || !hexColor.startsWith("#")) {
    return { dogVision: "#808080", visibility: "low", isVisible: false };
  }

  const r = parseInt(hexColor.slice(1, 3), 16);
  const g = parseInt(hexColor.slice(3, 5), 16);
  const b = parseInt(hexColor.slice(5, 7), 16);

  const gray = 0.3 * r + 0.6 * g + 0.1 * b;
  const blueYellow = 0.4 * g + 0.6 * b;

  const newR = gray;
  const newG = blueYellow / 2;
  const newB = blueYellow;

  const dogR = Math.max(0, Math.min(255, Math.round(newR)));
  const dogG = Math.max(0, Math.min(255, Math.round(newG)));
  const dogB = Math.max(0, Math.min(255, Math.round(newB)));
  const dogVision = `rgb(${dogR}, ${dogG}, ${dogB})`;

  let visibility = "low";
  let isVisible = false;

  if (blueYellow > 80) {
    visibility = "high";
      isVisible = true
  } else if (blueYellow > 40) {
      visibility = "medium"
      isVisible = true
  }

  return { dogVision, visibility, isVisible };
}