canvas drawing for web
This commit is contained in:
Hailey
@@ -25,7 +25,7 @@ export const EmojiHeartEyes_Stroke2_Corner0_Rounded = createSinglePathSVG({
|
||||
path: emojiHeartEyesPath,
|
||||
})
|
||||
|
||||
const emojiSmilePath =
|
||||
export const emojiSmilePath =
|
||||
'M12 3a1 1 0 0 1 1 1v7h7a1 1 0 1 1 0 2h-7v7a1 1 0 1 1-2 0v-7H4a1 1 0 1 1 0-2h7V4a1 1 0 0 1 1-1Z'
|
||||
export const EmojiSmile_Stroke2_Corner0_Rounded = createSinglePathSVG({
|
||||
path: emojiSmilePath,
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
import {createSinglePathSVG} from './TEMPLATE'
|
||||
|
||||
export const path =
|
||||
'M12 2a1 1 0 0 1 .889.542l1.679 3.259 3.491-1.117a1 1 0 0 1 1.257 1.257L18.2 9.432l3.259 1.679a1 1 0 0 1 0 1.778l-3.124 1.61 2.609 5.098a1 1 0 0 1-1.346 1.346l-5.098-2.61-1.61 3.125a1 1 0 0 1-1.778 0l-1.679-3.259-3.491 1.117a1 1 0 0 1-1.257-1.257L5.8 14.568l-3.259-1.679a1 1 0 0 1 0-1.778l3.124-1.61-2.609-5.098a1 1 0 0 1 1.346-1.346l5.098 2.61-.455.89.455-.89 1.61-3.125A1 1 0 0 1 12 2Zm0 3.183-.72 1.4a2 2 0 0 1-2.69.864L6.248 6.248 7.447 8.59a2 2 0 0 1-.865 2.69L5.183 12l1.534.79a2 2 0 0 1 .989 2.387L7.18 16.82l1.643-.526a2 2 0 0 1 2.387.99l.79 1.533.72-1.4a2 2 0 0 1 2.69-.864l2.342 1.199-1.199-2.342a2 2 0 0 1 .864-2.69l1.4-.72-1.534-.79a2 2 0 0 1-.989-2.387l.526-1.643-1.643.526a2 2 0 0 1-2.387-.99L12 5.184Z'
|
||||
export const Explosion_Stroke2_Corner0_Rounded = createSinglePathSVG({
|
||||
path: 'M12 2a1 1 0 0 1 .889.542l1.679 3.259 3.491-1.117a1 1 0 0 1 1.257 1.257L18.2 9.432l3.259 1.679a1 1 0 0 1 0 1.778l-3.124 1.61 2.609 5.098a1 1 0 0 1-1.346 1.346l-5.098-2.61-1.61 3.125a1 1 0 0 1-1.778 0l-1.679-3.259-3.491 1.117a1 1 0 0 1-1.257-1.257L5.8 14.568l-3.259-1.679a1 1 0 0 1 0-1.778l3.124-1.61-2.609-5.098a1 1 0 0 1 1.346-1.346l5.098 2.61-.455.89.455-.89 1.61-3.125A1 1 0 0 1 12 2Zm0 3.183-.72 1.4a2 2 0 0 1-2.69.864L6.248 6.248 7.447 8.59a2 2 0 0 1-.865 2.69L5.183 12l1.534.79a2 2 0 0 1 .989 2.387L7.18 16.82l1.643-.526a2 2 0 0 1 2.387.99l.79 1.533.72-1.4a2 2 0 0 1 2.69-.864l2.342 1.199-1.199-2.342a2 2 0 0 1 .864-2.69l1.4-.72-1.534-.79a2 2 0 0 1-.989-2.387l.526-1.643-1.643.526a2 2 0 0 1-2.387-.99L12 5.184Z',
|
||||
path,
|
||||
})
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React from 'react'
|
||||
import {Pressable, StyleSheet, Text} from 'react-native'
|
||||
import {Pressable, StyleSheet} from 'react-native'
|
||||
import {Camera_Stroke2_Corner0_Rounded as Camera} from '#/components/icons/Camera'
|
||||
import {useAvatar, useSetAvatar} from '#/screens/Onboarding/StepProfile/index'
|
||||
import {useTheme} from '#/alf'
|
||||
@@ -57,20 +57,24 @@ export function SelectImageButton() {
|
||||
function Canvas() {
|
||||
const avatar = useAvatar()
|
||||
const canvasRef = React.useRef<HTMLCanvasElement>(null)
|
||||
React.useEffect(() => {}, [])
|
||||
|
||||
return (
|
||||
<canvas
|
||||
ref={canvasRef}
|
||||
height={1000}
|
||||
width={1000}
|
||||
style={{
|
||||
backgroundColor: avatar.backgroundColor,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
/>
|
||||
)
|
||||
React.useEffect(() => {
|
||||
// @ts-ignore web only
|
||||
const path = new Path2D(avatar.placeholder.path)
|
||||
// @ts-ignore web only
|
||||
const ctx = canvasRef.current?.getContext('2d')
|
||||
ctx?.reset()
|
||||
ctx.fillStyle = avatar.backgroundColor
|
||||
ctx?.moveTo(0, 0)
|
||||
ctx?.fillRect(0, 0, 24 * 10, 24 * 10)
|
||||
ctx.fillStyle = '#fff'
|
||||
ctx.lineWidth = 0.1
|
||||
ctx?.translate(24 * 1.5, 24 * 1.5)
|
||||
ctx?.scale(7, 7)
|
||||
ctx?.fill(path)
|
||||
}, [avatar.backgroundColor, avatar.placeholder.path])
|
||||
|
||||
return <canvas ref={canvasRef} height={24 * 10} width={24 * 10} />
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
|
||||
@@ -4,15 +4,38 @@ import {
|
||||
EmojiAlt_Stroke2_Corner0_Rounded as EmojiAlt,
|
||||
EmojiArc_Stroke2_Corner0_Rounded as EmojiArc,
|
||||
EmojiHeartEyes_Stroke2_Corner0_Rounded as EmojiHeartEyes,
|
||||
emojiSmilePath,
|
||||
emojiSadPath,
|
||||
emojiAltPath,
|
||||
emojiArcPath,
|
||||
emojiHeartEyesPath,
|
||||
} from '#/components/icons/Emoji'
|
||||
import {Alien_Stroke2_Corner0_Rounded as Alien} from '#/components/icons/Alien'
|
||||
import {Bubbles_Stroke2_Corner0_Rounded as Bubbles} from '#/components/icons/Bubbles'
|
||||
import {Explosion_Stroke2_Corner0_Rounded as Explosion} from '#/components/icons/Explosion'
|
||||
import {Lab_Stroke2_Corner0_Rounded as Lab} from '#/components/icons/Lab'
|
||||
import {PiggyBank_Stroke2_Corner0_Rounded as PiggyBank} from '#/components/icons/PiggyBank'
|
||||
import {Poop_Stroke2_Corner0_Rounded as Poop} from '#/components/icons/Poop'
|
||||
import {
|
||||
Alien_Stroke2_Corner0_Rounded as Alien,
|
||||
path as alienPath,
|
||||
} from '#/components/icons/Alien'
|
||||
import {
|
||||
Bubbles_Stroke2_Corner0_Rounded as Bubbles,
|
||||
path as bubblesPath,
|
||||
} from '#/components/icons/Bubbles'
|
||||
import {
|
||||
Explosion_Stroke2_Corner0_Rounded as Explosion,
|
||||
path as explosionPath,
|
||||
} from '#/components/icons/Explosion'
|
||||
import {
|
||||
Lab_Stroke2_Corner0_Rounded as Lab,
|
||||
path as labPath,
|
||||
} from '#/components/icons/Lab'
|
||||
import {
|
||||
PiggyBank_Stroke2_Corner0_Rounded as PiggyBank,
|
||||
path as piggyBankPath,
|
||||
} from '#/components/icons/PiggyBank'
|
||||
import {
|
||||
Poop_Stroke2_Corner0_Rounded as Poop,
|
||||
path as poopPath,
|
||||
} from '#/components/icons/Poop'
|
||||
|
||||
export const emojis = [
|
||||
export const emojiNames = [
|
||||
'camera',
|
||||
'smile',
|
||||
'sad',
|
||||
@@ -26,17 +49,68 @@ export const emojis = [
|
||||
'piggyBank',
|
||||
'poop',
|
||||
] as const
|
||||
export type Emoji = (typeof emojis)[number]
|
||||
export const emojiItems: Record<Emoji, typeof EmojiSmile> = {
|
||||
smile: EmojiSmile,
|
||||
sad: EmojiSad,
|
||||
alt: EmojiAlt,
|
||||
arc: EmojiArc,
|
||||
heartEyes: EmojiHeartEyes,
|
||||
alien: Alien,
|
||||
bubbles: Bubbles,
|
||||
explosion: Explosion,
|
||||
lab: Lab,
|
||||
piggyBank: PiggyBank,
|
||||
poop: Poop,
|
||||
export type EmojiName = (typeof emojiNames)[number]
|
||||
|
||||
export interface Emoji {
|
||||
name: EmojiName
|
||||
component: typeof EmojiSmile
|
||||
path: string
|
||||
}
|
||||
export const emojiItems: Record<EmojiName, Emoji> = {
|
||||
camera: {},
|
||||
smile: {
|
||||
name: 'smile',
|
||||
component: EmojiSmile,
|
||||
path: emojiSmilePath,
|
||||
},
|
||||
sad: {
|
||||
name: 'sad',
|
||||
component: EmojiSad,
|
||||
path: emojiSadPath,
|
||||
},
|
||||
alt: {
|
||||
name: 'alt',
|
||||
component: EmojiAlt,
|
||||
path: emojiAltPath,
|
||||
},
|
||||
arc: {
|
||||
name: 'arc',
|
||||
component: EmojiArc,
|
||||
path: emojiArcPath,
|
||||
},
|
||||
heartEyes: {
|
||||
name: 'heartEyes',
|
||||
component: EmojiHeartEyes,
|
||||
path: emojiHeartEyesPath,
|
||||
},
|
||||
alien: {
|
||||
name: 'alien',
|
||||
component: Alien,
|
||||
path: alienPath,
|
||||
},
|
||||
bubbles: {
|
||||
name: 'bubbles',
|
||||
component: Bubbles,
|
||||
path: bubblesPath,
|
||||
},
|
||||
explosion: {
|
||||
name: 'explosion',
|
||||
component: Explosion,
|
||||
path: explosionPath,
|
||||
},
|
||||
lab: {
|
||||
name: 'lab',
|
||||
component: Lab,
|
||||
path: labPath,
|
||||
},
|
||||
piggyBank: {
|
||||
name: 'piggyBank',
|
||||
component: PiggyBank,
|
||||
path: piggyBankPath,
|
||||
},
|
||||
poop: {
|
||||
name: 'poop',
|
||||
component: Poop,
|
||||
path: poopPath,
|
||||
},
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user