Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
April 19, 2024 09:10 am GMT

Exploring the Canvas Series: Creative Brushes Part 2

Introduction

I am currently developing a powerful open source creative drawing board. This drawing board contains a variety of creative brushes, which allows users to experience a new drawing effect. Whether on mobile or PC , you can enjoy a better interactive experience and effect display . And this project has many powerful auxiliary painting functions, including but not limited to forward and backward, copy and delete, upload and download, multiple boards and layers and so on. I'm not going to list all the detailed features, looking forward to your exploration.

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

Github: https://github.com/LHRUN/paint-board Welcome to Star

preview

In the gradual development of the project, I plan to write some articles, on the one hand, to record the technical details, which is my habit all the time. On the other hand, I'd like to promote the project, and I hope to get your use and feedback, and of course, a Star would be my greatest support.

I'm going to explain the implementation of the Creative Brush in 3 articles, this is the second one, and I'll upload all the source code to my Github.

Github Source Code Demo

Multi Colour Brush

  • The multicolour brush effect is as follows

multiColor

  • Multi-colour brushes are similar to material brushes in that they receive a CanvasPattern object via strokeStyle.
  • We can create a new canvas, then draw the effect you want on this canvas, and finally create a pattern from this canvas and assign it to the strokeStyle to get a multicolour brush effect.
import { useEffect, useRef, useState, MouseEvent } from 'react'import './index.css'let isMouseDown = falselet movePoint: { x: number, y: number } | null = nullconst COLOR_WIDTH = 5 // width of each colour/** * get multicolour brush pattern * @param colors Colour array, colours to be painted */const getPattern = async (colors: string[]) => {  const canvas = document.createElement('canvas')  const context = canvas.getContext('2d') as CanvasRenderingContext2D  renderRow(canvas, context, colors)  return context.createPattern(canvas, 'repeat')}/** * row effect drawing */const renderRow = (  canvas: HTMLCanvasElement,  context: CanvasRenderingContext2D,  colors: string[]) => {  canvas.width = 20  canvas.height = colors.length * COLOR_WIDTH  colors.forEach((color, i) => {    context.fillStyle = color    context.fillRect(0, COLOR_WIDTH * i, 20, COLOR_WIDTH)  })}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        // Assigns a value to strokeStyle based on the generated pattern        const pattern = await getPattern(['blue', 'red', 'black'])        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>  )}

Text Brush

  • The text brush will follow the mouse movement to draw the text, the effect is as follows

text

  • The text brush is drawn in three steps:
    • 1. The distance between the two moves is the distance, then the width of the text is determined by measureText, if the distance is greater than the width of the text, then it can be drawn.
    • 2. Then we take the vector of the two points, get the angle according to Math.atan2, and draw the current text according to this angle.
    • 3. Finally, update the track coordinates, while drawing the text coordinates to the next one, and start again if the drawing is finished.
interface Point {  x: number  y: number}let isMouseDown = falselet movePoint: Point = { x: 0, y: 0 }let counter = 0 // currently drawing textconst textValue = 'PaintBoard' // Drawing text contentconst minFontSize = 5 // min fontsize/** * Get the distance between two points */const getDistance = (start: Point, end: Point) => {  return Math.sqrt(Math.pow(start.x - end.x, 2) + Math.pow(start.y - end.y, 2))}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 = (event: MouseEvent) => {    if (!canvasRef?.current || !context2D) {      return    }    isMouseDown = true    const { clientX, clientY } = event    movePoint = {      x: clientX,      y: clientY    }  }  const onMouseMove = (event: MouseEvent) => {    if (!canvasRef?.current || !context2D) {      return    }    if (isMouseDown) {      const { clientX, clientY } = event      // Get the distance between two points      const distance = getDistance(movePoint, { x: clientX, y: clientY })      const fontSize = minFontSize + distance      const letter = textValue[counter]      context2D.font = `${fontSize}px Georgia`      // Get text width      const textWidth = context2D.measureText(letter).width      if (distance > textWidth) {        // Calculate the current movement angle        const angle = Math.atan2(clientY - movePoint.y, clientX - movePoint.x)        context2D.save();        context2D.translate(movePoint.x, movePoint.y)        context2D.rotate(angle);        context2D.fillText(letter, 0, 0);        context2D.restore();        // Update the position of the text after drawing        movePoint = {          x: movePoint.x + Math.cos(angle) * textWidth,          y: movePoint.y + Math.sin(angle) * textWidth        }        // Update data        counter++        if (counter > textValue.length - 1) {          counter = 0        }      }    }  }  const onMouseUp = () => {    if (!canvasRef?.current || !context2D) {      return    }    isMouseDown = false    movePoint = { x: 0, y: 0 }  }  return (    <div>      <canvas        ref={canvasRef}        onMouseDown={onMouseDown}        onMouseMove={onMouseMove}        onMouseUp={onMouseUp}      />    </div>  )}

Multi Line Connection

  • The effect of multi-line connection is as follows:

multiLine

  • Multiline connectivity is the process of connecting previous trajectory points twice during normal plotting, and then adjusting the number of points or the number of points to be connected to achieve different effects.
interface Point {  x: number  y: number}let isMouseDown = falselet movePoints: Point[] = [] // Mouse movement track point recordingfunction 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 = 3        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 length = movePoints.length      if (length) {        // Normal line segment connection        context2D.beginPath()        context2D.moveTo(movePoints[length - 1].x, movePoints[length - 1].y)        context2D.lineTo(clientX, clientY)        context2D.stroke()        /**         * Linking of previous mouse points         * Currently, connections are made at intervals of 5 points, and the number of connections is 3.         */        if (length % 5 === 0) {          for (            let i = movePoints.length - 5, count = 0;            i >= 0 && count < 3;            i = i - 5, count++          ) {            context2D.save()            context2D.beginPath()            context2D.lineWidth = 1            context2D.moveTo(movePoints[length - 1].x, movePoints[length - 1].y)            context2D.lineTo(movePoints[i].x, movePoints[i].y)            context2D.stroke()            context2D.restore()          }        }      }      movePoints.push({        x: clientX,        y: clientY      })    }  }  const onMouseUp = () => {    if (!canvasRef?.current || !context2D) {      return    }    isMouseDown = false    movePoints = []  }  return (    <div>      <canvas        ref={canvasRef}        onMouseDown={onMouseDown}        onMouseMove={onMouseMove}        onMouseUp={onMouseUp}      />    </div>  )}

Reticulate Brush

  • The reticulate brush effect is as follows

reticulate

  • Reticulate brush is in the normal drawing process, will be traversed on the previous track points, if certain conditions are met, it will be judged as similar, and then the similar points for the second connection, multiple connections will achieve the effect of the net!
interface Point {  x: number  y: number}let isMouseDown = falselet movePoints: Point[] = [] // Mouse point recordingfunction 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 = 3        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 length = movePoints.length      if (length) {        // Normal Drawing Connection        context2D.beginPath()        context2D.moveTo(movePoints[length - 1].x, movePoints[length - 1].y)        context2D.lineTo(clientX, clientY)        context2D.stroke()        if (length % 2 === 0) {          const limitDistance = 1000          /**           * If dx * dx + dy * dy < 1000, then the two points are considered to be close, and the line is quadratically connected.           * limitDistance can be adjusted by yourself           */          for (let i = 0; i < length; i++) {            const dx = movePoints[i].x - movePoints[length - 1].x            const dy = movePoints[i].y - movePoints[length - 1].y            const d = dx * dx + dy * dy            if (d < limitDistance) {              context2D.save()              context2D.beginPath()              context2D.lineWidth = 1              context2D.moveTo(movePoints[length - 1].x, movePoints[length - 1].y)              context2D.lineTo(movePoints[i].x, movePoints[i].y)              context2D.stroke()              context2D.restore()            }          }        }      }      movePoints.push({        x: clientX,        y: clientY      })    }  }  const onMouseUp = () => {    if (!canvasRef?.current || !context2D) {      return    }    isMouseDown = false    movePoints = []  }  return (    <div>      <canvas        ref={canvasRef}        onMouseDown={onMouseDown}        onMouseMove={onMouseMove}        onMouseUp={onMouseUp}      />    </div>  )}

Conclusion

Thank you for reading. This is the whole content of this article, I hope this article is helpful to you, welcome to like and favourite. If you have any questions, please feel free to discuss in the comment section!


Original Link: https://dev.to/leo_song/exploring-the-canvas-series-creative-brushes-part-2-amj

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To