svg生成器
This commit is contained in:
parent
cdb9cc29f4
commit
014aec6757
16
rust/svg/Cargo.toml
Normal file
16
rust/svg/Cargo.toml
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
[package]
|
||||||
|
name = "font-to-svg"
|
||||||
|
version = "0.1.0"
|
||||||
|
edition = "2021"
|
||||||
|
|
||||||
|
[lib]
|
||||||
|
crate-type = ["cdylib"]
|
||||||
|
|
||||||
|
[dependencies]
|
||||||
|
wasm-bindgen = "0.2"
|
||||||
|
js-sys = "0.3"
|
||||||
|
ttf-parser = "0.25.1"
|
||||||
|
svg = "0.18.0"
|
||||||
|
web-sys = { version = "0.3", features = ["console"] }
|
||||||
|
base64 = "0.22.1"
|
||||||
|
console_error_panic_hook = "0.1.7"
|
||||||
28
rust/svg/eslint.config.js
Normal file
28
rust/svg/eslint.config.js
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
import js from '@eslint/js'
|
||||||
|
import globals from 'globals'
|
||||||
|
import reactHooks from 'eslint-plugin-react-hooks'
|
||||||
|
import reactRefresh from 'eslint-plugin-react-refresh'
|
||||||
|
import tseslint from 'typescript-eslint'
|
||||||
|
|
||||||
|
export default tseslint.config(
|
||||||
|
{ ignores: ['dist'] },
|
||||||
|
{
|
||||||
|
extends: [js.configs.recommended, ...tseslint.configs.recommended],
|
||||||
|
files: ['**/*.{ts,tsx}'],
|
||||||
|
languageOptions: {
|
||||||
|
ecmaVersion: 2020,
|
||||||
|
globals: globals.browser,
|
||||||
|
},
|
||||||
|
plugins: {
|
||||||
|
'react-hooks': reactHooks,
|
||||||
|
'react-refresh': reactRefresh,
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
...reactHooks.configs.recommended.rules,
|
||||||
|
'react-refresh/only-export-components': [
|
||||||
|
'warn',
|
||||||
|
{ allowConstantExport: true },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
)
|
||||||
13
rust/svg/index.html
Normal file
13
rust/svg/index.html
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Vite + React + TS</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
29
rust/svg/package.json
Normal file
29
rust/svg/package.json
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
{
|
||||||
|
"name": "svg",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "tsc -b && vite build",
|
||||||
|
"lint": "eslint .",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"react": "^18.3.1",
|
||||||
|
"react-dom": "^18.3.1"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@eslint/js": "^9.15.0",
|
||||||
|
"@types/react": "^18.3.12",
|
||||||
|
"@types/react-dom": "^18.3.1",
|
||||||
|
"@vitejs/plugin-react": "^4.3.4",
|
||||||
|
"eslint": "^9.15.0",
|
||||||
|
"eslint-plugin-react-hooks": "^5.0.0",
|
||||||
|
"eslint-plugin-react-refresh": "^0.4.14",
|
||||||
|
"globals": "^15.12.0",
|
||||||
|
"typescript": "~5.6.2",
|
||||||
|
"typescript-eslint": "^8.15.0",
|
||||||
|
"vite": "^6.0.1"
|
||||||
|
}
|
||||||
|
}
|
||||||
287
rust/svg/src/App.css
Normal file
287
rust/svg/src/App.css
Normal file
@ -0,0 +1,287 @@
|
|||||||
|
#root {
|
||||||
|
max-width: 1280px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 2rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
height: 6em;
|
||||||
|
padding: 1.5em;
|
||||||
|
will-change: filter;
|
||||||
|
transition: filter 300ms;
|
||||||
|
}
|
||||||
|
.logo:hover {
|
||||||
|
filter: drop-shadow(0 0 2em #646cffaa);
|
||||||
|
}
|
||||||
|
.logo.react:hover {
|
||||||
|
filter: drop-shadow(0 0 2em #61dafbaa);
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes logo-spin {
|
||||||
|
from {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: no-preference) {
|
||||||
|
a:nth-of-type(2) .logo {
|
||||||
|
animation: logo-spin infinite 20s linear;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
padding: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.read-the-docs {
|
||||||
|
color: #888;
|
||||||
|
}
|
||||||
|
|
||||||
|
.App {
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-group {
|
||||||
|
margin: 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-group input {
|
||||||
|
margin: 10px 0;
|
||||||
|
padding: 8px;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
background-color: #4CAF50;
|
||||||
|
border: none;
|
||||||
|
color: white;
|
||||||
|
padding: 15px 32px;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 16px;
|
||||||
|
margin: 4px 2px;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button:disabled {
|
||||||
|
background-color: #cccccc;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.svg-preview {
|
||||||
|
margin-top: 20px;
|
||||||
|
padding: 20px;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.svg-preview svg {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
min-height: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 深色模式支持 */
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
.svg-preview {
|
||||||
|
background: #1a1a1a;
|
||||||
|
border-color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.svg-preview svg {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.error {
|
||||||
|
color: red;
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-group {
|
||||||
|
margin: 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-group label {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-group input {
|
||||||
|
width: 100%;
|
||||||
|
padding: 8px;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading {
|
||||||
|
text-align: center;
|
||||||
|
padding: 20px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.svg-preview {
|
||||||
|
margin-top: 20px;
|
||||||
|
padding: 20px;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.svg-preview h3 {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.convert-button {
|
||||||
|
background-color: #4CAF50;
|
||||||
|
border: none;
|
||||||
|
color: white;
|
||||||
|
padding: 12px 24px;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 16px;
|
||||||
|
margin: 20px 0;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 4px;
|
||||||
|
transition: background-color 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.convert-button:hover {
|
||||||
|
background-color: #45a049;
|
||||||
|
}
|
||||||
|
|
||||||
|
.convert-button:disabled {
|
||||||
|
background-color: #cccccc;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.download-button {
|
||||||
|
background-color: #2196F3;
|
||||||
|
border: none;
|
||||||
|
color: white;
|
||||||
|
padding: 12px 24px;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 16px;
|
||||||
|
margin: 10px 0;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 4px;
|
||||||
|
transition: background-color 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.download-button:hover {
|
||||||
|
background-color: #1976D2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-group {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-group .download-button {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.animated-text {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
min-height: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.animated-text path {
|
||||||
|
fill: transparent;
|
||||||
|
stroke: currentColor;
|
||||||
|
stroke-width: 2;
|
||||||
|
stroke-dashoffset: var(--path-length);
|
||||||
|
stroke-dasharray: var(--path-length) var(--path-length);
|
||||||
|
animation: logo-anim 15s cubic-bezier(0.4, 0, 0.2, 1) infinite;
|
||||||
|
transform-origin: center;
|
||||||
|
stroke-linecap: round;
|
||||||
|
stroke-linejoin: round;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes logo-anim {
|
||||||
|
0% {
|
||||||
|
stroke-dashoffset: var(--path-length);
|
||||||
|
stroke-dasharray: var(--path-length) var(--path-length);
|
||||||
|
opacity: 0;
|
||||||
|
fill: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
5% {
|
||||||
|
opacity: 1;
|
||||||
|
stroke-dashoffset: var(--path-length);
|
||||||
|
stroke-dasharray: var(--path-length) var(--path-length);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 慢速绘画过程 */
|
||||||
|
50% {
|
||||||
|
stroke-dashoffset: 0;
|
||||||
|
stroke-dasharray: var(--path-length) var(--path-length);
|
||||||
|
fill: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 慢慢填充效果 */
|
||||||
|
60% {
|
||||||
|
stroke-dashoffset: 0;
|
||||||
|
stroke-dasharray: var(--path-length) var(--path-length);
|
||||||
|
fill: currentColor;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 保持填充状态 */
|
||||||
|
75% {
|
||||||
|
stroke-dashoffset: 0;
|
||||||
|
stroke-dasharray: var(--path-length) var(--path-length);
|
||||||
|
fill: currentColor;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 变回线条 */
|
||||||
|
85% {
|
||||||
|
stroke-dashoffset: 0;
|
||||||
|
stroke-dasharray: var(--path-length) var(--path-length);
|
||||||
|
fill: transparent;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 线条消失 */
|
||||||
|
95% {
|
||||||
|
stroke-dashoffset: var(--path-length);
|
||||||
|
stroke-dasharray: var(--path-length) var(--path-length);
|
||||||
|
fill: transparent;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
stroke-dashoffset: var(--path-length);
|
||||||
|
stroke-dasharray: var(--path-length) var(--path-length);
|
||||||
|
fill: transparent;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 确保在暗色模式下的颜色正确 */
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
.animated-text path {
|
||||||
|
stroke: currentColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
226
rust/svg/src/App.tsx
Normal file
226
rust/svg/src/App.tsx
Normal file
@ -0,0 +1,226 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import './App.css';
|
||||||
|
|
||||||
|
const App: React.FC = () => {
|
||||||
|
const [text, setText] = useState('Hello World');
|
||||||
|
const [fontSize, setFontSize] = useState(100);
|
||||||
|
const [fontFile, setFontFile] = useState<File | null>(null);
|
||||||
|
const [svg, setSvg] = useState<string | null>(null);
|
||||||
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
|
|
||||||
|
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
if (e.target.files && e.target.files[0]) {
|
||||||
|
setFontFile(e.target.files[0]);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const generateSvg = async () => {
|
||||||
|
if (!fontFile) return;
|
||||||
|
|
||||||
|
setIsLoading(true);
|
||||||
|
try {
|
||||||
|
const wasm = await import('../pkg/font_to_svg');
|
||||||
|
await wasm.default();
|
||||||
|
wasm.init_panic_hook();
|
||||||
|
|
||||||
|
const arrayBuffer = await fontFile.arrayBuffer();
|
||||||
|
const fontHandler = new wasm.FontHandler(new Uint8Array(arrayBuffer));
|
||||||
|
const svgString = fontHandler.generate_svg(text, fontSize);
|
||||||
|
|
||||||
|
setSvg(svgString);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error generating SVG:', error);
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleConvert = () => {
|
||||||
|
if (fontFile) {
|
||||||
|
generateSvg();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDownload = () => {
|
||||||
|
if (svg) {
|
||||||
|
const blob = new Blob([svg], { type: 'image/svg+xml' });
|
||||||
|
const url = URL.createObjectURL(blob);
|
||||||
|
const a = document.createElement('a');
|
||||||
|
a.href = url;
|
||||||
|
a.download = `${text}.svg`;
|
||||||
|
document.body.appendChild(a);
|
||||||
|
a.click();
|
||||||
|
document.body.removeChild(a);
|
||||||
|
URL.revokeObjectURL(url);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDownloadCss = () => {
|
||||||
|
const animationCss = `
|
||||||
|
.animated-text {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.animated-text path {
|
||||||
|
fill: transparent;
|
||||||
|
stroke: currentColor;
|
||||||
|
stroke-width: 2;
|
||||||
|
stroke-dashoffset: var(--path-length);
|
||||||
|
stroke-dasharray: var(--path-length) var(--path-length);
|
||||||
|
animation: logo-anim 15s cubic-bezier(0.4, 0, 0.2, 1) infinite;
|
||||||
|
transform-origin: center;
|
||||||
|
stroke-linecap: round;
|
||||||
|
stroke-linejoin: round;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes logo-anim {
|
||||||
|
0% {
|
||||||
|
stroke-dashoffset: var(--path-length);
|
||||||
|
stroke-dasharray: var(--path-length) var(--path-length);
|
||||||
|
opacity: 0;
|
||||||
|
fill: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
5% {
|
||||||
|
opacity: 1;
|
||||||
|
stroke-dashoffset: var(--path-length);
|
||||||
|
stroke-dasharray: var(--path-length) var(--path-length);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 慢速绘画过程 */
|
||||||
|
50% {
|
||||||
|
stroke-dashoffset: 0;
|
||||||
|
stroke-dasharray: var(--path-length) var(--path-length);
|
||||||
|
fill: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 慢慢填充效果 */
|
||||||
|
60% {
|
||||||
|
stroke-dashoffset: 0;
|
||||||
|
stroke-dasharray: var(--path-length) var(--path-length);
|
||||||
|
fill: currentColor;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 保持填充状态 */
|
||||||
|
75% {
|
||||||
|
stroke-dashoffset: 0;
|
||||||
|
stroke-dasharray: var(--path-length) var(--path-length);
|
||||||
|
fill: currentColor;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 变回线条 */
|
||||||
|
85% {
|
||||||
|
stroke-dashoffset: 0;
|
||||||
|
stroke-dasharray: var(--path-length) var(--path-length);
|
||||||
|
fill: transparent;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 线条消失 */
|
||||||
|
95% {
|
||||||
|
stroke-dashoffset: var(--path-length);
|
||||||
|
stroke-dasharray: var(--path-length) var(--path-length);
|
||||||
|
fill: transparent;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
stroke-dashoffset: var(--path-length);
|
||||||
|
stroke-dasharray: var(--path-length) var(--path-length);
|
||||||
|
fill: transparent;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}`;
|
||||||
|
|
||||||
|
const blob = new Blob([animationCss], { type: 'text/css' });
|
||||||
|
const url = URL.createObjectURL(blob);
|
||||||
|
const a = document.createElement('a');
|
||||||
|
a.href = url;
|
||||||
|
a.download = `${text}-animation.css`;
|
||||||
|
document.body.appendChild(a);
|
||||||
|
a.click();
|
||||||
|
document.body.removeChild(a);
|
||||||
|
URL.revokeObjectURL(url);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="container">
|
||||||
|
<h1>字体 SVG 转换器</h1>
|
||||||
|
|
||||||
|
<div className="input-group">
|
||||||
|
<label>
|
||||||
|
选择字体文件 (TTF/OTF):
|
||||||
|
<input
|
||||||
|
type="file"
|
||||||
|
accept=".ttf,.otf"
|
||||||
|
onChange={handleFileChange}
|
||||||
|
disabled={isLoading}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="input-group">
|
||||||
|
<label>
|
||||||
|
输入文本:
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={text}
|
||||||
|
onChange={(e) => setText(e.target.value)}
|
||||||
|
disabled={isLoading}
|
||||||
|
placeholder="请输入要转换的文字"
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="input-group">
|
||||||
|
<label>
|
||||||
|
字体大小:
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
value={fontSize}
|
||||||
|
onChange={(e) => setFontSize(Number(e.target.value))}
|
||||||
|
min="8"
|
||||||
|
max="200"
|
||||||
|
disabled={isLoading}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
className="convert-button"
|
||||||
|
onClick={handleConvert}
|
||||||
|
disabled={!fontFile || isLoading}
|
||||||
|
>
|
||||||
|
{isLoading ? '转换中...' : '生成预览'}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{isLoading && <div className="loading">正在生成 SVG...</div>}
|
||||||
|
|
||||||
|
{svg && (
|
||||||
|
<div className="svg-preview">
|
||||||
|
<h3>预览:</h3>
|
||||||
|
<div dangerouslySetInnerHTML={{ __html: svg }} />
|
||||||
|
<div className="button-group">
|
||||||
|
<button
|
||||||
|
className="download-button"
|
||||||
|
onClick={handleDownload}
|
||||||
|
>
|
||||||
|
下载 SVG
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className="download-button"
|
||||||
|
onClick={handleDownloadCss}
|
||||||
|
>
|
||||||
|
下载动画 CSS
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default App;
|
||||||
26
rust/svg/src/index.css
Normal file
26
rust/svg/src/index.css
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
.App {
|
||||||
|
text-align: center;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
margin: 10px;
|
||||||
|
padding: 8px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
padding: 10px 20px;
|
||||||
|
font-size: 16px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:disabled {
|
||||||
|
background-color: #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
#svgContainer {
|
||||||
|
margin-top: 20px;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
245
rust/svg/src/lib.rs
Normal file
245
rust/svg/src/lib.rs
Normal file
@ -0,0 +1,245 @@
|
|||||||
|
// src/lib.rs
|
||||||
|
use wasm_bindgen::prelude::*;
|
||||||
|
use ttf_parser::{Face, GlyphId, OutlineBuilder};
|
||||||
|
use svg::Document;
|
||||||
|
use svg::node::element::{Path, Text, SVG};
|
||||||
|
use std::collections::HashMap;
|
||||||
|
use console_error_panic_hook;
|
||||||
|
|
||||||
|
struct PathBuilder {
|
||||||
|
path_data: String,
|
||||||
|
x_offset: f32,
|
||||||
|
y_offset: f32,
|
||||||
|
scale: f32,
|
||||||
|
path_length: f32,
|
||||||
|
current_x: f32,
|
||||||
|
current_y: f32,
|
||||||
|
min_x: f32,
|
||||||
|
max_x: f32,
|
||||||
|
min_y: f32,
|
||||||
|
max_y: f32,
|
||||||
|
}
|
||||||
|
|
||||||
|
impl PathBuilder {
|
||||||
|
fn new(x_offset: f32, y_offset: f32, scale: f32) -> Self {
|
||||||
|
PathBuilder {
|
||||||
|
path_data: String::new(),
|
||||||
|
x_offset,
|
||||||
|
y_offset,
|
||||||
|
scale,
|
||||||
|
path_length: 0.0,
|
||||||
|
current_x: 0.0,
|
||||||
|
current_y: 0.0,
|
||||||
|
min_x: f32::MAX,
|
||||||
|
max_x: f32::MIN,
|
||||||
|
min_y: f32::MAX,
|
||||||
|
max_y: f32::MIN,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
fn calculate_distance(&self, x1: f32, y1: f32, x2: f32, y2: f32) -> f32 {
|
||||||
|
let dx = x2 - x1;
|
||||||
|
let dy = y2 - y1;
|
||||||
|
(dx * dx + dy * dy).sqrt()
|
||||||
|
}
|
||||||
|
|
||||||
|
fn calculate_curve_length(&mut self, x1: f32, y1: f32, x2: f32, y2: f32, x: f32, y: f32) -> f32 {
|
||||||
|
let segments = 10;
|
||||||
|
let mut length = 0.0;
|
||||||
|
let mut prev_x = self.current_x;
|
||||||
|
let mut prev_y = self.current_y;
|
||||||
|
|
||||||
|
for i in 1..=segments {
|
||||||
|
let t = i as f32 / segments as f32;
|
||||||
|
let t2 = t * t;
|
||||||
|
let t3 = t2 * t;
|
||||||
|
let mt = 1.0 - t;
|
||||||
|
let mt2 = mt * mt;
|
||||||
|
let mt3 = mt2 * mt;
|
||||||
|
|
||||||
|
let x = mt3 * self.current_x + 3.0 * mt2 * t * x1 + 3.0 * mt * t2 * x2 + t3 * x;
|
||||||
|
let y = mt3 * self.current_y + 3.0 * mt2 * t * y1 + 3.0 * mt * t2 * y2 + t3 * y;
|
||||||
|
|
||||||
|
length += self.calculate_distance(prev_x, prev_y, x, y);
|
||||||
|
prev_x = x;
|
||||||
|
prev_y = y;
|
||||||
|
}
|
||||||
|
|
||||||
|
length
|
||||||
|
}
|
||||||
|
|
||||||
|
fn update_bounds(&mut self, x: f32, y: f32) {
|
||||||
|
self.min_x = self.min_x.min(x);
|
||||||
|
self.max_x = self.max_x.max(x);
|
||||||
|
self.min_y = self.min_y.min(y);
|
||||||
|
self.max_y = self.max_y.max(y);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
impl OutlineBuilder for PathBuilder {
|
||||||
|
fn move_to(&mut self, x: f32, y: f32) {
|
||||||
|
let scaled_x = x * self.scale + self.x_offset;
|
||||||
|
let scaled_y = self.y_offset - y * self.scale;
|
||||||
|
self.update_bounds(scaled_x, scaled_y);
|
||||||
|
self.path_data.push_str(&format!("M {} {} ", scaled_x, scaled_y));
|
||||||
|
self.current_x = scaled_x;
|
||||||
|
self.current_y = scaled_y;
|
||||||
|
}
|
||||||
|
|
||||||
|
fn line_to(&mut self, x: f32, y: f32) {
|
||||||
|
let scaled_x = x * self.scale + self.x_offset;
|
||||||
|
let scaled_y = self.y_offset - y * self.scale;
|
||||||
|
self.update_bounds(scaled_x, scaled_y);
|
||||||
|
let length = self.calculate_distance(self.current_x, self.current_y, scaled_x, scaled_y);
|
||||||
|
self.path_length += length;
|
||||||
|
self.path_data.push_str(&format!("L {} {} ", scaled_x, scaled_y));
|
||||||
|
self.current_x = scaled_x;
|
||||||
|
self.current_y = scaled_y;
|
||||||
|
}
|
||||||
|
|
||||||
|
fn quad_to(&mut self, x1: f32, y1: f32, x: f32, y: f32) {
|
||||||
|
let scaled_x1 = x1 * self.scale + self.x_offset;
|
||||||
|
let scaled_y1 = self.y_offset - y1 * self.scale;
|
||||||
|
let scaled_x = x * self.scale + self.x_offset;
|
||||||
|
let scaled_y = self.y_offset - y * self.scale;
|
||||||
|
self.update_bounds(scaled_x1, scaled_y1);
|
||||||
|
self.update_bounds(scaled_x, scaled_y);
|
||||||
|
|
||||||
|
let length = self.calculate_distance(self.current_x, self.current_y, scaled_x1, scaled_y1) +
|
||||||
|
self.calculate_distance(scaled_x1, scaled_y1, scaled_x, scaled_y);
|
||||||
|
self.path_length += length;
|
||||||
|
|
||||||
|
self.path_data.push_str(&format!("Q {} {} {} {} ", scaled_x1, scaled_y1, scaled_x, scaled_y));
|
||||||
|
self.current_x = scaled_x;
|
||||||
|
self.current_y = scaled_y;
|
||||||
|
}
|
||||||
|
|
||||||
|
fn curve_to(&mut self, x1: f32, y1: f32, x2: f32, y2: f32, x: f32, y: f32) {
|
||||||
|
let scaled_x1 = x1 * self.scale + self.x_offset;
|
||||||
|
let scaled_y1 = self.y_offset - y1 * self.scale;
|
||||||
|
let scaled_x2 = x2 * self.scale + self.x_offset;
|
||||||
|
let scaled_y2 = self.y_offset - y2 * self.scale;
|
||||||
|
let scaled_x = x * self.scale + self.x_offset;
|
||||||
|
let scaled_y = self.y_offset - y * self.scale;
|
||||||
|
self.update_bounds(scaled_x1, scaled_y1);
|
||||||
|
self.update_bounds(scaled_x2, scaled_y2);
|
||||||
|
self.update_bounds(scaled_x, scaled_y);
|
||||||
|
|
||||||
|
let length = self.calculate_curve_length(scaled_x1, scaled_y1, scaled_x2, scaled_y2, scaled_x, scaled_y);
|
||||||
|
self.path_length += length;
|
||||||
|
|
||||||
|
self.path_data.push_str(&format!("C {} {} {} {} {} {} ",
|
||||||
|
scaled_x1, scaled_y1, scaled_x2, scaled_y2, scaled_x, scaled_y));
|
||||||
|
self.current_x = scaled_x;
|
||||||
|
self.current_y = scaled_y;
|
||||||
|
}
|
||||||
|
|
||||||
|
fn close(&mut self) {
|
||||||
|
if self.current_x != self.x_offset || self.current_y != self.y_offset {
|
||||||
|
let length = self.calculate_distance(self.current_x, self.current_y, self.x_offset, self.y_offset);
|
||||||
|
self.path_length += length;
|
||||||
|
}
|
||||||
|
self.path_data.push('Z');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#[wasm_bindgen]
|
||||||
|
pub struct FontHandler {
|
||||||
|
font_data: Vec<u8>,
|
||||||
|
units_per_em: f32,
|
||||||
|
ascender: f32,
|
||||||
|
descender: f32,
|
||||||
|
}
|
||||||
|
|
||||||
|
#[wasm_bindgen]
|
||||||
|
impl FontHandler {
|
||||||
|
#[wasm_bindgen(constructor)]
|
||||||
|
pub fn new(font_data: &[u8]) -> Result<FontHandler, JsValue> {
|
||||||
|
let font_data = font_data.to_vec(); // Own the data
|
||||||
|
let face = Face::parse(&font_data, 0)
|
||||||
|
.map_err(|e| JsValue::from_str(&format!("Failed to parse font: {:?}", e)))?;
|
||||||
|
|
||||||
|
Ok(FontHandler {
|
||||||
|
units_per_em: face.units_per_em() as f32,
|
||||||
|
ascender: face.ascender() as f32,
|
||||||
|
descender: face.descender() as f32,
|
||||||
|
font_data,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
#[wasm_bindgen]
|
||||||
|
pub fn generate_svg(&self, text: &str, font_size: f32) -> Result<String, JsValue> {
|
||||||
|
let face = Face::parse(&self.font_data, 0)
|
||||||
|
.map_err(|e| JsValue::from_str(&format!("Failed to parse font: {:?}", e)))?;
|
||||||
|
|
||||||
|
let scale_factor = font_size / self.units_per_em;
|
||||||
|
let baseline = font_size * 1.2;
|
||||||
|
|
||||||
|
let mut x_position = 0.0;
|
||||||
|
let mut paths = Vec::new();
|
||||||
|
let mut total_width = 0.0;
|
||||||
|
|
||||||
|
let mut min_x = f32::MAX;
|
||||||
|
let mut max_x = f32::MIN;
|
||||||
|
let mut min_y = f32::MAX;
|
||||||
|
let mut max_y = f32::MIN;
|
||||||
|
|
||||||
|
for c in text.chars() {
|
||||||
|
if let Some(glyph_id) = face.glyph_index(c) {
|
||||||
|
if let Some(advance) = face.glyph_hor_advance(glyph_id) {
|
||||||
|
total_width += advance as f32 * scale_factor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let margin = font_size * 0.5;
|
||||||
|
let total_width = total_width + margin * 2.0;
|
||||||
|
x_position = margin;
|
||||||
|
|
||||||
|
for c in text.chars() {
|
||||||
|
if let Some(glyph_id) = face.glyph_index(c) {
|
||||||
|
if let Some(advance) = face.glyph_hor_advance(glyph_id) {
|
||||||
|
let mut builder = PathBuilder::new(x_position, baseline, scale_factor);
|
||||||
|
|
||||||
|
if let Some(_) = face.outline_glyph(glyph_id, &mut builder) {
|
||||||
|
if !builder.path_data.is_empty() {
|
||||||
|
min_x = min_x.min(builder.min_x);
|
||||||
|
max_x = max_x.max(builder.max_x);
|
||||||
|
min_y = min_y.min(builder.min_y);
|
||||||
|
max_y = max_y.max(builder.max_y);
|
||||||
|
|
||||||
|
paths.push(Path::new()
|
||||||
|
.set("d", builder.path_data)
|
||||||
|
.set("fill", "currentColor"));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
x_position += advance as f32 * scale_factor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let padding = font_size * 0.1;
|
||||||
|
let view_box_x = min_x - padding;
|
||||||
|
let view_box_y = min_y - padding;
|
||||||
|
let view_box_width = (max_x - min_x) + padding * 2.0;
|
||||||
|
let view_box_height = (max_y - min_y) + padding * 2.0;
|
||||||
|
|
||||||
|
let mut document = Document::new()
|
||||||
|
.set("viewBox", (view_box_x, view_box_y, view_box_width, view_box_height))
|
||||||
|
.set("class", "animated-text")
|
||||||
|
.set("preserveAspectRatio", "xMidYMid meet")
|
||||||
|
.set("style", "width: 100%; height: 100%;");
|
||||||
|
|
||||||
|
for path in paths {
|
||||||
|
document = document.add(path);
|
||||||
|
}
|
||||||
|
|
||||||
|
Ok(document.to_string())
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#[wasm_bindgen]
|
||||||
|
pub fn init_panic_hook() {
|
||||||
|
console_error_panic_hook::set_once();
|
||||||
|
}
|
||||||
10
rust/svg/src/main.tsx
Normal file
10
rust/svg/src/main.tsx
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
import { StrictMode } from 'react'
|
||||||
|
import { createRoot } from 'react-dom/client'
|
||||||
|
import './index.css'
|
||||||
|
import App from './App.tsx'
|
||||||
|
|
||||||
|
createRoot(document.getElementById('root')!).render(
|
||||||
|
<StrictMode>
|
||||||
|
<App />
|
||||||
|
</StrictMode>,
|
||||||
|
)
|
||||||
26
rust/svg/tsconfig.app.json
Normal file
26
rust/svg/tsconfig.app.json
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"incremental": true,
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||||
|
"target": "ES2020",
|
||||||
|
"useDefineForClassFields": true,
|
||||||
|
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||||
|
"module": "ESNext",
|
||||||
|
"skipLibCheck": true,
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"noEmit": true,
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"noFallthroughCasesInSwitch": true
|
||||||
|
},
|
||||||
|
"include": ["src"]
|
||||||
|
}
|
||||||
7
rust/svg/tsconfig.json
Normal file
7
rust/svg/tsconfig.json
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"files": [],
|
||||||
|
"references": [
|
||||||
|
{ "path": "./tsconfig.app.json" },
|
||||||
|
{ "path": "./tsconfig.node.json" }
|
||||||
|
]
|
||||||
|
}
|
||||||
24
rust/svg/tsconfig.node.json
Normal file
24
rust/svg/tsconfig.node.json
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||||
|
"target": "ES2022",
|
||||||
|
"lib": ["ES2023"],
|
||||||
|
"module": "ESNext",
|
||||||
|
"skipLibCheck": true,
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"noEmit": true,
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
"noUncheckedSideEffectImports": true
|
||||||
|
},
|
||||||
|
"include": ["vite.config.ts"]
|
||||||
|
}
|
||||||
7
rust/svg/vite.config.ts
Normal file
7
rust/svg/vite.config.ts
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import react from '@vitejs/plugin-react'
|
||||||
|
|
||||||
|
// https://vite.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [react()],
|
||||||
|
})
|
||||||
Loading…
Reference in New Issue
Block a user