画板探秘系列：创意画笔第一期

前言

我目前在维护一款功能强大的开源创意画板。这个画板集成了多种创意画笔，可以让用户体验到全新的绘画效果。无论是在移动端还是PC端，都能享受到较好的交互体验和效果展示。并且此项目拥有许多强大的辅助绘画功能，包括但不限于前进后退、复制删除、上传下载、多画板和多图层等等。详细功能我就不一一罗列了，期待你的探索。

Link: https://songlh.top/paint-board/

Github: https://github.com/LHRUN/paint-board 欢迎Star⭐️

在项目的逐渐迭代中，我计划撰写一些文章，一方面是为了记录技术细节，这是我一直以来的习惯。另一方面则是为了推广一下，期望得到你的使用和反馈，当然如果能点个 Star 就是对我最大的支持。

我准备分3篇文章讲解创意画笔的实现, 本篇文章是第一篇, 所有的实现源码我都会上传到我的 Github 上.

实现源码Demo

彩虹画笔

  • 彩虹画笔是会在绘制中不断变换颜色, 效果如下:

  • 这个效果相比于常规画笔只是多了一个颜色的转换, 我们知道常规画笔的实现是通过一个个线段连接而成, 无论你是曲线还是直线. 所以我们为了实现彩虹效果, 是需要改变每个线段的颜色, 改变线段颜色是通过修改 strokeStyle 属性
  • 然后改变 strokeStyle 颜色, 就不能简单的用常规的颜色表达, 我们需要知道一个知识 HSL
    • HSL 是一种颜色表达方式, 它通过圆柱坐标系来描述颜色, 分为色相(H), 饱和度(S), 亮度(L)
      • 色相(H): 表示颜色在色环上的位置
      • 饱和度(S): 它表示颜色的纯度或者说是灰度的程度。饱和度为 100% 表示完全饱和的颜色，而 0% 则表示灰度色。
      • 亮度(L): 它表示颜色的亮度。调整亮度可以改变颜色的明暗程度。
      • 具体概念可以看 MDN
      • HSL在线展示网站: https://mothereffinghsl.com/
  • 而我们只需要不断的调整 HSL 表达中的hue, 就可以达到颜色不断变换的效果
let hue = 0 // 记录当前的色相
let isMouseDown = false // 是否点击鼠标
let movePoint: { x: number, y: number } | null = null // 记录鼠标位置

function PaintBoard() {
  const canvasRef = useRef<HTMLCanvasElement | null>(null)
  const [context2D, setContext2D] = useState<CanvasRenderingContext2D | null>(null)

  useEffect(() => {
    if (canvasRef?.current) {
      const context2D = canvasRef?.current.getContext('2d')
      if (context2D) {
        context2D.lineCap = 'round'
        context2D.lineJoin = 'round'
        context2D.lineWidth = 10
        setContext2D(context2D)
      }
    }
  }, [canvasRef])

  const onMouseDown = () => {
    if (!canvasRef?.current || !context2D) {
      return
    }
    isMouseDown = true
  }

  const onMouseMove = (event: MouseEvent) => {
    if (!canvasRef?.current || !context2D) {
      return
    }
    if (isMouseDown) {
      const { clientX, clientY } = event
      if (movePoint) {
        /**
         * 在 0 到 360 的范围内, 逐步增加1, 但是当大于等于 360 时, 再回归为0
         */
        hue = hue < 360 ? hue + 1 : 0
        context2D.beginPath()
        // 通过 HSL 修改颜色
        context2D.strokeStyle = `hsl(${hue}, 90%, 50%)`
        context2D.moveTo(movePoint.x, movePoint.y)
        context2D.lineTo(clientX, clientY)
        context2D.stroke()
      }
      movePoint = {
        x: clientX,
        y: clientY
      }
    }
  }

  const onMouseUp = () => {
    if (!canvasRef?.current || !context2D) {
      return
    }
    isMouseDown = false
    movePoint = null
  }

  return (
    <div>
      <canvas
        ref={canvasRef}
        onMouseDown={onMouseDown}
        onMouseMove={onMouseMove}
        onMouseUp={onMouseUp}
      />
    </div>
  )
}

多形状画笔

  • 多形状画笔是会随着鼠标移动, 在移动路径上随机生成点位进行形状绘制, 效果如下

  • 实现方法, 通过每次鼠标移动的坐标, 在这个坐标的周围范围内随机生成几个点位, 然后在这些点位通过 new Path2D() 进行生成图形路径, 然后绘制
let isMouseDown = false

// 音乐符号形状路径
const musicPath = '***'

/**
 * 矩形内生成随机点位
 */
const generateRandomCoordinates = (
  centerX: number, // 矩形中心点 X
  centerY: number, // 矩形中心点 Y
  size: number, // 矩形大小
  count: number // 生成数量
) => {
  const halfSize = size / 2
  const points = []

  for (let i = 0; i < count; i++) {
    const randomX = Math.floor(centerX - halfSize + Math.random() * size)
    const randomY = Math.floor(centerY - halfSize + Math.random() * size)
    points.push({ x: randomX, y: randomY })
  }

  return points
}

function PaintBoard() {
  const canvasRef = useRef<HTMLCanvasElement | null>(null)
  const [context2D, setContext2D] = useState<CanvasRenderingContext2D | null>(null)

  useEffect(() => {
    if (canvasRef?.current) {
      const context2D = canvasRef?.current.getContext('2d')
      if (context2D) {
        context2D.fillStyle = '#000'
        setContext2D(context2D)
      }
    }
  }, [canvasRef])

  const onMouseDown = () => {
    if (!canvasRef?.current || !context2D) {
      return
    }
    isMouseDown = true
  }

  const onMouseMove = (event: MouseEvent) => {
    if (!canvasRef?.current || !context2D) {
      return
    }

    if (isMouseDown) {
      const { clientX, clientY } = event
      const points = generateRandomCoordinates(clientX, clientY, 30, 3)
      points.map((curPoint) => {
        createShape(curPoint.x, curPoint.y)
      })
    }
  }

  const createShape = (x: number, y: number) => {
    if (!context2D) {
      return
    }
    // 路径绘制
    const path = new Path2D(musicPath);
    context2D.beginPath();

    context2D.save();
    context2D.translate(x, y);

    // 形状随机缩放
    const scale = Math.random() * 1.5 + 0.5
    context2D.scale(scale, scale);

    context2D.fill(path);
    context2D.restore();
  }

  const onMouseUp = () => {
    if (!canvasRef?.current || !context2D) {
      return
    }
    isMouseDown = false
    moveDate = 0
  }

  return (
    <div>
      <canvas
        ref={canvasRef}
        onMouseDown={onMouseDown}
        onMouseMove={onMouseMove}
        onMouseUp={onMouseUp}
      />
    </div>
  )
}

素材画笔

  • 素材画笔效果如下

  • 素材画笔首先是需要一张透明的素材图, 这个图作为底图, 如果你用蜡笔材质的图片, 就会有蜡笔效果, 如果你用磨砂材质的图片, 就会有磨砂效果
  • 然后 strokeStyle 属性可以接收一个 CanvasPattern 对象, 详情可看 MDN
  • 我们可以新建一个 canvas, 然后对这个 canvas 绘制一张素材图片, 再绘制一个你需要的颜色, 最后通过这个 canvas 创建一个 pattern 赋值到 strokeStyle 就可以出现素材画笔的效果
let isMouseDown = false
let movePoint: { x: number, y: number } | null = null

// 加载所需素材图
const materialImage = new Promise<HTMLImageElement>((resolve) => {
  const image = new Image()
  image.src = '素材图地址'
  image.onload = () => {
    resolve(image)
  }
})

/**
 * 获取 pattern 对象
 * @param color 需要生成的颜色
 */
const getPattern = async (color: string) => {
  const canvas = document.createElement('canvas')
  const context = canvas.getContext('2d') as CanvasRenderingContext2D
  canvas.width = 100
  canvas.height = 100
  context.fillStyle = color

  // 绘制一个矩形作为底色
  context.fillRect(0, 0, 100, 100)
  const image = await materialImage

  // 绘制素材图
  if (image) {
    context.drawImage(image, 0, 0, 100, 100)
  }
  return context.createPattern(canvas, 'repeat')
}

function PaintBoard() {
  const canvasRef = useRef<HTMLCanvasElement | null>(null)
  const [context2D, setContext2D] = useState<CanvasRenderingContext2D | null>(null)

  useEffect(() => {
    initDraw()
  }, [canvasRef])

  const initDraw = async () => {
    if (canvasRef?.current) {
      const context2D = canvasRef?.current.getContext('2d')
      if (context2D) {
        context2D.lineCap = 'round'
        context2D.lineJoin = 'round'
        context2D.lineWidth = 10
        // 获取 pattern 素材
        const pattern = await getPattern('blue')
        if (pattern) {
          context2D.strokeStyle = pattern
        }
        setContext2D(context2D)
      }
    }
  }

  const onMouseDown = () => {
    if (!canvasRef?.current || !context2D) {
      return
    }
    isMouseDown = true
  }

  const onMouseMove = (event: MouseEvent) => {
    if (!canvasRef?.current || !context2D) {
      return
    }
    if (isMouseDown) {
      const { clientX, clientY } = event
      if (movePoint) {
        // 画笔绘制
        context2D.beginPath()
        context2D.moveTo(movePoint.x, movePoint.y)
        context2D.lineTo(clientX, clientY)
        context2D.stroke()
      }
      movePoint = {
        x: clientX,
        y: clientY
      }
    }
  }

  const onMouseUp = () => {
    if (!canvasRef?.current || !context2D) {
      return
    }
    isMouseDown = false
    movePoint = null
  }

  return (
    <div>
      <canvas
        ref={canvasRef}
        onMouseDown={onMouseDown}
        onMouseMove={onMouseMove}
        onMouseUp={onMouseUp}
      />
    </div>
  )
}

像素画笔

  • 像素画笔效果如下

  • 像素画笔是通过鼠标移动, 在鼠标移动路径上, 随机根据点位进行矩形绘制, 多个矩形组合起来就有一种类似像素点的效果
let isMouseDown = false
const drawWidth = 15 // 像素画笔大小
const step = 5 // 每个像素点大小

function PaintBoard() {
  const canvasRef = useRef<HTMLCanvasElement | null>(null)
  const [context2D, setContext2D] = useState<CanvasRenderingContext2D | null>(null)

  useEffect(() => {
    if (canvasRef?.current) {
      const context2D = canvasRef?.current.getContext('2d')
      if (context2D) {
        context2D.fillStyle = '#000';
        setContext2D(context2D)
      }
    }
  }, [canvasRef])

  const onMouseDown = () => {
    if (!canvasRef?.current || !context2D) {
      return
    }
    isMouseDown = true
  }

  const onMouseMove = (event: MouseEvent) => {
    if (!canvasRef?.current || !context2D) {
      return
    }

    if (isMouseDown) {
      const { clientX, clientY } = event
      
      /**
       * 遍历当前像素画笔大小, 根据随机数判断是否绘制
       */
      for (let i = -drawWidth; i < drawWidth; i += step) {
        for (let j = -drawWidth; j < drawWidth; j += step) {
          if (Math.random() > 0.5) {
            context2D.save();
            context2D.fillRect(clientX + i, clientY + j, step, step);
            context2D.fill();
            context2D.restore();
          }
        }
      }
    }
  }

  const onMouseUp = () => {
    if (!canvasRef?.current || !context2D) {
      return
    }
    isMouseDown = false
  }

  return (
    <div>
      <canvas
        ref={canvasRef}
        onMouseDown={onMouseDown}
        onMouseMove={onMouseMove}
        onMouseUp={onMouseUp}
      />
    </div>
  )
}

总结

感谢你的阅读。以上就是本文的全部内容，希望这篇文章对你有所帮助，欢迎点赞和收藏。如果有任何问题，欢迎在评论区进行讨论

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

抖音24年4月16新规发布，“有效粉丝”少于500无法带货！

抖音24年4月16新规发布，“有效粉丝”少于500无法带货！

我是王路飞。 2024年4月16日&#xff0c;抖音发布了堪称今年“最严新规”。 调整了个人号视频/图文电商带货权限&#xff0c;个人号开通视频/图文的商品推广要求&#xff0c;粉丝要求从“粉丝量>1000”调整为"有效粉丝量>500"。 看似对粉丝数量的要求减少了…
阅读更多...
Dynamics 365: 给D365设置一个黑色主题

Dynamics 365: 给D365设置一个黑色主题

在领英上看到一个好玩的东西&#xff0c;给D365可以设置暗黑的主题&#xff0c;但是这个目前我试了一下&#xff0c;仍然需要适配&#xff0c;很多地方显示的还是白色的&#xff0c;比如dashbaord里。 具体设置方法&#xff1a; 1. 设置你的D365为New Look新外观 2. 在D365的…
阅读更多...
van-uploader 在app内嵌的webview中的一些坑

van-uploader 在app内嵌的webview中的一些坑

问题&#xff1a; 部分版本在ios 中没有问题&#xff0c;但是安卓中不触发图片选择和拍照&#xff08;之前是可以的&#xff0c;可能是没有锁定版本&#xff0c;重新发版导致的&#xff09;。在ios中下拉文案是英文&#xff0c;html配置lang等于 zh 也没有用&#xff0c;ios里…
阅读更多...
护眼灯什么价位的好？五款性价比高的学生用台灯推荐！

护眼灯什么价位的好？五款性价比高的学生用台灯推荐！

在为学生选择护眼灯时&#xff0c;价格与性价比常常是家长们考虑的重点。价格并非唯一标准&#xff0c;但合适的价位确实能够让我们找到性价比高的产品。今天&#xff0c;我将为大家推荐五款特别适合学生使用的台灯&#xff0c;它们不仅价格适中&#xff0c;而且性能优越&#…
阅读更多...
Windows电脑使用Everything+cpolar搭建在线资料库并实现无公网IP管理文件

Windows电脑使用Everything+cpolar搭建在线资料库并实现无公网IP管理文件

文章目录 推荐前言1.软件安装完成后&#xff0c;打开Everything2.登录cpolar官网 设置空白数据隧道3.将空白数据隧道与本地Everything软件结合起来总结 推荐 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家…
阅读更多...
【办公类-21-15】 20240410三级育婴师 712道单选题（题目与答案合并word）

【办公类-21-15】 20240410三级育婴师 712道单选题（题目与答案合并word）

作品展示 背景需求&#xff1a; 前文将APP题库里的育婴师题目下载到EXCEL&#xff0c;并进行手动整理 【办公类-21-13】 2024045三级育婴师 721道单选题 UIBOT下载整理-CSDN博客文章浏览阅读451次&#xff0c;点赞10次&#xff0c;收藏3次。【办公类-21-13】 2024045三级育婴…
阅读更多...
【学习】软件信创测试中，如何做好兼容性适配

【学习】软件信创测试中，如何做好兼容性适配

在软件信创测试的领域中&#xff0c;兼容性适配是至关重要的一环。如何确保软件在不同的操作系统、硬件设备和软件环境中稳定运行&#xff0c;是每个测试人员需要面对的挑战。本文将从几个方面探讨如何做好兼容性适配&#xff0c;以提高软件的稳定性和用户体验。 首先&#xf…
阅读更多...
STM32学习和实践笔记（12）:蜂鸣器实验

STM32学习和实践笔记（12）:蜂鸣器实验

蜂鸣器主要分为两种&#xff0c;一种是压电式的无源蜂鸣器&#xff0c;一种是电磁式的有源蜂鸣器。 有源和无源是指其内部有没有振荡器。 无源的没有内部振荡器&#xff0c;需要输入1.5-5KHZ的音频信号来驱动压电蜂鸣片发声。 有源的内部有振荡器&#xff0c;因此只需要供给…
阅读更多...
真实用户见证：爱校对——让您的文字更准确，工作更轻松

真实用户见证：爱校对——让您的文字更准确，工作更轻松

在快节奏的工作和学习中&#xff0c;精确无误的文字输出显得尤为重要。爱校对&#xff0c;一款依托清华大学计算机智能人机交互实验室的技术成果开发的校对工具&#xff0c;旨在帮助用户提升文字质量&#xff0c;确保沟通无误。 主体&#xff1a; 核心技术&#xff1a;爱校对…
阅读更多...
COOH-Dextran羧基功能化葡聚糖 水凝胶药物载体

COOH-Dextran羧基功能化葡聚糖 水凝胶药物载体

COOH-Dextran羧基功能化葡聚糖 水凝胶药物载体 【中文名称】羧基化葡聚糖 【英文名称】Dextran-COOH 【分 子 量】2K/3k/5K/10K/20K/40K/70K/100K/200k/400k/500k/1000k...... 【结 构 式】 【品 牌】碳水科技&#xff08;Tanshtech&#xff09; 【纯 度】95%以上 【…
阅读更多...
【40分钟速成智能风控16】模型训练

【40分钟速成智能风控16】模型训练

目录 ​编辑 模型训练 逻辑回归 XGBoost Wide&Deep 模型部署 模型训练 确定了最终的入模变量&#xff0c;终于进入模型训练的环节了&#xff0c;在这个环节我们需要选定模型结构&#xff0c;调节模型超参数&#xff0c;以及评估模型的效果。为了得到一个兼具区分度和…
阅读更多...
MySQL学习笔记3——条件查询和聚合函数

MySQL学习笔记3——条件查询和聚合函数

条件查询和聚合函数 一、条件查询语句二、聚合函数1、SUM&#xff08;&#xff09;2、AVG()、MAX()、MIN()3、COUNT&#xff08;&#xff09; 一、条件查询语句 WHERE 和 HAVING 的区别&#xff1a; WHERE是直接对表中的字段进行限定&#xff0c;来筛选结果&#xff1b;HAVIN…
阅读更多...
相交链表（双指针）

相交链表（双指针）

160. 相交链表 - 力扣&#xff08;LeetCode&#xff09; 题目描述 给你两个单链表的头节点 headA 和 headB &#xff0c;请你找出并返回两个单链表相交的起始节点。如果两个链表不存在相交节点&#xff0c;返回 null 。 图示两个链表在节点 c1 开始相交&#xff1a; 题目数据…
阅读更多...
#猫咪养护机模块功能分析

#猫咪养护机模块功能分析

1.供电部分 AC转DC模块 220V交流转12V直流 系统的整体供电模块&#xff0c;可以直接接入220V交流电&#xff0c;并且输出12V直流电&#xff0c;12V直流电一方面供电给TB6600电机驱动板&#xff0c;一方面供电给PTC加热模块&#xff0c;还有一方面接入DCDC直流12转直流5V模块供…
阅读更多...
定制Pro版研究区底图，为你的SCI论文增色！

定制Pro版研究区底图，为你的SCI论文增色！

研究区图&#xff08;Research Area Map&#xff09;是一种用于可视化学术研究内容所处地理位置的图表。论文中的研究区图不仅需要准确传达地理和地质数据&#xff0c;还应当在视觉上具有吸引力&#xff0c;以便更好地引起读者的兴趣。经常在高影响力的SCI论文中看到一些非常美…
阅读更多...
半导体成品测试详述（Final Test，简称FT）

半导体成品测试详述（Final Test，简称FT）

00、FT的一些概念 半导体成品测试&#xff08;Final Test&#xff0c;简称FT&#xff09;是在芯片封装完成后进行的最后一个测试阶段&#xff0c;其目的是确保芯片在实际应用中的性能和可靠性。FT测试可以包括环境测试、老化测试和应用特定的性能测试。 FT测试主要是为了解决各…
阅读更多...
Stable Diffusion AI绘画宝典：从新手到高手，一图胜千言！

Stable Diffusion AI绘画宝典：从新手到高手，一图胜千言！

在这个数字化时代的浪潮中&#xff0c;人工智能技术以其惊人的创造力和创新性席卷全球。党的二十大报告把“实施科教兴国战略&#xff0c;强化现代化建设人才支撑”作为战略举措进行系统阐述&#xff0c;彰显我国不断发展新动能、新优势的决心和气魄。 Stable Diffusion是一款…
阅读更多...
淘宝天猫玩具销售数据可视化

淘宝天猫玩具销售数据可视化

目录 背景描述数据说明数据来源1. 导入模块2. 乐高淘宝数据分析及其可视化2.1 乐高淘宝数据概览2.2 乐高淘宝数据处理2.3 乐高销量排名淘宝店铺Top502.4 乐高产地数量排名top502.5 天猫乐高价格分布2.6 不同价格区间的销售额整体表现分布2.7 淘宝乐高标题词云图 3. 乐高天猫旗舰…
阅读更多...
06-java面向对象（中）封装与继承

06-java面向对象（中）封装与继承

6.1 封装 6.1.1 封装概述 1、为什么需要封装&#xff1f; 适当的封装可以让代码更容易理解与维护&#xff0c;也加强了代码的安全性。 通俗的讲&#xff0c;把该隐藏的隐藏起来&#xff0c;该暴露的暴露出来。这就是封装性的设计思想。 随着我们系统越来越复杂&#xff0c;…
阅读更多...
SQL数据库管理开发工具：DataGrip 2024(win/mac)激活版

SQL数据库管理开发工具：DataGrip 2024(win/mac)激活版

JetBrains DataGrip是一款专业的SQL数据库管理开发工具。DataGrip允许您以不同的方式发展模式以及执行信息查询&#xff0c;并提供服务本地文化历史问题记录&#xff0c;可以提高跟踪您的所有学生活动并保护如果您不选择丢失您的工作。DataGrip允许您通过建立相应的操作按名称就…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站