Compare commits
19 Commits
| Author | SHA1 | Date |
|---|---|---|
Jongmin Kim
|
5683a8922e | 5 years ago |
|
Jongmin Kim
|
03d2bcd144 | 5 years ago |
|
Jongmin Kim
|
6f6895be14 | 5 years ago |
|
Jongmin Kim
|
3455a3a0c9 | 5 years ago |
|
Jongmin Kim
|
9e312a7d91 | 5 years ago |
|
Jongmin Kim
|
f595d7d58d | 5 years ago |
|
Jongmin Kim
|
025f9ff2f4 | 5 years ago |
|
Jongmin Kim
|
a0a5c02e5d | 5 years ago |
|
Jongmin Kim
|
34c5585eeb | 5 years ago |
|
Jongmin Kim
|
8e962cbf5e | 5 years ago |
|
Jongmin Kim
|
cb9f3ab060 | 5 years ago |
|
Jongmin Kim
|
dd7f091b3e | 5 years ago |
|
Jongmin Kim
|
3947299f37 | 5 years ago |
|
Jongmin Kim
|
d75c838c69 | 5 years ago |
|
Jongmin Kim
|
1964444683 | 5 years ago |
|
Jongmin Kim
|
ef590d2e9c | 5 years ago |
|
Jongmin Kim
|
44207749ac | 5 years ago |
|
Jongmin Kim
|
54f659804c | 5 years ago |
|
Jongmin Kim
|
0fcbb50e15 | 5 years ago |
75 changed files with 2 additions and 9141 deletions
@ -1,3 +1,4 @@
@@ -1,3 +1,4 @@
|
||||
|
||||
examples/.DS_Store |
||||
examples/data/.DS_Store |
||||
examples/.DS_Store |
||||
.DS_Store |
||||
|
||||
@ -1,21 +0,0 @@
@@ -1,21 +0,0 @@
|
||||
MIT License |
||||
|
||||
Copyright (c) 2019 Jongmin Kim |
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy |
||||
of this software and associated documentation files (the "Software"), to deal |
||||
in the Software without restriction, including without limitation the rights |
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell |
||||
copies of the Software, and to permit persons to whom the Software is |
||||
furnished to do so, subject to the following conditions: |
||||
|
||||
The above copyright notice and this permission notice shall be included in all |
||||
copies or substantial portions of the Software. |
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, |
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE |
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER |
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, |
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE |
||||
SOFTWARE. |
||||
@ -1,173 +0,0 @@
@@ -1,173 +0,0 @@
|
||||
# Leon Sans |
||||
Leon Sans is a geometric sans-serif typeface made with code in 2019 by Jongmin Kim. It allows to change font weight dynamically and to create custom animations, effects or shapes in the Canvas element of HTML5. He designed the font to celebrate his newborn baby Leon. |
||||
|
||||
There are live examples at https://leon-kim.com/examples/ |
||||
|
||||
And website at https://leon-kim.com/ |
||||
|
||||
[](https://youtu.be/sb7v-d-R11E?hl=en&fs=1&cc_load_policy=1) |
||||
|
||||
 |
||||
|
||||
 |
||||
|
||||
 |
||||
|
||||
 |
||||
|
||||
 |
||||
|
||||
|
||||
## What is special? |
||||
The font is made with code, it has coordinate values of the drawing points for each glyph. With the coordinate values, you can create custom shapes, effects or animations. |
||||
|
||||
 |
||||
- [Drawing animation](https://leon-kim.com/examples/#canvas-basic) |
||||
|
||||
 |
||||
- [Weight change](https://leon-kim.com/examples/#canvas-basic) |
||||
|
||||
 |
||||
- [Wave](https://leon-kim.com/examples/#wave) |
||||
|
||||
 |
||||
- [Metaball](https://leon-kim.com/examples/#metaball-pixi) |
||||
|
||||
 |
||||
- [Plant](https://leon-kim.com/examples/#plants-pixi) |
||||
|
||||
 |
||||
- [Colorful](https://leon-kim.com/examples/#colorful) |
||||
|
||||
 |
||||
- [Color pattern](https://leon-kim.com/examples/#color-pattern) |
||||
|
||||
|
||||
## Usage |
||||
Download the minified js file in dist folder and include it in your html. |
||||
```html |
||||
<script src="js/leon.js"></script> |
||||
``` |
||||
|
||||
Generate LeonSans and draw it in the Canvas element of HTML5. |
||||
```javascript |
||||
|
||||
let leon, canvas, ctx; |
||||
|
||||
const sw = 800; |
||||
const sh = 600; |
||||
const pixelRatio = 2; |
||||
|
||||
function init() { |
||||
canvas = document.createElement('canvas'); |
||||
document.body.appendChild(canvas); |
||||
ctx = canvas.getContext("2d"); |
||||
|
||||
canvas.width = sw * pixelRatio; |
||||
canvas.height = sh * pixelRatio; |
||||
canvas.style.width = sw + 'px'; |
||||
canvas.style.height = sh + 'px'; |
||||
ctx.scale(pixelRatio, pixelRatio); |
||||
|
||||
leon = new LeonSans({ |
||||
text: 'The quick brown\nfox jumps over\nthe lazy dog', |
||||
color: ['#000000'], |
||||
size: 80, |
||||
weight: 200 |
||||
}); |
||||
|
||||
requestAnimationFrame(animate); |
||||
} |
||||
|
||||
function animate(t) { |
||||
requestAnimationFrame(animate); |
||||
|
||||
ctx.clearRect(0, 0, sw, sh); |
||||
|
||||
const x = (sw - leon.rect.w) / 2; |
||||
const y = (sh - leon.rect.h) / 2; |
||||
leon.position(x, y); |
||||
|
||||
leon.draw(ctx); |
||||
} |
||||
|
||||
window.onload = () => { |
||||
init(); |
||||
}; |
||||
``` |
||||
|
||||
For the drawing animation, include TweenMax (JS animation library) in your html. |
||||
```html |
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script> |
||||
``` |
||||
|
||||
And update all the drawing values from 0 to 1 |
||||
```javascript |
||||
let i, total = leon.drawing.length; |
||||
for (i = 0; i < total; i++) { |
||||
TweenMax.fromTo(leon.drawing[i], 1.6, { |
||||
value: 0 |
||||
}, { |
||||
delay: i * 0.05, |
||||
value: 1, |
||||
ease: Power4.easeOut |
||||
}); |
||||
} |
||||
``` |
||||
|
||||
|
||||
|
||||
### Option list |
||||
|
||||
| Name | Type | Description | |
||||
| -------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | |
||||
| `text` | string | The text that needs to be shown. | |
||||
| `size` | integer | The size of the text. | |
||||
| `weight` | number | The weight of the font: `1 - 900`. [Default: `1`] | |
||||
| `color` | array | The colors of each characters. [Default: `['#000000']`] | |
||||
| `colorful` | array | The colors for colorful effect. [Default: `['#c5d73f', '#9d529c', '#49a9db', '#fec330', '#5eb96e', '#fc5356', '#f38f31']`] | |
||||
| `tracking` | integer | The spacing between the characters of a block of text. [Default: `0`] | |
||||
| `leading` | integer | The distance between each line of text. [Default: `0`] | |
||||
| `align` | string | How the text content of the element is horizontally aligned: `left, center, right`. [Default: `left`] | |
||||
| `pathGap` | number | The gap between each coordinate of the points on a line of each character: `0 - 1`. [Default: `0.5`] | |
||||
| `amplitude` | number | The amplitude of the wave effect: `0 - 1`. [Default: `0.5`] | |
||||
| `maxWidth` | number | The width of the text sentence. | |
||||
| `breakWord` | boolean | Words break when reaching the end of a line. [Default: `false`] | |
||||
| `fps` | number | The FPS for the wave effect. [Default: `30`] | |
||||
| `isPath` | boolean | `true` to get the coordinate values of the points on a line of each character. [Default: `false`] | |
||||
| `isWave` | boolean | `true` for the wave effect. [Default: `false`] | |
||||
|
||||
|
||||
### Properties |
||||
|
||||
| Name | Type | Description | |
||||
| -------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | |
||||
| `lineWidth` | number | The thickness of lines of the character. | |
||||
| `scale` | number | The scale of the character. `scale` is `1` when the font size is `500`. | |
||||
| `drawing` | array | The drawing object values for each character. `0` is the beginning of the animation, `1` is the end of the animation state. | |
||||
| `data` | array | An object of the raw data for the text. | |
||||
| `paths` | array | The coordinate values of the points on a line of each character. | |
||||
| `drawingPaths` | array | The coordinate values of the points on a line of each character to draw the drawing animation in WebGL. It has 1px distance of each path. | |
||||
| `wavePaths` | array | The coordinate values of the points on a line for the wave effect. | |
||||
| `rect` | Object | The size of the text and its position: `{x: x position, y: y position, w: width, h: height}`.| |
||||
|
||||
|
||||
### Methods |
||||
|
||||
| Name | Description | |
||||
| ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | |
||||
| `on()` | Add `update` event. | |
||||
| `off()` | Remove `update` event. | |
||||
| `position(x, y)` | Set the position of the text. | |
||||
| `updateDrawingPaths()` | Update paths for drawing in WebGL (PIXI.js). It's very expensive, only call when it needs. | |
||||
| `drawPixi(graphics)` | Draw text in WebGL with PIXI.js. | |
||||
| `draw(ctx)` | Draw text in the Canvas element. | |
||||
| `drawColorful(ctx)` | Draw the colorful effect. | |
||||
| `wave(ctx, t)` | Draw the wave effect. | |
||||
| `pattern(ctx, w, h)` | Draw rectangle shapes at each path point | |
||||
| `grid(ctx)` | Draw grid for each type. | |
||||
| `point(ctx)` | Draw circles at each drawing point and lines for each type. | |
||||
| `box(ctx)` | Draw outline box for the text. | |
||||
| `reset()` | Reset all the values. | |
||||
| `dispose()` | Dispose. | |
||||
|
||||
File diff suppressed because one or more lines are too long
@ -1,112 +0,0 @@
@@ -1,112 +0,0 @@
|
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
|
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"> |
||||
<title>Leon Sans - All</title> |
||||
|
||||
<style> |
||||
html, body { |
||||
width: 100%; |
||||
height: 100%; |
||||
overflow: hidden; |
||||
outline: 0; |
||||
margin: 0; |
||||
padding: 0; |
||||
background-color: #f0f0f0; |
||||
cursor: move; |
||||
} |
||||
</style> |
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script> |
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script> |
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.js"></script> |
||||
</head> |
||||
|
||||
<body> |
||||
<script src="../dist/leon.js"></script> |
||||
<script src="js/util.js"></script> |
||||
<script> |
||||
let leon, controll; |
||||
|
||||
function init() { |
||||
generateCanvas(); |
||||
|
||||
controll = { |
||||
align: {}, |
||||
box: false, |
||||
grids: false, |
||||
points: false, |
||||
drawing: () => { |
||||
let i, total = leon.drawing.length; |
||||
for (i = 0; i < total; i++) { |
||||
TweenMax.killTweensOf(leon.drawing[i]); |
||||
TweenMax.fromTo(leon.drawing[i], 2, { |
||||
value: 0 |
||||
}, { |
||||
value: 1, |
||||
ease: Power3.easeOut |
||||
}); |
||||
} |
||||
} |
||||
}; |
||||
|
||||
leon = new LeonSans({ |
||||
text: 'abcdefghijklmn\nopqrstuvwxyz\nABCDEFGHIJK\nLMNOPQRST\nUVWXYZ\n0123456789\n?!$^&*@#%:;\n(){}[]<>«»~_\n\'"·+=-×÷¿¡,.\nÀÁÂÃÄÅĂĄÆ\nÞßĆĈĊČÇĤÝ\nĎĐÈÉÊËĒĔĖĚ\nĜĞĠĢÙÚÛÜŬ\nŜŞĴÑÌÍÎÏ\nàáâãåäăąæ\nþćĉċčçĥýÿ\nďđèéêëēĕėě\nĝğġģùúûüŭ\nŝşĵñìíîï', |
||||
color: ['#342f2e'], |
||||
size: getSize(90), |
||||
weight: 200, |
||||
tracking: 2, |
||||
leading: 2, |
||||
align: 'center' |
||||
}); |
||||
|
||||
const gui = new dat.GUI(); |
||||
gui.add(leon, 'text'); |
||||
gui.add(leon, 'size', 20, 1000); |
||||
gui.add(leon, 'weight', 1, 900); |
||||
gui.add(leon, 'tracking', -3, 10); |
||||
gui.add(leon, 'leading', -8, 10); |
||||
gui.add(controll, 'drawing'); |
||||
gui.add(controll, 'box'); |
||||
gui.add(controll, 'grids'); |
||||
gui.add(controll, 'points'); |
||||
|
||||
requestAnimationFrame(animate); |
||||
} |
||||
|
||||
function animate(t) { |
||||
requestAnimationFrame(animate); |
||||
|
||||
ctx.clearRect(0, 0, sw, sh); |
||||
|
||||
const x = (sw - leon.rect.w) / 2; |
||||
let y = (sh - leon.rect.h) / 2; |
||||
if (y < 0) y = 0; |
||||
leon.position(x + moveX, y + moveY); |
||||
|
||||
ctx.save(); |
||||
if (controll.grids) leon.grid(ctx); |
||||
if (controll.box) leon.box(ctx); |
||||
ctx.restore(); |
||||
|
||||
ctx.save(); |
||||
leon.draw(ctx); |
||||
ctx.restore(); |
||||
|
||||
if (controll.points) { |
||||
ctx.save(); |
||||
leon.point(ctx); |
||||
ctx.restore(); |
||||
} |
||||
} |
||||
|
||||
window.onload = () => { |
||||
init(); |
||||
}; |
||||
</script> |
||||
</body> |
||||
|
||||
</html> |
||||
@ -1,120 +0,0 @@
@@ -1,120 +0,0 @@
|
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
|
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"> |
||||
<title>Leon Sans - Canvas Basic</title> |
||||
|
||||
<style> |
||||
html, body { |
||||
width: 100%; |
||||
height: 100%; |
||||
overflow: hidden; |
||||
outline: 0; |
||||
margin: 0; |
||||
padding: 0; |
||||
background-color: #f0f0f0; |
||||
cursor: move; |
||||
} |
||||
</style> |
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script> |
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script> |
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.js"></script> |
||||
</head> |
||||
|
||||
<body> |
||||
<script src="../dist/leon.js"></script> |
||||
<script src="js/util.js"></script> |
||||
<script> |
||||
let leon, controll; |
||||
|
||||
function init() { |
||||
generateCanvas(); |
||||
|
||||
controll = { |
||||
color: {}, |
||||
align: {}, |
||||
drawing: () => { |
||||
let i, total = leon.drawing.length; |
||||
for (i = 0; i < total; i++) { |
||||
TweenMax.killTweensOf(leon.drawing[i]); |
||||
TweenMax.fromTo(leon.drawing[i], 1.6, { |
||||
value: 0 |
||||
}, { |
||||
delay: i * 0.05, |
||||
value: 1, |
||||
ease: Power4.easeOut |
||||
}); |
||||
} |
||||
} |
||||
}; |
||||
|
||||
leon = new LeonSans({ |
||||
text: 'The quick brown\nfox jumps over\nthe lazy dog', |
||||
color: ['#342f2e'], |
||||
size: getSize(120), |
||||
weight: 300 |
||||
}); |
||||
|
||||
const gui = new dat.GUI(); |
||||
gui.add(leon, 'text'); |
||||
gui.add(leon, 'size', 20, 1000); |
||||
gui.add(leon, 'weight', 1, 900); |
||||
gui.add(leon, 'tracking', -3, 10); |
||||
gui.add(leon, 'leading', -8, 10); |
||||
const alignControll = gui.add(controll, 'align', [ 'left', 'center', 'right'] ); |
||||
gui.add(leon, 'maxWidth', 0, 2000); |
||||
gui.add(leon, 'breakWord'); |
||||
gui.add(controll, 'drawing'); |
||||
const colorControll = gui.add(controll, 'color', [ 'black', 'white', 'yellow', 'red - blue', 'mixed'] ); |
||||
|
||||
alignControll.onChange((value) => { |
||||
leon.align = value; |
||||
}); |
||||
alignControll.setValue('left'); |
||||
|
||||
colorControll.onChange((value) => { |
||||
if (value == 'black') { |
||||
document.body.style.backgroundColor = '#f0f0f0'; |
||||
leon.color = ['#342f2e']; |
||||
} else if (value == 'white') { |
||||
document.body.style.backgroundColor = '#000000'; |
||||
leon.color = ['#ffffff']; |
||||
} else if (value == 'yellow') { |
||||
document.body.style.backgroundColor = '#57c4e2'; |
||||
leon.color = ['#ffd93c']; |
||||
} else if (value == 'red - blue') { |
||||
document.body.style.backgroundColor = '#ffffff'; |
||||
leon.color = [['#ff94a7', '#1c7dd1']]; |
||||
} else if (value == 'mixed') { |
||||
document.body.style.backgroundColor = '#ffffff'; |
||||
leon.color = ['#ff5892', '#7bc92f', ['#3eda4e', '#f4bf14', '#fa314c', '#074aee'], '#ffd93c', '#c0008b']; |
||||
} |
||||
}); |
||||
colorControll.setValue('black'); |
||||
|
||||
requestAnimationFrame(animate); |
||||
} |
||||
|
||||
function animate(t) { |
||||
requestAnimationFrame(animate); |
||||
|
||||
ctx.clearRect(0, 0, sw, sh); |
||||
|
||||
const x = (sw - leon.rect.w) / 2; |
||||
const y = (sh - leon.rect.h) / 2; |
||||
leon.position(x + moveX, y + moveY); |
||||
|
||||
leon.draw(ctx); |
||||
} |
||||
|
||||
window.onload = () => { |
||||
init(); |
||||
}; |
||||
</script> |
||||
</body> |
||||
|
||||
</html> |
||||
@ -1,144 +0,0 @@
@@ -1,144 +0,0 @@
|
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
|
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"> |
||||
<title>LeonSans - Color Pattern</title> |
||||
|
||||
<style> |
||||
html, body { |
||||
width: 100%; |
||||
height: 100%; |
||||
overflow: hidden; |
||||
outline: 0; |
||||
margin: 0; |
||||
padding: 0; |
||||
background-color: #121212; |
||||
cursor: move; |
||||
} |
||||
</style> |
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script> |
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script> |
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.js"></script> |
||||
</head> |
||||
|
||||
<body> |
||||
<script src="../dist/leon.js"></script> |
||||
<script src="js/util.js"></script> |
||||
<script> |
||||
const speed = 10; |
||||
const fps = 1000 / 30; |
||||
const PI2 = 2 * Math.PI; |
||||
let cValue = 0, mode; |
||||
let leon, controll, time; |
||||
|
||||
function init() { |
||||
generateCanvas(); |
||||
|
||||
controll = { |
||||
size: 200, |
||||
pathGap: 0, |
||||
patternWidth: 2, |
||||
visual: {}, |
||||
drawing: () => { |
||||
let i, total = leon.drawing.length; |
||||
for (i = 0; i < total; i++) { |
||||
TweenMax.killTweensOf(leon.drawing[i]); |
||||
TweenMax.fromTo(leon.drawing[i], 2, { |
||||
value: 0 |
||||
}, { |
||||
delay: i * 0.1, |
||||
value: 1, |
||||
ease: Power4.easeOut |
||||
}); |
||||
} |
||||
} |
||||
}; |
||||
|
||||
leon = new LeonSans({ |
||||
text: 'abcdefg', |
||||
size: getSize(200), |
||||
weight: 500, |
||||
pathGap: -1, |
||||
isPath: true |
||||
}); |
||||
|
||||
const gui = new dat.GUI(); |
||||
gui.add(leon, 'text'); |
||||
gui.add(leon, 'size', 10, 1000); |
||||
const weightControll = gui.add(controll, 'patternWidth', 1, 100); |
||||
gui.add(controll, 'drawing'); |
||||
const visControll = gui.add(controll, 'pathGap', [ '-1', '0'] ); |
||||
|
||||
visControll.onChange((value) => { |
||||
mode = value; |
||||
if (mode == '-1') { |
||||
weightControll.setValue(40); |
||||
leon.pathGap = -1; |
||||
leon.tracking = 1; |
||||
} else if (mode == '0') { |
||||
weightControll.setValue(40); |
||||
leon.pathGap = 0; |
||||
leon.tracking = 1; |
||||
} |
||||
}); |
||||
visControll.setValue('-1'); |
||||
|
||||
requestAnimationFrame(animate); |
||||
} |
||||
|
||||
function update() { |
||||
ctx.clearRect(0, 0, sw, sh); |
||||
ctx.lineWidth = 0.2; |
||||
const w = controll.patternWidth * leon.scale; |
||||
const total = leon.data.length; |
||||
let i, p, pos, no = 0; |
||||
let d, j, j_total; |
||||
|
||||
for (i = 0; i < total; i++) { |
||||
d = leon.data[i].paths; |
||||
j_total = Math.round(d.length * leon.drawing[i].value); |
||||
for (j = 0; j < j_total; j++) { |
||||
pos = d[j]; |
||||
ctx.fillStyle = randomColor(no); |
||||
ctx.strokeStyle = randomColor(no); |
||||
ctx.beginPath(); |
||||
ctx.arc(pos.x, pos.y, w, 0, PI2); |
||||
ctx.stroke(); |
||||
no += 1; |
||||
} |
||||
} |
||||
|
||||
cValue -= speed; |
||||
} |
||||
|
||||
function randomColor(no) { |
||||
return "hsl(" + (no + cValue) + ',' + '70%,' + '50%)'; |
||||
} |
||||
|
||||
function animate(t) { |
||||
requestAnimationFrame(animate); |
||||
|
||||
const x = (sw - leon.rect.w) / 2; |
||||
const y = (sh - leon.rect.h) / 2; |
||||
leon.position(x + moveX, y + moveY); |
||||
|
||||
if (t) { |
||||
if (!time) time = t; |
||||
if (t - time > fps) { |
||||
time = t; |
||||
update(); |
||||
} |
||||
} |
||||
} |
||||
|
||||
window.onload = () => { |
||||
init(); |
||||
}; |
||||
</script> |
||||
</body> |
||||
|
||||
</html> |
||||
@ -1,113 +0,0 @@
@@ -1,113 +0,0 @@
|
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
|
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"> |
||||
<title>Leon Sans - Colorful</title> |
||||
|
||||
<style> |
||||
html, |
||||
body { |
||||
width: 100%; |
||||
height: 100%; |
||||
overflow: hidden; |
||||
outline: 0; |
||||
margin: 0; |
||||
padding: 0; |
||||
background-color: #f0f0f0; |
||||
cursor: move; |
||||
} |
||||
</style> |
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script> |
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script> |
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.js"></script> |
||||
</head> |
||||
|
||||
<body> |
||||
<script src="../dist/leon.js"></script> |
||||
<script src="js/util.js"></script> |
||||
<script> |
||||
let leon, controll; |
||||
|
||||
function init() { |
||||
generateCanvas(); |
||||
|
||||
controll = { |
||||
color: {}, |
||||
roundCap: true, |
||||
multiply: true, |
||||
drawing: () => { |
||||
let i, total = leon.drawing.length; |
||||
for (i = 0; i < total; i++) { |
||||
TweenMax.killTweensOf(leon.drawing[i]); |
||||
TweenMax.fromTo(leon.drawing[i], 2, { |
||||
value: 0 |
||||
}, { |
||||
value: 1, |
||||
ease: Cubic.easeOut |
||||
}); |
||||
} |
||||
} |
||||
}; |
||||
|
||||
leon = new LeonSans({ |
||||
text: 'The quick brown\nfox jumps over\nthe lazy dog', |
||||
color: ['#000000'], |
||||
size: getSize(120), |
||||
weight: 500 |
||||
}); |
||||
|
||||
const gui = new dat.GUI(); |
||||
gui.add(leon, 'text'); |
||||
gui.add(leon, 'size', 20, 300); |
||||
gui.add(leon, 'weight', 1, 900); |
||||
gui.add(leon, 'tracking', -3, 10); |
||||
gui.add(leon, 'leading', -8, 10); |
||||
gui.add(controll, 'drawing'); |
||||
const roundCapControll = gui.add(controll, 'roundCap'); |
||||
const multiplyControll = gui.add(controll, 'multiply'); |
||||
|
||||
roundCapControll.onChange((value) => { |
||||
if (value) { |
||||
ctx.lineCap = "round"; |
||||
} else { |
||||
ctx.lineCap = "butt"; |
||||
} |
||||
}); |
||||
|
||||
multiplyControll.onChange((value) => { |
||||
if (value) { |
||||
ctx.globalCompositeOperation = 'multiply'; |
||||
} else { |
||||
ctx.globalCompositeOperation = 'source-over'; |
||||
} |
||||
}); |
||||
|
||||
requestAnimationFrame(animate); |
||||
|
||||
roundCapControll.setValue(true); |
||||
multiplyControll.setValue(true); |
||||
} |
||||
|
||||
function animate(t) { |
||||
requestAnimationFrame(animate); |
||||
|
||||
ctx.clearRect(0, 0, sw, sh); |
||||
|
||||
const x = (sw - leon.rect.w) / 2; |
||||
const y = (sh - leon.rect.h) / 2; |
||||
leon.position(x + moveX, y + moveY); |
||||
|
||||
leon.drawColorful(ctx); |
||||
} |
||||
|
||||
window.onload = () => { |
||||
init(); |
||||
}; |
||||
</script> |
||||
</body> |
||||
|
||||
</html> |
||||
|
Before Width: | Height: | Size: 6.6 KiB |
|
Before Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 52 KiB |
|
Before Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 25 KiB |
|
Before Width: | Height: | Size: 30 KiB |
|
Before Width: | Height: | Size: 7.4 KiB |
|
Before Width: | Height: | Size: 4.8 KiB |
|
Before Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 18 KiB |
|
Before Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 2.7 KiB |
|
Before Width: | Height: | Size: 3.2 KiB |
|
Before Width: | Height: | Size: 12 KiB |
@ -1,109 +0,0 @@
@@ -1,109 +0,0 @@
|
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
|
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"> |
||||
<title>Leon Sans - Gradient</title> |
||||
|
||||
<style> |
||||
html, body { |
||||
width: 100%; |
||||
height: 100%; |
||||
overflow: hidden; |
||||
outline: 0; |
||||
margin: 0; |
||||
padding: 0; |
||||
background-color: #f0f0f0; |
||||
cursor: move; |
||||
} |
||||
</style> |
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script> |
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script> |
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.js"></script> |
||||
</head> |
||||
|
||||
<body> |
||||
<script src="../dist/leon.js"></script> |
||||
<script src="js/util.js"></script> |
||||
<script> |
||||
let leon, controll; |
||||
|
||||
function init() { |
||||
generateCanvas(); |
||||
|
||||
controll = { |
||||
box: false, |
||||
grids: false, |
||||
points: false, |
||||
drawing: () => { |
||||
let i, total = leon.drawing.length; |
||||
for (i = 0; i < total; i++) { |
||||
TweenMax.killTweensOf(leon.drawing[i]); |
||||
TweenMax.fromTo(leon.drawing[i], 2, { |
||||
value: 0 |
||||
}, { |
||||
value: 1, |
||||
ease: Power4.easeOut |
||||
}); |
||||
} |
||||
} |
||||
}; |
||||
|
||||
leon = new LeonSans({ |
||||
text: 'mug', |
||||
color: [ |
||||
['#64d3ce', '#2a92ce'], |
||||
['#e7c4c4', '#aae898', '#e1ea73', '#ff8974'], |
||||
['#fd46aa', '#8ad781'] |
||||
], |
||||
size: getSize(500), |
||||
weight: 140 |
||||
}); |
||||
|
||||
const gui = new dat.GUI(); |
||||
gui.add(leon, 'text'); |
||||
gui.add(leon, 'size', 20, 1000); |
||||
gui.add(leon, 'weight', 1, 900); |
||||
gui.add(controll, 'drawing'); |
||||
gui.add(controll, 'box'); |
||||
gui.add(controll, 'grids'); |
||||
gui.add(controll, 'points'); |
||||
|
||||
requestAnimationFrame(animate); |
||||
} |
||||
|
||||
function animate(t) { |
||||
requestAnimationFrame(animate); |
||||
|
||||
ctx.clearRect(0, 0, sw, sh); |
||||
|
||||
const x = (sw - leon.rect.w) / 2; |
||||
const y = (sh - leon.rect.h) / 2; |
||||
leon.position(x + moveX, y + moveY); |
||||
|
||||
ctx.save(); |
||||
if (controll.grids) leon.grid(ctx); |
||||
if (controll.box) leon.box(ctx); |
||||
ctx.restore(); |
||||
|
||||
ctx.save(); |
||||
leon.draw(ctx); |
||||
ctx.restore(); |
||||
|
||||
if (controll.points) { |
||||
ctx.save(); |
||||
leon.point(ctx); |
||||
ctx.restore(); |
||||
} |
||||
} |
||||
|
||||
window.onload = () => { |
||||
init(); |
||||
}; |
||||
</script> |
||||
</body> |
||||
|
||||
</html> |
||||
@ -1,94 +0,0 @@
@@ -1,94 +0,0 @@
|
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
|
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"> |
||||
<title>Leon Sans - Grids</title> |
||||
|
||||
<style> |
||||
html, body { |
||||
width: 100%; |
||||
height: 100%; |
||||
overflow: hidden; |
||||
outline: 0; |
||||
margin: 0; |
||||
padding: 0; |
||||
background-color: #f0f0f0; |
||||
cursor: move; |
||||
} |
||||
</style> |
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script> |
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script> |
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.js"></script> |
||||
</head> |
||||
|
||||
<body> |
||||
<script src="../dist/leon.js"></script> |
||||
<script src="js/util.js"></script> |
||||
<script> |
||||
let leon, controll; |
||||
|
||||
function init() { |
||||
generateCanvas(); |
||||
|
||||
controll = { |
||||
box: true, |
||||
grids: true, |
||||
points: true, |
||||
}; |
||||
|
||||
leon = new LeonSans({ |
||||
text: 'Ttypog', |
||||
color: ['#342f2e'], |
||||
size: getSize(300), |
||||
weight: 400 |
||||
}); |
||||
|
||||
const gui = new dat.GUI(); |
||||
gui.add(leon, 'text'); |
||||
gui.add(leon, 'size', 100, 1000); |
||||
gui.add(leon, 'weight', 1, 900); |
||||
gui.add(leon, 'tracking', -3, 10); |
||||
gui.add(leon, 'leading', -8, 10); |
||||
gui.add(controll, 'box'); |
||||
gui.add(controll, 'grids'); |
||||
gui.add(controll, 'points'); |
||||
|
||||
requestAnimationFrame(animate); |
||||
} |
||||
|
||||
function animate(t) { |
||||
requestAnimationFrame(animate); |
||||
|
||||
ctx.clearRect(0, 0, sw, sh); |
||||
|
||||
const x = (sw - leon.rect.w) / 2; |
||||
const y = (sh - leon.rect.h) / 2; |
||||
leon.position(x + moveX, y + moveY); |
||||
|
||||
ctx.save(); |
||||
if (controll.grids) leon.grid(ctx); |
||||
if (controll.box) leon.box(ctx); |
||||
ctx.restore(); |
||||
|
||||
ctx.save(); |
||||
leon.draw(ctx); |
||||
ctx.restore(); |
||||
|
||||
if (controll.points) { |
||||
ctx.save(); |
||||
leon.point(ctx); |
||||
ctx.restore(); |
||||
} |
||||
} |
||||
|
||||
window.onload = () => { |
||||
init(); |
||||
}; |
||||
</script> |
||||
</body> |
||||
|
||||
</html> |
||||
@ -1,281 +0,0 @@
@@ -1,281 +0,0 @@
|
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
|
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"> |
||||
<title>Leon Sans examples</title> |
||||
<meta name="mobile-web-app-capable" content="yes"> |
||||
<meta name="apple-mobile-web-app-capable" content="yes"> |
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black"> |
||||
<meta name="apple-mobile-web-app-title" content="Leon Sans examples"> |
||||
<meta name="description" content="Leon Sans is a geometric sans-serif typeface made with code in 2019 by Jongmin Kim."> |
||||
<meta itemprop="name" content="Leon Sans examples" /> |
||||
<meta itemprop="description" content="Leon Sans is a geometric sans-serif typeface made with code in 2019 by Jongmin Kim."/> |
||||
<meta itemprop="image" content="https://leon-kim.com/img/share.png" /> |
||||
<meta property="og:site_name" content="Leon Sans examples" /> |
||||
<meta property="og:type" content="website" /> |
||||
<meta property="og:title" content="Leon Sans examples" /> |
||||
<meta property="og:url" content="https://leon-kim.com" /> |
||||
<meta property="og:image" content="https://leon-kim.com/img/share.png" /> |
||||
<meta property="og:description" content="Leon Sans is a geometric sans-serif typeface made with code in 2019 by Jongmin Kim." /> |
||||
|
||||
<style> |
||||
html, |
||||
body { |
||||
outline: 0; |
||||
margin: 0; |
||||
padding: 0; |
||||
height: 100%; |
||||
color: #ffffff; |
||||
font-size: 14px; |
||||
line-height: 30px; |
||||
-webkit-text-size-adjust: 100%; |
||||
font-family: 'Helvetica', sans-serif; |
||||
font-weight: 400; |
||||
} |
||||
|
||||
#menu-m { |
||||
position: fixed; |
||||
z-index: 4; |
||||
width: 60px; |
||||
height: 56px; |
||||
left: 0; |
||||
top: 0; |
||||
background-color: #222222; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
#menu-m > p { |
||||
display: block; |
||||
width: 30px; |
||||
height: 2px; |
||||
background-color: #ffffff; |
||||
position: absolute; |
||||
left: 15px; |
||||
} |
||||
#menu-m > p:nth-child(1) { |
||||
top: 5px; |
||||
} |
||||
#menu-m > p:nth-child(2) { |
||||
top: 12px; |
||||
} |
||||
#menu-m > p:nth-child(3) { |
||||
top: 19px; |
||||
} |
||||
|
||||
#menu-bg { |
||||
position: fixed; |
||||
z-index: 2; |
||||
width: 100%; |
||||
height: 100%; |
||||
left: 0; |
||||
top: 0; |
||||
background-color:rgba(0,0,0,0.3); |
||||
display: none; |
||||
} |
||||
|
||||
#menu { |
||||
position: fixed; |
||||
z-index: 6; |
||||
left: 0px; |
||||
width: 170px; |
||||
height: 100%; |
||||
overflow-y: auto; |
||||
overflow-x: hidden; |
||||
background-color: #222222; |
||||
} |
||||
#menu.show { |
||||
transform: translate(170px, 0); |
||||
} |
||||
|
||||
#header { |
||||
margin: 0; |
||||
} |
||||
|
||||
#version { |
||||
font-size: 9px; |
||||
line-height: 9px; |
||||
color: rgba(255,255,255,0.5); |
||||
padding: 0 0 0 20px; |
||||
} |
||||
|
||||
#list { |
||||
margin: -10px 0 20px 0; |
||||
} |
||||
|
||||
h2 { |
||||
font-size: 18px; |
||||
font-weight: 400; |
||||
margin: 40px 0 6px 0; |
||||
padding: 0 0 0 20px; |
||||
} |
||||
|
||||
h2 > a { |
||||
font-size: 12px; |
||||
} |
||||
.item { |
||||
padding: 0 0 0 20px; |
||||
display: block; |
||||
} |
||||
|
||||
.item:hover { |
||||
opacity: 1; |
||||
background-color: #000; |
||||
} |
||||
|
||||
.item.selected { |
||||
opacity: 1; |
||||
background-color: #000; |
||||
} |
||||
|
||||
a { |
||||
color: #ffffff; |
||||
opacity: 0.6; |
||||
text-decoration: none; |
||||
} |
||||
|
||||
#iframe { |
||||
position: absolute; |
||||
border: 0px; |
||||
right: 0; |
||||
right: 0; |
||||
width: calc(100% - 170px); |
||||
height: 100%; |
||||
overflow: auto; |
||||
} |
||||
|
||||
@media (max-width: 600px) { |
||||
#iframe { |
||||
width: 100%; |
||||
} |
||||
#menu { |
||||
left: -170px; |
||||
} |
||||
} |
||||
</style> |
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script> |
||||
<script src="../dist/leon.js"></script> |
||||
</head> |
||||
|
||||
<body> |
||||
<div id="menu-m"> |
||||
<p></p> |
||||
<p></p> |
||||
<p></p> |
||||
</div> |
||||
<div id="menu-bg"></div> |
||||
<div id="menu"> |
||||
<canvas id="header"></canvas> |
||||
<div id="version">VERSION 1.5</div> |
||||
<div id="list"> |
||||
<h2>Canvas</h2> |
||||
<a class="item" href="all.html" target="iframe">all</a> |
||||
<a class="item" href="canvas-basic.html" target="iframe">basic</a> |
||||
<a class="item" href="gradient.html" target="iframe">gradient</a> |
||||
<a class="item" href="grid.html" target="iframe">grid</a> |
||||
<a class="item" href="pattern.html" target="iframe">pattern</a> |
||||
<a class="item" href="wave.html" target="iframe">wave</a> |
||||
<a class="item" href="colorful.html" target="iframe">colorful</a> |
||||
<a class="item" href="color-pattern.html" target="iframe">color pattern</a> |
||||
<h2>WebGL <a href="https://www.pixijs.com/" target="_blank">(PIXI.js)</a></h2> |
||||
<a class="item" href="webgl-basic-pixi.html" target="iframe">basic</a> |
||||
<a class="item" href="metaball-pixi.html" target="iframe">metaball</a> |
||||
<a class="item" href="morphing-pixi.html" target="iframe">morphing</a> |
||||
<a class="item" href="plants-pixi.html" target="iframe">plants</a> |
||||
<a class="item" href="mask-tiling-pixi.html" target="iframe">mask + tiling</a> |
||||
</div> |
||||
</div> |
||||
<iframe id="iframe" name="iframe" allowfullscreen="" allowvr="" onmousewheel=""></iframe> |
||||
|
||||
<script> |
||||
window.onload = () => { |
||||
|
||||
let isShow = false; |
||||
const menuM = document.getElementById('menu-m'); |
||||
const menuBg = document.getElementById('menu-bg'); |
||||
const menu = document.getElementById('menu'); |
||||
menuM.addEventListener( 'click', (event) => { |
||||
onClickMenu(); |
||||
}); |
||||
menuBg.addEventListener( 'click', (event) => { |
||||
onClickMenu(); |
||||
}); |
||||
|
||||
function onClickMenu() { |
||||
isShow = !isShow; |
||||
if (isShow) { |
||||
menuBg.style.display = 'block'; |
||||
menu.className = 'show'; |
||||
} else { |
||||
menuBg.style.display = 'none'; |
||||
menu.className = ''; |
||||
} |
||||
} |
||||
|
||||
|
||||
const sw = 170; |
||||
const sh = 50; |
||||
const iframe = document.getElementById('iframe'); |
||||
const canvas = document.getElementById('header'); |
||||
const ctx = canvas.getContext("2d"); |
||||
canvas.width = sw * 2; |
||||
canvas.height = sh * 2; |
||||
canvas.style.width = sw + 'px' |
||||
canvas.style.height = sh + 'px' |
||||
ctx.scale(2, 2); |
||||
|
||||
const leon = new LeonSans({ |
||||
text: 'Leon Sans', |
||||
color: ['#ffffff'], |
||||
size: 26, |
||||
weight: 300 |
||||
}); |
||||
leon.on('update', (model) => { |
||||
ctx.clearRect(0, 0, sw, sh); |
||||
leon.position(20, 20); |
||||
leon.draw(ctx); |
||||
}); |
||||
|
||||
const list = document.getElementById('list'); |
||||
const arr = list.getElementsByClassName('item'); |
||||
const total = arr.length; |
||||
const links = {}; |
||||
let cur = null; |
||||
let i; |
||||
for (i = 0; i < total; i++) { |
||||
const vv = arr[i].href.split('/'); |
||||
const name = vv[vv.length - 1].split('.')[0]; |
||||
links[name] = arr[i]; |
||||
|
||||
arr[i].addEventListener( 'click', (event) => { |
||||
const vv = event.target.href.split('/'); |
||||
const name = vv[vv.length - 1].split('.')[0]; |
||||
checkMenu(name); |
||||
}); |
||||
} |
||||
|
||||
if (window.location.hash !== '') { |
||||
const name = window.location.hash.substring(1); |
||||
const url = name + '.html'; |
||||
iframe.src = url; |
||||
checkMenu(name); |
||||
} else { |
||||
const name = 'all'; |
||||
iframe.src = name + '.html'; |
||||
checkMenu(name); |
||||
} |
||||
|
||||
function checkMenu(name) { |
||||
if (cur) links[cur].classList.remove('selected'); |
||||
cur = name; |
||||
links[cur].classList.add('selected'); |
||||
window.location.hash = name; |
||||
iframe.focus(); |
||||
}; |
||||
}; |
||||
</script> |
||||
</body> |
||||
|
||||
</html> |
||||
@ -1,75 +0,0 @@
@@ -1,75 +0,0 @@
|
||||
const pixelRatio = 2; |
||||
let isDown = false, moveX = 0, moveY = 0, offsetX = 0, offsetY = 0; |
||||
let canvas, ctx; |
||||
let renderer, stage; |
||||
let sw = document.body.clientWidth; |
||||
let sh = document.body.clientHeight; |
||||
|
||||
function generateCanvas() { |
||||
canvas = document.createElement('canvas'); |
||||
document.body.appendChild(canvas); |
||||
ctx = canvas.getContext("2d"); |
||||
|
||||
window.addEventListener('resize', canvasResize, false); |
||||
canvasResize(); |
||||
|
||||
moveEvent(canvas); |
||||
} |
||||
|
||||
function canvasResize() { |
||||
sw = document.body.clientWidth; |
||||
sh = document.body.clientHeight; |
||||
|
||||
canvas.width = sw * pixelRatio; |
||||
canvas.height = sh * pixelRatio; |
||||
canvas.style.width = sw + 'px'; |
||||
canvas.style.height = sh + 'px'; |
||||
ctx.scale(pixelRatio, pixelRatio); |
||||
} |
||||
|
||||
function generatePixi(bgcolor) { |
||||
renderer = new PIXI.Renderer({ |
||||
width: sw, |
||||
height: sh, |
||||
antialias: true, |
||||
transparent: false, |
||||
autoDensity: true, |
||||
resolution: pixelRatio,//window.devicePixelRatio > 1 ? 2 : 1,
|
||||
powerPreference: "high-performance", |
||||
backgroundColor: bgcolor |
||||
}); |
||||
document.body.appendChild(renderer.view); |
||||
stage = new PIXI.Container(); |
||||
|
||||
window.addEventListener('resize', pixiResize, false); |
||||
pixiResize(); |
||||
|
||||
moveEvent(renderer.view); |
||||
} |
||||
|
||||
function pixiResize() { |
||||
sw = document.body.clientWidth; |
||||
sh = document.body.clientHeight; |
||||
|
||||
renderer.resize(sw, sh); |
||||
} |
||||
|
||||
function moveEvent(canvas) { |
||||
const hammer = new Hammer(canvas); |
||||
hammer.add(new Hammer.Pan({direction: Hammer.DIRECTION_ALL, threshold: 0})); |
||||
hammer.on("pan", (e) => { |
||||
moveX = e.deltaX + offsetX; |
||||
moveY = e.deltaY + offsetY; |
||||
if (e.isFinal) { |
||||
offsetX = moveX; |
||||
offsetY = moveY; |
||||
} |
||||
}); |
||||
} |
||||
|
||||
function getSize(size) { |
||||
let ratio = Math.sqrt(sw * sw + sh * sh) / 1800; |
||||
if (ratio > 1) ratio = 1; |
||||
else if (ratio < 0.5) ratio = 0.5; |
||||
return size * ratio; |
||||
} |
||||
@ -1,199 +0,0 @@
@@ -1,199 +0,0 @@
|
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
|
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"> |
||||
<title>Leon Sans - MASK + Tiling PIXI</title> |
||||
|
||||
<style> |
||||
html, |
||||
body { |
||||
width: 100%; |
||||
height: 100%; |
||||
overflow: hidden; |
||||
outline: 0; |
||||
margin: 0; |
||||
padding: 0; |
||||
cursor: move; |
||||
} |
||||
</style> |
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script> |
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script> |
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.0.4/pixi.min.js"></script> |
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.js"></script> |
||||
</head> |
||||
|
||||
<body> |
||||
<script src="../dist/leon.js"></script> |
||||
<script src="js/util.js"></script> |
||||
<script> |
||||
let container, loader, textures = []; |
||||
let tiling = [], cur = -1; |
||||
let leon, controll; |
||||
|
||||
function init() { |
||||
generatePixi(0x000000); |
||||
|
||||
container = new PIXI.Container(); |
||||
stage.addChild(container); |
||||
|
||||
loader = new PIXI.Loader(); |
||||
loader.add('tile1', 'data/tile1.png') |
||||
.add('tile2', 'data/tile2.png') |
||||
.add('tile3', 'data/tile3.png') |
||||
.add('tile4', 'data/tile4.png') |
||||
.add('tile5', 'data/tile5.png') |
||||
.add('tile6', 'data/tile6.png'); |
||||
|
||||
loader.load((loader, resources) => { |
||||
textures.push(resources.tile1.texture); |
||||
textures.push(resources.tile2.texture); |
||||
textures.push(resources.tile3.texture); |
||||
textures.push(resources.tile4.texture); |
||||
textures.push(resources.tile5.texture); |
||||
textures.push(resources.tile6.texture); |
||||
textures = shuffle(textures); |
||||
|
||||
loaded(); |
||||
}); |
||||
} |
||||
|
||||
|
||||
function loaded() { |
||||
controll = { |
||||
align: {}, |
||||
}; |
||||
|
||||
leon = new LeonSans({ |
||||
text: '012\n345', |
||||
size: getSize(400), |
||||
weight: 900, |
||||
tracking: 1, |
||||
leading: -1, |
||||
align: 'center' |
||||
}); |
||||
leon.on('update', (model) => { |
||||
update(); |
||||
}); |
||||
|
||||
const gui = new dat.GUI(); |
||||
gui.add(leon, 'text'); |
||||
gui.add(leon, 'size', 10, 1000); |
||||
gui.add(leon, 'weight', 1, 900); |
||||
|
||||
requestAnimationFrame(animate); |
||||
} |
||||
|
||||
|
||||
function update() { |
||||
while(container.children[0]) { |
||||
container.removeChild(container.children[0]); |
||||
} |
||||
|
||||
const total = leon.data.length; |
||||
let i, d, color, line, pos; |
||||
let j, j_total, lineW = leon.lineWidth; |
||||
|
||||
let graphics, tilingSprite; |
||||
|
||||
tiling = []; |
||||
|
||||
for (i = 0; i < total; i++) { |
||||
d = leon.data[i]; |
||||
|
||||
graphics = new PIXI.Graphics(); |
||||
container.addChild(graphics); |
||||
|
||||
tilingSprite = new PIXI.TilingSprite( |
||||
textures[getNum()], |
||||
d.rect.w * 2, |
||||
d.rect.h * 2 |
||||
); |
||||
tilingSprite.x = d.rect.x - d.rect.w /2; |
||||
tilingSprite.y = d.rect.y - d.rect.h / 2; |
||||
tilingSprite.tileScale.x = tilingSprite.tileScale.y = leon.scale * 0.5; |
||||
|
||||
container.addChild(tilingSprite); |
||||
|
||||
tilingSprite.mask = graphics; |
||||
tiling.push({ |
||||
item: tilingSprite, |
||||
x: (Math.random() * 2 + 1 - 2) * 2, |
||||
y: (Math.random() * 2 + 1 - 2) * 2 |
||||
}); |
||||
|
||||
j_total = d.lines.length; |
||||
for (j = 0; j < j_total; j++) { |
||||
line = d.lines[j]; |
||||
pos = d.lines[j].pos; |
||||
|
||||
if (pos.type == 'a') { |
||||
graphics.lineStyle(0, color, 0); |
||||
graphics.beginFill(color); |
||||
graphics.drawCircle(pos.x, pos.y, pos.radius); |
||||
graphics.endFill(); |
||||
} else if (pos.type == 'm') { |
||||
graphics.lineStyle(lineW, color, 1); |
||||
graphics.moveTo(pos.x, pos.y); |
||||
} else if (pos.type == 'l') { |
||||
graphics.lineTo(pos.x, pos.y); |
||||
} else if (pos.type == 'b') { |
||||
graphics.bezierCurveTo(pos.x, pos.y, pos.x2, pos.y2, pos.x3, pos.y3); |
||||
} |
||||
if (line.closePath) { |
||||
graphics.closePath(); |
||||
} |
||||
} |
||||
|
||||
} |
||||
} |
||||
|
||||
function animate(t) { |
||||
requestAnimationFrame(animate); |
||||
|
||||
const x = (sw - leon.rect.w) / 2; |
||||
const y = (sh - leon.rect.h) / 2; |
||||
leon.position(x + moveX, y + moveY); |
||||
|
||||
const total = tiling.length; |
||||
let i, p; |
||||
for (i = 0; i < total; i++) { |
||||
p = tiling[i]; |
||||
p.item.tilePosition.x += p.x * leon.scale; |
||||
p.item.tilePosition.y += p.y * leon.scale; |
||||
} |
||||
|
||||
renderer.render(stage); |
||||
} |
||||
|
||||
function getNum() { |
||||
cur += 1; |
||||
if (cur == textures.length) { |
||||
cur = 0; |
||||
} |
||||
return cur; |
||||
} |
||||
|
||||
function shuffle(oldArray) { |
||||
var newArray = oldArray.slice(), |
||||
len = newArray.length, |
||||
i = len, p, t; |
||||
while (i--) { |
||||
p = (Math.random()*len) | 0; |
||||
t = newArray[i]; |
||||
newArray[i] = newArray[p]; |
||||
newArray[p] = t; |
||||
} |
||||
return newArray; |
||||
} |
||||
|
||||
window.onload = () => { |
||||
init(); |
||||
}; |
||||
</script> |
||||
</body> |
||||
|
||||
</html> |
||||
@ -1,230 +0,0 @@
@@ -1,230 +0,0 @@
|
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
|
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"> |
||||
<title>Leon Sans - Metaball PIXI</title> |
||||
<style> |
||||
html, |
||||
body { |
||||
width: 100%; |
||||
height: 100%; |
||||
overflow: hidden; |
||||
outline: 0; |
||||
margin: 0; |
||||
padding: 0; |
||||
cursor: move; |
||||
} |
||||
</style> |
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script> |
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script> |
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.0.4/pixi.min.js"></script> |
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.js"></script> |
||||
</head> |
||||
|
||||
<body> |
||||
<script src="../dist/leon.js"></script> |
||||
<script src="js/util.js"></script> |
||||
<script> |
||||
let container, texture, particleCon; |
||||
let leon, controll, weightControll; |
||||
const particleTotal = 10000; |
||||
let particles = []; |
||||
|
||||
function init() { |
||||
generatePixi(0x000000); |
||||
|
||||
texture = PIXI.Texture.from('data/drop-alpha.png'); |
||||
particleCon = new PIXI.ParticleContainer(particleTotal, { |
||||
vertices: false, |
||||
scale: true, |
||||
position: true, |
||||
rotation: false, |
||||
uvs: false, |
||||
alpha: false |
||||
}); |
||||
stage.addChild(particleCon); |
||||
|
||||
let p, i; |
||||
for (i = 0; i < particleTotal; i++) { |
||||
p = new PIXI.Sprite(texture); |
||||
p.x = sw / 2; |
||||
p.y = sh / 2; |
||||
p.anchor.set(0.5); |
||||
p.scale.x = p.scale.y = 0; |
||||
particleCon.addChild(p); |
||||
particles.push(p); |
||||
} |
||||
|
||||
const blurFilter = new PIXI.filters.BlurFilter(); |
||||
blurFilter.blur = 10; |
||||
blurFilter.autoFit = true; |
||||
|
||||
const fragSource = [ |
||||
'precision mediump float;', |
||||
'varying vec2 vTextureCoord;', |
||||
'uniform sampler2D uSampler;', |
||||
'uniform float threshold;', |
||||
'uniform float mr;', |
||||
'uniform float mg;', |
||||
'uniform float mb;', |
||||
'void main(void)', |
||||
'{', |
||||
' vec4 color = texture2D(uSampler, vTextureCoord);', |
||||
' vec3 mcolor = vec3(mr, mg, mb);', |
||||
' if (color.a > threshold) {', |
||||
' gl_FragColor = vec4(mcolor, 1.0);', |
||||
' } else {', |
||||
' gl_FragColor = vec4(vec3(0.0), 0.0);', |
||||
' }', |
||||
'}' |
||||
].join('\n'); |
||||
|
||||
const uniformsData = { |
||||
threshold: 0.5, |
||||
mr: 255.0/255.0, |
||||
mg: 255.0/255.0, |
||||
mb: 255.0/255.0, |
||||
}; |
||||
|
||||
const thresholdFilter = new PIXI.Filter(null, fragSource, uniformsData); |
||||
stage.filters = [blurFilter, thresholdFilter]; |
||||
stage.filterArea = renderer.screen; |
||||
|
||||
controll = { |
||||
weight: 3, |
||||
color: {}, |
||||
outline: true, |
||||
drawing: () => { |
||||
let i; |
||||
for (i = 0; i < particleTotal; i++) { |
||||
TweenMax.killTweensOf(particles[i].scale); |
||||
TweenMax.set(particles[i].scale, { |
||||
x: 0, |
||||
y: 0 |
||||
}); |
||||
TweenMax.to(particles[i].scale, 3, { |
||||
delay: 0.001 * i, |
||||
x: particles[i].saveScale, |
||||
y: particles[i].saveScale, |
||||
ease: Circ.easeOut |
||||
}); |
||||
} |
||||
} |
||||
}; |
||||
|
||||
leon = new LeonSans({ |
||||
text: 'TOP\n678', |
||||
size: getSize(400), |
||||
weight: 700, |
||||
pathGap: -1, |
||||
isPath: true, |
||||
tracking: 0 |
||||
}); |
||||
leon.on('update', (model) => { |
||||
update(); |
||||
}); |
||||
|
||||
const gui = new dat.GUI(); |
||||
gui.add(leon, 'text'); |
||||
const sizeControll = gui.add(leon, 'size', 200, 1000); |
||||
gui.add(leon, 'tracking', -6, 10); |
||||
gui.add(leon, 'leading', -8, 10); |
||||
weightControll = gui.add(controll, 'weight', 1, 9); |
||||
gui.add(controll, 'drawing'); |
||||
const colorControll = gui.add(controll, 'color', [ 'white', 'black', 'red'] ); |
||||
|
||||
sizeControll.onChange((value) => { |
||||
sizeWeight(); |
||||
}); |
||||
|
||||
weightControll.onChange((value) => { |
||||
update(); |
||||
}); |
||||
|
||||
colorControll.onChange((value) => { |
||||
if (value == 'white') { |
||||
renderer.backgroundColor = 0x000000; |
||||
uniformsData.mr = 255.0/255.0; |
||||
uniformsData.mg = 255.0/255.0; |
||||
uniformsData.mb = 255.0/255.0; |
||||
} else if (value == 'black') { |
||||
renderer.backgroundColor = 0xffffff; |
||||
uniformsData.mr = 0.0/255.0; |
||||
uniformsData.mg = 0.0/255.0; |
||||
uniformsData.mb = 0.0/255.0; |
||||
} else if (value == 'red') { |
||||
renderer.backgroundColor = 0xe4c143; |
||||
uniformsData.mr = 244.0/255.0; |
||||
uniformsData.mg = 46.0/255.0; |
||||
uniformsData.mb = 33.0/255.0; |
||||
} |
||||
}); |
||||
colorControll.setValue('white'); |
||||
|
||||
requestAnimationFrame(animate); |
||||
|
||||
sizeWeight(); |
||||
|
||||
TweenMax.delayedCall(0.1, () => { |
||||
controll.drawing(); |
||||
}); |
||||
} |
||||
|
||||
function sizeWeight() { |
||||
let w; |
||||
if (leon.size > 400) { |
||||
w = (1.5 - 3) / (1000 - 400) * (leon.size - 400) + 3; |
||||
} else { |
||||
w = (3 - 6) / (400 - 200) * (leon.size - 200) + 6; |
||||
} |
||||
weightControll.setValue(w); |
||||
} |
||||
|
||||
function update() { |
||||
const total = leon.paths.length; |
||||
const sw2 = sw / 2; |
||||
const sh2 = sh / 2; |
||||
let i, p, pos, scale; |
||||
for (i = 0; i < particleTotal; i++) { |
||||
p = particles[i]; |
||||
TweenMax.killTweensOf(p.scale); |
||||
if (i < total) { |
||||
pos = leon.paths[i]; |
||||
if (pos.type == 'a') { |
||||
scale = controll.weight * 0.025* leon.scale; |
||||
} else { |
||||
scale = controll.weight * 0.01* leon.scale; |
||||
} |
||||
p.saveScale = scale; |
||||
p.x = pos.x; |
||||
p.y = pos.y; |
||||
p.scale.x = p.scale.y = scale; |
||||
} else { |
||||
p.saveScale = 0; |
||||
p.x = -1000; |
||||
p.y = -1000; |
||||
p.scale.x = p.scale.y = 0; |
||||
} |
||||
} |
||||
} |
||||
|
||||
function animate(t) { |
||||
requestAnimationFrame(animate); |
||||
|
||||
const x = (sw - leon.rect.w) / 2; |
||||
const y = (sh - leon.rect.h) / 2; |
||||
leon.position(x + moveX, y + moveY); |
||||
|
||||
renderer.render(stage); |
||||
} |
||||
|
||||
window.onload = () => { |
||||
init(); |
||||
}; |
||||
</script> |
||||
</body> |
||||
|
||||
</html> |
||||
@ -1,232 +0,0 @@
@@ -1,232 +0,0 @@
|
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
|
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"> |
||||
<title>Leon Sans - Morphing PIXI</title> |
||||
|
||||
<style> |
||||
html, |
||||
body { |
||||
width: 100%; |
||||
height: 100%; |
||||
overflow: hidden; |
||||
outline: 0; |
||||
margin: 0; |
||||
padding: 0; |
||||
cursor: move; |
||||
} |
||||
</style> |
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script> |
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script> |
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.0.4/pixi.min.js"></script> |
||||
<script src="https://cdn.jsdelivr.net/npm/pixi-filters@latest/dist/pixi-filters.js"></script> |
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.js"></script> |
||||
</head> |
||||
|
||||
<body> |
||||
<script src="../dist/leon.js"></script> |
||||
<script src="js/util.js"></script> |
||||
<script> |
||||
let container, texture, particleCon; |
||||
let leon, controll; |
||||
const particleTotal = 5000; |
||||
let particles = []; |
||||
let myText = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789?!$^&*(){}[]<>~:;,.\'"+=-_@#%'.split(''); |
||||
const textTotal = myText.length; |
||||
let curText = -1; |
||||
let DELAY_TIME = 0.8; |
||||
|
||||
function init() { |
||||
generatePixi(0xfec82e); |
||||
|
||||
myText = shuffle(myText); |
||||
|
||||
texture = PIXI.Texture.from('data/drop-alpha.png'); |
||||
|
||||
particleCon = new PIXI.ParticleContainer(particleTotal, { |
||||
vertices: false, |
||||
scale: true, |
||||
position: true, |
||||
rotation: false, |
||||
uvs: false, |
||||
alpha: false |
||||
}); |
||||
stage.addChild(particleCon); |
||||
|
||||
let p, i; |
||||
for (i = 0; i < particleTotal; i++) { |
||||
p = new PIXI.Sprite(texture); |
||||
p.x = sw / 2; |
||||
p.y = sh / 2; |
||||
p.anchor.set(0.5); |
||||
p.scale.x = p.scale.y = 0; |
||||
particleCon.addChild(p); |
||||
particles.push(p); |
||||
} |
||||
|
||||
const blurFilter = new PIXI.filters.BlurFilter(); |
||||
blurFilter.blur = 10; |
||||
blurFilter.autoFit = true; |
||||
|
||||
const fragSource = [ |
||||
'precision mediump float;', |
||||
'varying vec2 vTextureCoord;', |
||||
'uniform sampler2D uSampler;', |
||||
'uniform float threshold;', |
||||
'uniform float mr;', |
||||
'uniform float mg;', |
||||
'uniform float mb;', |
||||
'void main(void)', |
||||
'{', |
||||
' vec4 color = texture2D(uSampler, vTextureCoord);', |
||||
' vec3 mcolor = vec3(mr, mg, mb);', |
||||
' if (color.a > threshold) {', |
||||
' gl_FragColor = vec4(mcolor, 1.0);', |
||||
' } else {', |
||||
' gl_FragColor = vec4(vec3(0.0), 0.0);', |
||||
' }', |
||||
'}' |
||||
].join('\n'); |
||||
|
||||
const uniformsData = { |
||||
threshold: 0.5, |
||||
mr: 255.0/255.0, |
||||
mg: 255.0/255.0, |
||||
mb: 255.0/255.0, |
||||
}; |
||||
|
||||
const thresholdFilter = new PIXI.Filter(null, fragSource, uniformsData ); |
||||
|
||||
const outlineFilterBlue = new PIXI.filters.OutlineFilter(1, 0x000000); |
||||
|
||||
stage.filters = [blurFilter, thresholdFilter, outlineFilterBlue]; |
||||
stage.filterArea = renderer.screen; |
||||
|
||||
controll = { |
||||
weight: 6, |
||||
outline: true |
||||
}; |
||||
|
||||
leon = new LeonSans({ |
||||
text: '', |
||||
size: 600, |
||||
weight: 700, |
||||
pathGap: -1, |
||||
isPath: true |
||||
}); |
||||
leon.on('update', (data) => { |
||||
update(data); |
||||
}); |
||||
|
||||
const gui = new dat.GUI(); |
||||
gui.add(leon, 'size', 400, 1000); |
||||
gui.add(controll, 'weight', 3, 9); |
||||
const otControll = gui.add(controll, 'outline'); |
||||
otControll.onChange((value) => { |
||||
if (value) { |
||||
stage.filters = [blurFilter, thresholdFilter, outlineFilterBlue]; |
||||
} else { |
||||
stage.filters = [blurFilter, thresholdFilter]; |
||||
} |
||||
}); |
||||
|
||||
requestAnimationFrame(animate); |
||||
|
||||
showText(); |
||||
} |
||||
|
||||
function nextText() { |
||||
TweenMax.killDelayedCallsTo(showText); |
||||
TweenMax.delayedCall(DELAY_TIME, showText); |
||||
} |
||||
|
||||
function showText() { |
||||
curText += 1; |
||||
if (curText == textTotal) curText = 0; |
||||
leon.text = myText[curText]; |
||||
nextText(); |
||||
} |
||||
|
||||
function shuffle(oldArray) { |
||||
var newArray = oldArray.slice(), |
||||
len = newArray.length, |
||||
i = len, p, t; |
||||
while (i--) { |
||||
p = (Math.random()*len) | 0; |
||||
t = newArray[i]; |
||||
newArray[i] = newArray[p]; |
||||
newArray[p] = t; |
||||
} |
||||
return newArray; |
||||
} |
||||
|
||||
function update(model) { |
||||
const total = model.paths.length; |
||||
const sw2 = sw / 2; |
||||
const sh2 = sh / 2; |
||||
let i, p, pos, scale; |
||||
for (i = 0; i < particleTotal; i++) { |
||||
p = particles[i]; |
||||
TweenMax.killTweensOf(p); |
||||
if (i < total) { |
||||
pos = model.paths[i]; |
||||
if (pos.type == 'a') { |
||||
scale = controll.weight * 0.02* leon.scale; |
||||
} else { |
||||
scale = controll.weight * 0.01* leon.scale; |
||||
} |
||||
TweenMax.to(p, 0.4, { |
||||
x: sw2, |
||||
y: sh2, |
||||
ease: Sine.easeIn |
||||
}); |
||||
TweenMax.to(p, 0.5, { |
||||
delay: 0.3, |
||||
x: pos.x, |
||||
y: pos.y, |
||||
ease: Expo.easeOut |
||||
}); |
||||
TweenMax.to(p.scale, 0.5, { |
||||
delay: 0.3, |
||||
x: scale, |
||||
y: scale, |
||||
ease: Expo.easeOut |
||||
}); |
||||
} else { |
||||
TweenMax.to(p, 0.3, { |
||||
x: sw2, |
||||
y: sh2, |
||||
ease: Sine.easeIn |
||||
}); |
||||
TweenMax.to(p.scale, 0.3, { |
||||
x: 0, |
||||
y: 0, |
||||
ease: Sine.easeIn |
||||
}); |
||||
|
||||
} |
||||
} |
||||
} |
||||
|
||||
function animate(t) { |
||||
requestAnimationFrame(animate); |
||||
|
||||
const x = (sw - leon.rect.w) / 2; |
||||
const y = (sh - leon.rect.h) / 2; |
||||
leon.position(x, y); |
||||
|
||||
renderer.render(stage); |
||||
} |
||||
|
||||
window.onload = () => { |
||||
init(); |
||||
}; |
||||
|
||||
</script> |
||||
</body> |
||||
|
||||
</html> |
||||
@ -1,94 +0,0 @@
@@ -1,94 +0,0 @@
|
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
|
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"> |
||||
<title>Leon Sans - Pattern</title> |
||||
|
||||
<style> |
||||
html, body { |
||||
width: 100%; |
||||
height: 100%; |
||||
overflow: hidden; |
||||
outline: 0; |
||||
margin: 0; |
||||
padding: 0; |
||||
background-color: #502c8d; |
||||
cursor: move; |
||||
} |
||||
</style> |
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script> |
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script> |
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.js"></script> |
||||
</head> |
||||
|
||||
<body> |
||||
<script src="../dist/leon.js"></script> |
||||
<script src="js/util.js"></script> |
||||
<script> |
||||
let leon, controll; |
||||
|
||||
function init() { |
||||
generateCanvas(); |
||||
|
||||
controll = { |
||||
color: {}, |
||||
align: {}, |
||||
patternWidth: 40, |
||||
patternHeight: 10, |
||||
drawing: () => { |
||||
let i, total = leon.drawing.length; |
||||
for (i = 0; i < total; i++) { |
||||
TweenMax.killTweensOf(leon.drawing[i]); |
||||
TweenMax.fromTo(leon.drawing[i], 2, { |
||||
value: 0 |
||||
}, { |
||||
delay: i * 0.05, |
||||
value: 1, |
||||
ease: Power4.easeOut |
||||
}); |
||||
} |
||||
} |
||||
}; |
||||
|
||||
leon = new LeonSans({ |
||||
text: 'The quick brown\nfox jumps over\nthe lazy dog', |
||||
size: getSize(120), |
||||
weight: 400, |
||||
isPath: true, |
||||
pathGap: 0.2 |
||||
}); |
||||
|
||||
const gui = new dat.GUI(); |
||||
gui.add(leon, 'text'); |
||||
gui.add(leon, 'size', 20, 300); |
||||
gui.add(leon, 'pathGap', 0, 1); |
||||
gui.add(controll, 'patternWidth', 1, 200); |
||||
gui.add(controll, 'patternHeight', 1, 100); |
||||
gui.add(controll, 'drawing'); |
||||
|
||||
requestAnimationFrame(animate); |
||||
} |
||||
|
||||
function animate(t) { |
||||
requestAnimationFrame(animate); |
||||
|
||||
ctx.clearRect(0, 0, sw, sh); |
||||
|
||||
const x = (sw - leon.rect.w) / 2; |
||||
const y = (sh - leon.rect.h) / 2; |
||||
leon.position(x + moveX, y + moveY); |
||||
|
||||
leon.pattern(ctx, controll.patternWidth, controll.patternHeight); |
||||
} |
||||
|
||||
window.onload = () => { |
||||
init(); |
||||
}; |
||||
</script> |
||||
</body> |
||||
|
||||
</html> |
||||
@ -1,227 +0,0 @@
@@ -1,227 +0,0 @@
|
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
|
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"> |
||||
<title>Leon Sans - Plants PIXI</title> |
||||
<style> |
||||
html, |
||||
body { |
||||
width: 100%; |
||||
height: 100%; |
||||
overflow: hidden; |
||||
outline: 0; |
||||
margin: 0; |
||||
padding: 0; |
||||
cursor: move; |
||||
} |
||||
</style> |
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script> |
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script> |
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.0.4/pixi.min.js"></script> |
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.js"></script> |
||||
</head> |
||||
|
||||
<body> |
||||
<script src="../dist/leon.js"></script> |
||||
<script src="js/util.js"></script> |
||||
<script> |
||||
let container, loader, resource; |
||||
let leafs = [], flowers = []; |
||||
let leon, controll; |
||||
const tintLeaf = [ |
||||
0xFFFFFF, |
||||
0xFFFF00, |
||||
0xccff00, |
||||
0x00ff1e, |
||||
0xffb300, |
||||
0xa2ff00 |
||||
]; |
||||
const tintFlower = [ |
||||
0xFFFFFF, |
||||
0xffeea1, |
||||
0xffa1a1, |
||||
0xeca1ff, |
||||
0xa1dbff, |
||||
0xffa1d6, |
||||
0xd2ffa1, |
||||
]; |
||||
|
||||
function init() { |
||||
generatePixi(0xf0f0f0); |
||||
|
||||
container = new PIXI.Container(); |
||||
stage.addChild(container); |
||||
|
||||
loader = new PIXI.Loader(); |
||||
loader.add('branch_long', 'data/branch_long.png') |
||||
.add('branch_circle', 'data/branch_circle.png') |
||||
.add('flower1', 'data/flower1.png') |
||||
.add('flower2', 'data/flower2.png') |
||||
.add('flower3', 'data/flower3.png') |
||||
.add('leaf1', 'data/leaf1.png') |
||||
.add('leaf2', 'data/leaf2.png'); |
||||
|
||||
loader.load((loader, resources) => { |
||||
resource = resources; |
||||
|
||||
flowers.push('flower1'); |
||||
flowers.push('flower2'); |
||||
flowers.push('flower3'); |
||||
|
||||
leafs.push('leaf1'); |
||||
leafs.push('leaf1'); |
||||
leafs.push('leaf2'); |
||||
|
||||
loaded(); |
||||
}); |
||||
} |
||||
|
||||
function loaded() { |
||||
controll = { |
||||
color: {}, |
||||
}; |
||||
|
||||
leon = new LeonSans({ |
||||
text: 'ONE', |
||||
size: getSize(500), |
||||
weight: 1, |
||||
pathGap: -1, |
||||
tracking: 0, |
||||
isPath: true |
||||
}); |
||||
leon.on('update', (data) => { |
||||
update(data); |
||||
}); |
||||
|
||||
const gui = new dat.GUI(); |
||||
gui.add(leon, 'text'); |
||||
gui.add(leon, 'tracking', -3, 10); |
||||
|
||||
window.addEventListener('resize', resize, false); |
||||
requestAnimationFrame(animate); |
||||
} |
||||
|
||||
function resize() { |
||||
sw = document.body.clientWidth; |
||||
sh = document.body.clientHeight; |
||||
|
||||
renderer.resize(sw, sh); |
||||
} |
||||
|
||||
function update() { |
||||
while(container.children[0]) { |
||||
TweenMax.killTweensOf(container.children[0]); |
||||
container.removeChild(container.children[0]); |
||||
} |
||||
|
||||
let points, saveFlowers = [], saveLeafs = []; |
||||
let total = leon.model.data.length; |
||||
let i, j, j_total, d, pos; |
||||
for (i = 0; i < total; i++) { |
||||
d = leon.model.data[i]; |
||||
j_total = d.paths.length; |
||||
points = []; |
||||
for (j = 0; j < j_total; j++) { |
||||
pos = d.paths[j]; |
||||
|
||||
if (pos.type == 'a') { |
||||
const dot = new PIXI.Sprite(resource.branch_circle.texture); |
||||
dot.anchor.set(0.5); |
||||
dot.x = pos.x; |
||||
dot.y = pos.y; |
||||
const scale = 0.15 * leon.scale; |
||||
dot.scale.x = dot.scale.y = scale; |
||||
container.addChild(dot); |
||||
} else if (pos.start == 1) { |
||||
if (points.length > 0) { |
||||
addBranch(points); |
||||
} |
||||
points = []; |
||||
points.push(new PIXI.Point(pos.x, pos.y)); |
||||
} else { |
||||
points.push(new PIXI.Point(pos.x, pos.y)); |
||||
} |
||||
|
||||
if (Math.random() > 0.99) { |
||||
saveFlowers.push(pos); |
||||
} |
||||
|
||||
if (Math.random() > 0.84) { |
||||
saveLeafs.push(pos); |
||||
} |
||||
} |
||||
|
||||
if (points.length > 0) { |
||||
addBranch(points); |
||||
} |
||||
} |
||||
|
||||
function addBranch(points) { |
||||
const branch = new PIXI.SimpleRope(resource.branch_long.texture, points); |
||||
container.addChild(branch); |
||||
} |
||||
|
||||
total = saveLeafs.length; |
||||
for (i = 0; i < total; i++) { |
||||
pos = saveLeafs[i]; |
||||
d = leafs[Math.floor(0.5 + (Math.random()*(leafs.length-1)))]; |
||||
const leaf = new PIXI.Sprite(resource[d].texture); |
||||
leaf.anchor.set(0.5, 1); |
||||
leaf.x = pos.x; |
||||
leaf.y = pos.y; |
||||
const scale = 0.1 * (0.2 + Math.random() * (1.2 - 0.2)) * leon.scale; |
||||
leaf.scale.x = leaf.scale.y = 0; |
||||
leaf.rotation = (pos.rotation + (90 * (Math.PI / 180)) * (Math.random() > 0.5 ? 1 : -1)) + (Math.random() * (Math.PI / 2) - (Math.PI / 4)); |
||||
container.addChild(leaf); |
||||
leaf.tint = tintLeaf[Math.floor(0.5 + (Math.random()*(tintLeaf.length-1)))]; |
||||
TweenMax.to(leaf.scale, 0.8, { |
||||
delay: 0.004 * i, |
||||
x: scale, |
||||
y: scale, |
||||
ease: Power3.easeOut |
||||
}); |
||||
} |
||||
|
||||
total = saveFlowers.length; |
||||
for (i = 0; i < total; i++) { |
||||
pos = saveFlowers[i]; |
||||
d = flowers[Math.floor(0.5 + (Math.random()*(flowers.length-1)))]; |
||||
const flower = new PIXI.Sprite(resource[d].texture); |
||||
flower.anchor.set(0.5); |
||||
flower.x = pos.x; |
||||
flower.y = pos.y; |
||||
const scale = 0.04 * (0.6 + Math.random() * (1.2 - 0.6)) * leon.scale; |
||||
flower.scale.x = flower.scale.y = 0; |
||||
flower.rotation = Math.random() * Math.PI * 2; |
||||
container.addChild(flower); |
||||
flower.tint = tintFlower[Math.floor(0.5 + (Math.random()*(tintFlower.length-1)))]; |
||||
TweenMax.to(flower.scale, 0.8, { |
||||
delay: 0.05 * i + 0.6, |
||||
x: scale, |
||||
y: scale, |
||||
ease: Power3.easeOut |
||||
}); |
||||
} |
||||
} |
||||
|
||||
function animate(t) { |
||||
requestAnimationFrame(animate); |
||||
|
||||
const x = (sw - leon.rect.w) / 2; |
||||
const y = (sh - leon.rect.h) / 2; |
||||
leon.position(x + moveX, y + moveY); |
||||
|
||||
renderer.render(stage); |
||||
} |
||||
|
||||
window.onload = () => { |
||||
init(); |
||||
}; |
||||
</script> |
||||
</body> |
||||
|
||||
</html> |
||||
@ -1,82 +0,0 @@
@@ -1,82 +0,0 @@
|
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
|
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"> |
||||
<title>Leon Sans - Wave</title> |
||||
|
||||
<style> |
||||
html, body { |
||||
width: 100%; |
||||
height: 100%; |
||||
overflow: hidden; |
||||
outline: 0; |
||||
margin: 0; |
||||
padding: 0; |
||||
background-color: #000000; |
||||
cursor: move; |
||||
} |
||||
</style> |
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script> |
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script> |
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.js"></script> |
||||
</head> |
||||
|
||||
<body> |
||||
<script src="../dist/leon.js"></script> |
||||
<script src="js/util.js"></script> |
||||
<script> |
||||
let leon, controll; |
||||
|
||||
function init() { |
||||
generateCanvas(); |
||||
|
||||
const controll = { |
||||
color: {}, |
||||
align: {}, |
||||
}; |
||||
|
||||
leon = new LeonSans({ |
||||
text: 'The quick brown\nfox jumps over\nthe lazy dog', |
||||
color: ['#ffffff'], |
||||
size: getSize(120), |
||||
weight: 1, |
||||
isWave: true, |
||||
pathGap: 0.3, |
||||
amplitude: 0.5, |
||||
fps: 30 |
||||
}); |
||||
|
||||
const gui = new dat.GUI(); |
||||
gui.add(leon, 'text'); |
||||
gui.add(leon, 'size', 20, 300); |
||||
gui.add(leon, 'weight', 1, 300); |
||||
gui.add(leon, 'pathGap', 0, 1); |
||||
gui.add(leon, 'amplitude', 0, 1); |
||||
gui.add(leon, 'fps', 10, 60); |
||||
|
||||
requestAnimationFrame(animate); |
||||
} |
||||
|
||||
function animate(t) { |
||||
requestAnimationFrame(animate); |
||||
|
||||
ctx.clearRect(0, 0, sw, sh); |
||||
|
||||
const x = (sw - leon.rect.w) / 2; |
||||
const y = (sh - leon.rect.h) / 2; |
||||
leon.position(x + moveX, y + moveY); |
||||
|
||||
leon.wave(ctx, t); |
||||
} |
||||
|
||||
window.onload = () => { |
||||
init(); |
||||
}; |
||||
</script> |
||||
</body> |
||||
|
||||
</html> |
||||
@ -1,124 +0,0 @@
@@ -1,124 +0,0 @@
|
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
|
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"> |
||||
<title>Leon Sans - WebGL Basic PIXI</title> |
||||
|
||||
<style> |
||||
html, body { |
||||
width: 100%; |
||||
height: 100%; |
||||
overflow: hidden; |
||||
outline: 0; |
||||
margin: 0; |
||||
padding: 0; |
||||
cursor: move; |
||||
} |
||||
</style> |
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script> |
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script> |
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.0.4/pixi.min.js"></script> |
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.js"></script> |
||||
</head> |
||||
|
||||
<body> |
||||
<script src="../dist/leon.js"></script> |
||||
<script src="js/util.js"></script> |
||||
<script> |
||||
let graphics; |
||||
let leon, controll; |
||||
|
||||
function init() { |
||||
generatePixi(0x000000); |
||||
|
||||
graphics = new PIXI.Graphics(); |
||||
stage.addChild(graphics); |
||||
|
||||
controll = { |
||||
color: {}, |
||||
align: {}, |
||||
drawing: () => { |
||||
leon.updateDrawingPaths(); |
||||
|
||||
let i, total = leon.drawing.length; |
||||
for (i = 0; i < total; i++) { |
||||
TweenMax.killTweensOf(leon.drawing[i]); |
||||
TweenMax.fromTo(leon.drawing[i], 1.6, { |
||||
value: 0 |
||||
}, { |
||||
delay: i * 0.05, |
||||
value: 1, |
||||
ease: Power4.easeOut |
||||
}); |
||||
} |
||||
}, |
||||
}; |
||||
|
||||
leon = new LeonSans({ |
||||
text: 'The quick brown\nfox jumps over\nthe lazy dog', |
||||
color: [0xffffff], |
||||
size: getSize(120), |
||||
weight: 300 |
||||
}); |
||||
|
||||
const gui = new dat.GUI(); |
||||
gui.add(leon, 'text'); |
||||
gui.add(leon, 'size', 10, 2000); |
||||
gui.add(leon, 'weight', 1, 900); |
||||
gui.add(leon, 'tracking', -3, 10); |
||||
gui.add(leon, 'leading', -8, 10); |
||||
const alignControll = gui.add(controll, 'align', [ 'left', 'center', 'right'] ); |
||||
gui.add(leon, 'maxWidth', 0, 2000); |
||||
gui.add(leon, 'breakWord'); |
||||
gui.add(controll, 'drawing'); |
||||
const colorControll = gui.add(controll, 'color', [ 'black', 'white', 'yellow' , 'mixed'] ); |
||||
|
||||
alignControll.onChange((value) => { |
||||
leon.align = value; |
||||
}); |
||||
alignControll.setValue('left'); |
||||
|
||||
colorControll.onChange((value) => { |
||||
if (value == 'black') { |
||||
renderer.backgroundColor = 0xf0f0f0; |
||||
leon.color = [0x342f2e]; |
||||
} else if (value == 'white') { |
||||
renderer.backgroundColor = 0x000000; |
||||
leon.color = [0xffffff]; |
||||
} else if (value == 'yellow') { |
||||
renderer.backgroundColor = 0x57c4e2; |
||||
leon.color = [0xffd93c]; |
||||
} else if (value == 'mixed') { |
||||
document.body.style.backgroundColor = '#ffffff'; |
||||
leon.color = [0xff5892, 0xbc92f, 0xffd93c, 0xc0008b]; |
||||
} |
||||
}); |
||||
colorControll.setValue('white'); |
||||
|
||||
requestAnimationFrame(animate); |
||||
} |
||||
|
||||
function animate(t) { |
||||
requestAnimationFrame(animate); |
||||
|
||||
const x = (sw - leon.rect.w) / 2; |
||||
const y = (sh - leon.rect.h) / 2; |
||||
leon.position(x + moveX, y + moveY); |
||||
|
||||
graphics.clear(); |
||||
leon.drawPixi(graphics); |
||||
|
||||
renderer.render(stage); |
||||
} |
||||
|
||||
window.onload = () => { |
||||
init(); |
||||
}; |
||||
</script> |
||||
</body> |
||||
|
||||
</html> |
||||
|
After Width: | Height: | Size: 23 KiB |
|
After Width: | Height: | Size: 332 KiB |
|
After Width: | Height: | Size: 677 KiB |
|
After Width: | Height: | Size: 79 KiB |
|
After Width: | Height: | Size: 962 KiB |
|
After Width: | Height: | Size: 948 KiB |
|
After Width: | Height: | Size: 482 KiB |
|
After Width: | Height: | Size: 286 KiB |
|
After Width: | Height: | Size: 676 KiB |
|
After Width: | Height: | Size: 575 KiB |
|
After Width: | Height: | Size: 534 KiB |
|
After Width: | Height: | Size: 926 KiB |
|
After Width: | Height: | Size: 281 KiB |
@ -1,17 +0,0 @@
@@ -1,17 +0,0 @@
|
||||
export function setAlignGapX(sw, tw) { |
||||
return { |
||||
c: (sw - tw) / 2, |
||||
r: sw - tw, |
||||
l: 0 |
||||
}; |
||||
} |
||||
|
||||
export function getAlignGapX(align, alignGapX) { |
||||
if (align == 'center') { |
||||
return alignGapX.c; |
||||
} else if (align == 'right') { |
||||
return alignGapX.r; |
||||
} else { |
||||
return alignGapX.l; |
||||
} |
||||
} |
||||
@ -1,46 +0,0 @@
@@ -1,46 +0,0 @@
|
||||
export class Dispatcher { |
||||
constructor() { |
||||
this.handlers_ = { |
||||
update: { |
||||
listeners: [] |
||||
} |
||||
}; |
||||
} |
||||
|
||||
on(event, callback) { |
||||
if (typeof callback !== 'function') { |
||||
console.error(`The listener callback must be a function, the given type is ${typeof callback}`); |
||||
return false; |
||||
} |
||||
|
||||
if (typeof event !== 'string') { |
||||
console.error(`The event name must be a string, the given type is ${typeof event}`); |
||||
return false; |
||||
} |
||||
|
||||
if (this.handlers_[event] === undefined) { |
||||
this.handlers_[event] = { |
||||
listeners: [] |
||||
}; |
||||
} |
||||
|
||||
this.handlers_[event].listeners.push(callback); |
||||
} |
||||
|
||||
off(event, callback) { |
||||
if (this.handlers_[event] === undefined) { |
||||
console.error(`This event: ${event} does not exist`); |
||||
return false; |
||||
} |
||||
|
||||
this.handlers_[event].listeners = this.handlers_[event].listeners.filter(listener => { |
||||
return listener.toString() !== callback.toString(); |
||||
}); |
||||
} |
||||
|
||||
dispatch(event, data) { |
||||
this.handlers_[event].listeners.forEach((listener) => { |
||||
listener(data); |
||||
}); |
||||
} |
||||
} |
||||
@ -1,125 +0,0 @@
@@ -1,125 +0,0 @@
|
||||
import { |
||||
getRect |
||||
} from './util.js'; |
||||
import { |
||||
typo |
||||
} from '../font/index.js'; |
||||
|
||||
export function getTextGroup(text, scale, width, isBreakAll) { |
||||
let group; |
||||
if (text.indexOf('\n') > 0) { |
||||
group = text.split('\n'); |
||||
} else if (text.indexOf('\\n') > 0) { |
||||
group = text.split('\\n'); |
||||
} else { |
||||
group = [text]; |
||||
} |
||||
if (width == 0) return keepAll(group); |
||||
else if (isBreakAll) return breakAll(group, scale, width); |
||||
else return breakWord(group, scale, width); |
||||
} |
||||
|
||||
function keepAll(group) { |
||||
const textGroup = []; |
||||
const total = group.length; |
||||
let i; |
||||
for (i = 0; i < total; i++) { |
||||
textGroup[i] = group[i].split(''); |
||||
} |
||||
return textGroup; |
||||
} |
||||
|
||||
function breakWord(group, scale, width) { |
||||
let g2, g3, t, m_rect, |
||||
tw = 0, |
||||
tw2 = 0, |
||||
i, j, k, |
||||
total, j_total, k_total, |
||||
index = 0; |
||||
const tg = []; |
||||
total = group.length; |
||||
for (i = 0; i < total; i++) { |
||||
g2 = group[i].split(' '); |
||||
tg[index] = []; |
||||
j_total = g2.length; |
||||
for (j = 0; j < j_total; j++) { |
||||
tw2 = 0; |
||||
g3 = g2[j]; |
||||
k_total = g3.length; |
||||
for (k = 0; k < k_total; k++) { |
||||
t = typo(g3[k]); |
||||
m_rect = getRect(t, scale); |
||||
tw2 += m_rect.w; |
||||
} |
||||
t = typo(' '); |
||||
m_rect = getRect(t, scale); |
||||
tw2 += m_rect.w; |
||||
tw += tw2; |
||||
if (tw > width) { |
||||
index += 1; |
||||
tw = tw2; |
||||
tg[index] = []; |
||||
} |
||||
tg[index].push(g3); |
||||
} |
||||
index += 1; |
||||
tw = 0; |
||||
} |
||||
|
||||
total = tg.length; |
||||
const textGroup = []; |
||||
for (i = 0; i < total; i++) { |
||||
t = tg[i].join(' ').split(''); |
||||
if (t.length > 0) { |
||||
textGroup.push(t); |
||||
} |
||||
} |
||||
|
||||
return textGroup; |
||||
} |
||||
|
||||
function breakAll(group, scale, width) { |
||||
let t, |
||||
i, total, |
||||
j, j_total, |
||||
m_rect, |
||||
g2, g3, |
||||
tw = 0, |
||||
index = 0, |
||||
tx = 0; |
||||
const tg = []; |
||||
|
||||
total = group.length; |
||||
for (i = 0; i < total; i++) { |
||||
g2 = group[i]; |
||||
tw = 0; |
||||
tx = 0; |
||||
tg[index] = []; |
||||
j_total = g2.length; |
||||
for (j = 0; j < j_total; j++) { |
||||
g3 = g2[j]; |
||||
t = typo(g3); |
||||
m_rect = getRect(t, scale); |
||||
tw += m_rect.w; |
||||
tg[index].push(g3); |
||||
if (tw >= width) { |
||||
index += 1; |
||||
tw = m_rect.w; |
||||
tg[index] = []; |
||||
} |
||||
} |
||||
index += 1; |
||||
} |
||||
|
||||
const textGroup = []; |
||||
total = tg.length; |
||||
for (i = 0; i < total; i++) { |
||||
t = tg[i]; |
||||
if (t.length > 0) { |
||||
if (t[0] == ' ') t.shift(); |
||||
if (t[t.length - 1] == ' ') t.pop(); |
||||
if (t.length > 0) textGroup.push(t); |
||||
} |
||||
} |
||||
return textGroup; |
||||
} |
||||
@ -1,45 +0,0 @@
@@ -1,45 +0,0 @@
|
||||
import { |
||||
RECT_RATIO |
||||
} from './util.js'; |
||||
|
||||
/** |
||||
* @name getGuide |
||||
* @property {Object} - typo data object from 'font/index.js' |
||||
* @property {Number} - scale |
||||
* @returns {Object} the guide pos array |
||||
* @description get a guide pos |
||||
*/ |
||||
export function getGuide(d, scale) { |
||||
let guide = [], |
||||
ggap = 10, |
||||
i, gvx, gvy; |
||||
for (i = 0; i < 6; i++) { |
||||
gvx = (ggap * i) + 20; |
||||
gvy = (ggap * i) + 90; |
||||
guide[i] = { |
||||
x1: (gvx * RECT_RATIO) * scale, |
||||
x2: ((d.rect.w - (gvx * 2)) * RECT_RATIO) * scale, |
||||
y1: (gvy * RECT_RATIO) * scale, |
||||
y2: (((d.rect.h - gvy) * RECT_RATIO) * scale) - ((i * ggap * RECT_RATIO) * scale), |
||||
}; |
||||
} |
||||
|
||||
return guide; |
||||
} |
||||
|
||||
/** |
||||
* @name getGuide |
||||
* @property {Object} - typo data object from 'font/index.js' |
||||
* @property {Number} - scale |
||||
* @returns {Object} the guide pos array |
||||
* @description get a guide pos |
||||
*/ |
||||
export function getGrid(d, scale) { |
||||
let grid = [], |
||||
i, gvy = [98, 340, 815]; |
||||
for (i = 0; i < 3; i++) { |
||||
grid[i] = (gvy[i] * RECT_RATIO) * scale; |
||||
} |
||||
|
||||
return grid; |
||||
} |
||||
@ -1,123 +0,0 @@
@@ -1,123 +0,0 @@
|
||||
export function getLengths(item, model) { |
||||
const total = item.typo.p.length; |
||||
let c, p, |
||||
arr = [], |
||||
lt = [], |
||||
max = 0, |
||||
i; |
||||
for (i = 0; i < total; i++) { |
||||
p = item.typo.p[i]; |
||||
c = getEachPath(item, p.v, model); |
||||
max += c.l; |
||||
arr.push(c.v); |
||||
lt.push(c.l); |
||||
} |
||||
return { |
||||
max: max, |
||||
lines: arr, |
||||
lengths: lt |
||||
}; |
||||
} |
||||
|
||||
function getEachPath(item, points, model) { |
||||
const total = points.length; |
||||
let i, p, |
||||
line, cp1, cp2, prev, |
||||
lines = [], |
||||
length = 0; |
||||
|
||||
for (i = 0; i < total; i++) { |
||||
p = points[i]; |
||||
line = {}; |
||||
cp2 = p.convert(item, model); |
||||
|
||||
if (i == 0 || p.type == 'a') { |
||||
line.x1 = cp2.x; |
||||
line.y1 = cp2.y; |
||||
line.distance = 0; |
||||
line.radius = cp2.radius; |
||||
} else { |
||||
cp1 = prev.convert(item, model); |
||||
|
||||
if (prev.type == 'b') { |
||||
line.x1 = cp1.x3; |
||||
line.y1 = cp1.y3; |
||||
} else { |
||||
line.x1 = cp1.x; |
||||
line.y1 = cp1.y; |
||||
} |
||||
|
||||
line.x2 = cp2.x; |
||||
line.y2 = cp2.y; |
||||
|
||||
if (p.type == 'b') { |
||||
line.x3 = cp2.x2; |
||||
line.y3 = cp2.y2; |
||||
line.x4 = cp2.x3; |
||||
line.y4 = cp2.y3; |
||||
line.distance = cubicBezierLength(line.x1, line.y1, line.x2, line.y2, line.x3, line.y3, line.x4, line.y4); |
||||
} else { |
||||
line.distance = distance(line.x1, line.y1, line.x2, line.y2); |
||||
} |
||||
} |
||||
|
||||
line.type = p.type; |
||||
line.rotation = p.ratio.r; |
||||
line.pat = p.ratio.p; |
||||
line.fix = p.ratio.f; |
||||
line.vt = p.ratio.v; |
||||
|
||||
lines.push(line); |
||||
length += line.distance; |
||||
|
||||
prev = p; |
||||
} |
||||
|
||||
return { |
||||
v: lines, |
||||
l: length |
||||
}; |
||||
} |
||||
|
||||
export function cubicBezierLength(x1, y1, x2, y2, x3, y3, x4, y4, sampleCount) { |
||||
const ptCount = sampleCount || 40; |
||||
let totDist = 0; |
||||
let lastX = x1; |
||||
let lastY = y1; |
||||
let dx, dy, i, pt; |
||||
for (i = 1; i < ptCount; i++) { |
||||
pt = cubicQxy(i / ptCount, x1, y1, x2, y2, x3, y3, x4, y4); |
||||
dx = pt.x - lastX; |
||||
dy = pt.y - lastY; |
||||
totDist += Math.sqrt(dx * dx + dy * dy); |
||||
lastX = pt.x; |
||||
lastY = pt.y; |
||||
} |
||||
dx = x4 - lastX; |
||||
dy = y4 - lastY; |
||||
totDist += Math.sqrt(dx * dx + dy * dy); |
||||
return totDist; |
||||
} |
||||
|
||||
function cubicQxy(t, x1, y1, x2, y2, x3, y3, x4, y4) { |
||||
x1 += (x2 - x1) * t; |
||||
x2 += (x3 - x2) * t; |
||||
x3 += (x4 - x3) * t; |
||||
x1 += (x2 - x1) * t; |
||||
x2 += (x3 - x2) * t; |
||||
y1 += (y2 - y1) * t; |
||||
y2 += (y3 - y2) * t; |
||||
y3 += (y4 - y3) * t; |
||||
y1 += (y2 - y1) * t; |
||||
y2 += (y3 - y2) * t; |
||||
return { |
||||
x: x1 + (x2 - x1) * t, |
||||
y: y1 + (y2 - y1) * t |
||||
}; |
||||
} |
||||
|
||||
export function distance(x1, y1, x2, y2) { |
||||
const a = (x2 - x1), |
||||
b = (y2 - y1); |
||||
return Math.sqrt(a * a + b * b); |
||||
} |
||||
@ -1,311 +0,0 @@
@@ -1,311 +0,0 @@
|
||||
import { |
||||
getFontW, |
||||
getWeightRatio, |
||||
getCircleRound, |
||||
getScale, |
||||
getTracking, |
||||
getLeading, |
||||
getFontRatio, |
||||
getLineW, |
||||
getRect, |
||||
getCenter, |
||||
getRange, |
||||
getLines, |
||||
addRectToPaths, |
||||
} from './util.js'; |
||||
import { |
||||
getGuide, |
||||
getGrid |
||||
} from './guide.js'; |
||||
import { |
||||
getTextGroup |
||||
} from './group.js'; |
||||
import { |
||||
setAlignGapX, |
||||
getAlignGapX |
||||
} from './align.js'; |
||||
import { |
||||
typo |
||||
} from '../font/index.js'; |
||||
import { |
||||
getLengths |
||||
} from './length.js'; |
||||
import { |
||||
getPaths |
||||
} from './paths.js'; |
||||
|
||||
|
||||
export class Model { |
||||
constructor() { |
||||
this.lineWidth_ = 1; |
||||
this.drawing_ = []; |
||||
this.data_ = null; |
||||
this.paths_ = null; |
||||
this.lines_ = null; |
||||
this.rect_ = { |
||||
x: 0, |
||||
y: 0, |
||||
w: 0, |
||||
h: 0 |
||||
}; |
||||
this.align_ = 'left'; |
||||
this.scale_ = 1; |
||||
this.fontRatio_ = 1; |
||||
} |
||||
|
||||
get data() { |
||||
return this.data_; |
||||
} |
||||
|
||||
get paths() { |
||||
return this.paths_; |
||||
} |
||||
|
||||
get lines() { |
||||
return this.lines_; |
||||
} |
||||
|
||||
set lines(v) { |
||||
this.lines_ = v; |
||||
} |
||||
|
||||
get lineWidth() { |
||||
return this.lineWidth_; |
||||
} |
||||
|
||||
get fontRatio() { |
||||
return this.fontRatio_; |
||||
} |
||||
|
||||
get scale() { |
||||
return this.scale_; |
||||
} |
||||
|
||||
get rect() { |
||||
return this.rect_; |
||||
} |
||||
|
||||
get drawing() { |
||||
return this.drawing_; |
||||
} |
||||
|
||||
set align(v) { |
||||
if (this.align_ != v) { |
||||
this.align_ = v; |
||||
this.setPosition(); |
||||
} |
||||
} |
||||
|
||||
get align() { |
||||
return this.align_; |
||||
} |
||||
|
||||
position(x, y) { |
||||
if (this.rect_.x != x || this.rect_.y != y) { |
||||
this.rect_.x = x; |
||||
this.rect_.y = y; |
||||
this.setPosition(); |
||||
return true; |
||||
} else { |
||||
return false; |
||||
} |
||||
} |
||||
|
||||
setPosition() { |
||||
const total = this.data_.length; |
||||
let i, d; |
||||
for (i = 0; i < total; i++) { |
||||
d = this.data_[i]; |
||||
d.rect.x = d.originPos.x + this.rect_.x + getAlignGapX(this.align_, d.alignGapX); |
||||
d.rect.y = d.originPos.y + this.rect_.y; |
||||
} |
||||
} |
||||
|
||||
updateDrawingPaths() { |
||||
const total = this.data_.length; |
||||
let i, d; |
||||
for (i = 0; i < total; i++) { |
||||
d = this.data_[i]; |
||||
d.drawingPaths = addRectToPaths(getPaths(this, d, -1, false), d); |
||||
} |
||||
} |
||||
|
||||
updatePatternPaths(pathGap) { |
||||
const total = this.data_.length; |
||||
let i, d; |
||||
for (i = 0; i < total; i++) { |
||||
d = this.data_[i]; |
||||
d.rawPaths = getPaths(this, d, pathGap, true); |
||||
} |
||||
} |
||||
|
||||
updateWavePaths(pathGap) { |
||||
const total = this.data_.length; |
||||
let i, d; |
||||
for (i = 0; i < total; i++) { |
||||
d = this.data_[i]; |
||||
d.rawWavePaths = getPaths(this, d, pathGap, false); |
||||
} |
||||
} |
||||
|
||||
updateGuide() { |
||||
const total = this.data_.length; |
||||
let i, d; |
||||
for (i = 0; i < total; i++) { |
||||
d = this.data_[i]; |
||||
d.guide = getGuide(d.typo, this.scale); |
||||
d.grid = getGrid(d.typo, this.scale); |
||||
} |
||||
} |
||||
|
||||
update(text, width, breakWord, weight, size, tracking, leading) { |
||||
const fontW = getFontW(weight); |
||||
const weightRatio = getWeightRatio(fontW); |
||||
const circleRound = getCircleRound(fontW); |
||||
const scale = getScale(size); |
||||
const m_tracking = getTracking(tracking, scale); |
||||
const m_leading = getLeading(leading, scale); |
||||
const fontRatio = getFontRatio(weightRatio); |
||||
|
||||
this.fontRatio_ = fontRatio; |
||||
this.scale_ = scale; |
||||
this.lineWidth_ = getLineW(fontW, scale); |
||||
|
||||
const textGroup = getTextGroup(text, scale, width, breakWord); |
||||
|
||||
let total = textGroup.length; |
||||
const total2 = total - 1; |
||||
let i, j, j_total, j_total2, |
||||
gt, |
||||
t, str, |
||||
m_rect, |
||||
s_pos, |
||||
tw = 0, |
||||
th = 0, |
||||
tx = 0, |
||||
ty = 0, |
||||
maxW = 0, |
||||
maxH = 0, |
||||
tmp = []; |
||||
for (i = 0; i < total; i++) { |
||||
gt = textGroup[i]; |
||||
j_total = gt.length; |
||||
j_total2 = j_total - 1; |
||||
tw = 0; |
||||
tx = 0; |
||||
tmp[i] = { |
||||
tw: 0, |
||||
arr: [] |
||||
}; |
||||
for (j = 0; j < j_total; j++) { |
||||
str = gt[j]; |
||||
t = typo(str); |
||||
m_rect = getRect(t, scale); |
||||
tw += m_rect.w; |
||||
th = m_rect.h; |
||||
if (j < j_total2) { |
||||
tw += m_tracking; |
||||
} |
||||
if (i < total2) { |
||||
th += m_leading; |
||||
} |
||||
m_rect.x = tx; |
||||
m_rect.y = ty; |
||||
s_pos = { |
||||
x: tx, |
||||
y: ty |
||||
}; |
||||
|
||||
tmp[i].arr[j] = { |
||||
str: str, |
||||
typo: t, |
||||
rect: m_rect, |
||||
originPos: s_pos, |
||||
center: getCenter(m_rect.w, m_rect.h, scale), |
||||
range: getRange(t, weightRatio, circleRound) |
||||
}; |
||||
|
||||
tx = tw; |
||||
} |
||||
ty += th; |
||||
tmp[i].tw = tw; |
||||
maxW = Math.max(maxW, tw); |
||||
maxH += th; |
||||
} |
||||
|
||||
this.rect_.w = maxW; |
||||
this.rect_.h = maxH; |
||||
|
||||
this.drawing_ = []; |
||||
const arr = []; |
||||
let aGapX, drawing; |
||||
for (const a of tmp) { |
||||
aGapX = setAlignGapX(maxW, a.tw); |
||||
for (const b of a.arr) { |
||||
b.alignGapX = aGapX; |
||||
b.pointsLength = getLengths(b, this); |
||||
arr.push(b); |
||||
drawing = { |
||||
value: 1 |
||||
}; |
||||
this.drawing_.push(drawing); |
||||
b.drawing = drawing; |
||||
|
||||
// add converted Vector
|
||||
for (const c of b.typo.p) { |
||||
c.cv = []; |
||||
for (const d of c.v) { |
||||
c.cv.push(d.convert(b, this)); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
this.data_ = arr; |
||||
this.setPosition(); |
||||
} |
||||
|
||||
updatePathsForRect() { |
||||
const total = this.data_.length; |
||||
const paths = []; |
||||
let i, d; |
||||
for (i = 0; i < total; i++) { |
||||
d = this.data_[i]; |
||||
if (d.rawWavePaths) { |
||||
d.wavePaths = addRectToPaths(d.rawWavePaths, d); |
||||
} |
||||
if (d.rawPaths) { |
||||
d.paths = addRectToPaths(d.rawPaths, d); |
||||
Array.prototype.push.apply(paths, d.paths); |
||||
} |
||||
} |
||||
|
||||
this.paths_ = paths; |
||||
} |
||||
|
||||
updateLinesForRect() { |
||||
const total = this.data_.length; |
||||
let i, d; |
||||
for (i = 0; i < total; i++) { |
||||
d = this.data_[i]; |
||||
d.lines = getLines(d); |
||||
} |
||||
} |
||||
|
||||
reset() { |
||||
this.lineWidth_ = 1; |
||||
this.drawing_ = []; |
||||
this.data_ = null; |
||||
this.paths_ = null; |
||||
this.lines_ = null; |
||||
this.rect_ = { |
||||
x: 0, |
||||
y: 0, |
||||
w: 0, |
||||
h: 0 |
||||
}; |
||||
this.align_ = 'left'; |
||||
this.scale_ = 1; |
||||
this.fontRatio_ = 1; |
||||
} |
||||
} |
||||
@ -1,200 +0,0 @@
@@ -1,200 +0,0 @@
|
||||
import { |
||||
getCurrent |
||||
} from './util.js'; |
||||
import { |
||||
ROTATE_NONE |
||||
} from '../font/util.js'; |
||||
import { |
||||
Point |
||||
} from './point.js'; |
||||
|
||||
let prevPoint = null; |
||||
|
||||
/** |
||||
* @name getPaths |
||||
* @property {Model} model - mode.js |
||||
* @property {Object} data - data object |
||||
* @property {Number} pathGap |
||||
* @returns {Array} Returns paths array |
||||
* @description get a guide pos |
||||
*/ |
||||
export function getPaths(model, data, pathGap, isPattern) { |
||||
const lines = data.pointsLength.lines; |
||||
const scale = model.scale; |
||||
let total = lines.length, |
||||
i, j_total, j, |
||||
line, lg, direction, |
||||
arr = [], |
||||
paths = [], |
||||
paths2 = []; |
||||
|
||||
|
||||
for (i = 0; i < total; i++) { |
||||
line = lines[i]; |
||||
prevPoint = null; |
||||
arr.push(getDotPos(line, pathGap, scale)); |
||||
} |
||||
|
||||
total = arr.length; |
||||
for (i = 0; i < total; i++) { |
||||
lg = arr[i]; |
||||
j_total = lg.length; |
||||
|
||||
paths2 = []; |
||||
for (j = 0; j < j_total; j++) { |
||||
line = lg[j]; |
||||
if (line.rotation != ROTATE_NONE) { |
||||
if (isPattern) { |
||||
// If the 'p' value of the font data is 1, it's not included in the pattern paths.
|
||||
if (!line.pat) { |
||||
paths2.push(line); |
||||
} |
||||
} else { |
||||
paths2.push(line); |
||||
} |
||||
} |
||||
} |
||||
direction = data.typo.p[i].d; |
||||
if (direction == 1) { |
||||
paths2.reverse(); |
||||
} |
||||
|
||||
if (paths2.length > 0) { |
||||
paths2[0].start = 1; |
||||
Array.prototype.push.apply(paths, paths2); |
||||
} |
||||
} |
||||
|
||||
return paths; |
||||
} |
||||
|
||||
function getDotPos(lines, pathGap, scale) { |
||||
const total = lines.length; |
||||
let i, j, j_total; |
||||
let line; |
||||
let curPoint; |
||||
let num, pp; |
||||
let arr = []; |
||||
let isFirst = 1; |
||||
let pgap = 1; |
||||
if (pathGap > -1) pgap = getCurrent(pathGap, 1, 0, 80, 10) * scale; |
||||
|
||||
for (i = 0; i < total; i++) { |
||||
line = lines[i]; |
||||
|
||||
if (line.type == 'a') { |
||||
arr.push(new Point({ |
||||
x: line.x1, |
||||
y: line.y1, |
||||
rotation: 0, |
||||
type: 'a', |
||||
pat: line.pat, |
||||
fix: line.fix, |
||||
radius: line.radius |
||||
})); |
||||
} else if (line.distance == 0) { |
||||
// it should be type m
|
||||
curPoint = new Point({ |
||||
x: line.x1, |
||||
y: line.y1, |
||||
rotation: line.rotation, |
||||
type: line.type, |
||||
pat: line.pat, |
||||
fix: line.fix |
||||
}); |
||||
pp = setPointValues(curPoint, prevPoint, line, 1); |
||||
if (pp != null) { |
||||
if (isFirst) { |
||||
pp.type = 'm'; |
||||
isFirst = 0; |
||||
} |
||||
arr.push(pp); |
||||
} |
||||
prevPoint = new Point(curPoint); //Object.assign({}, curPoint)
|
||||
} else { |
||||
j_total = Math.ceil(line.distance / pgap); |
||||
|
||||
if (j_total < 3) j_total = 3; |
||||
if (line.vt) j_total = 2; |
||||
|
||||
for (j = 1; j < j_total; j++) { |
||||
num = j / (j_total - 1); |
||||
if (line.type == 'b') { |
||||
curPoint = getCubicBezierXYatT(line, num); |
||||
} else { |
||||
curPoint = new Point({ |
||||
x: line.x1 + ((line.x2 - line.x1) * num), |
||||
y: line.y1 + ((line.y2 - line.y1) * num), |
||||
type: line.type |
||||
}); |
||||
} |
||||
|
||||
if (line.rotation != 0 && num == 1) curPoint.rotation = line.rotation; |
||||
|
||||
if (line.pat && num == 1) curPoint.pat = line.pat; |
||||
|
||||
if (line.fix && num == 1) curPoint.fix = line.fix; |
||||
|
||||
if (j_total > 0) { |
||||
pp = setPointValues(curPoint, prevPoint, line, num); |
||||
if (pp != null) { |
||||
if (isFirst) { |
||||
pp.type = 'm'; |
||||
isFirst = 0; |
||||
} |
||||
arr.push(pp); |
||||
} |
||||
} |
||||
prevPoint = new Point(curPoint); //Object.assign({}, curPoint)
|
||||
} |
||||
} |
||||
} |
||||
return arr; |
||||
} |
||||
|
||||
function setPointValues(cur, prev, line, num) { |
||||
cur.type = line.type; |
||||
cur.distance = line.distance; |
||||
cur.num = num; |
||||
|
||||
if (!prev || cur.rotation != null) { |
||||
cur.rotation = cur.rotation; |
||||
} else { |
||||
const dx = cur.x - prev.x; |
||||
const dy = cur.y - prev.y; |
||||
const rad = Math.atan2(dx, dy); |
||||
cur.rotation = -rad; |
||||
} |
||||
|
||||
if (cur.rotation == ROTATE_NONE) { |
||||
return null; |
||||
} else { |
||||
return cur; |
||||
} |
||||
} |
||||
|
||||
function getCubicBezierXYatT(line, t) { |
||||
const x = CubicN(line.x1, line.x2, line.x3, line.x4, t); |
||||
const y = CubicN(line.y1, line.y2, line.y3, line.y4, t); |
||||
const tx = bezierTangent(line.x1, line.x2, line.x3, line.x4, t); |
||||
const ty = bezierTangent(line.y1, line.y2, line.y3, line.y4, t); |
||||
const rotation = -Math.atan2(tx, ty); |
||||
|
||||
return new Point({ |
||||
x: x, |
||||
y: y, |
||||
rotation: rotation |
||||
}); |
||||
} |
||||
|
||||
function CubicN(a, b, c, d, t) { |
||||
const t2 = t * t; |
||||
const t3 = t2 * t; |
||||
return a + (-a * 3 + t * (3 * a - a * t)) * t + (3 * b + t * (-6 * b + b * 3 * t)) * t + (c * 3 - c * 3 * t) * t2 + d * t3; |
||||
} |
||||
|
||||
//http://qaru.site/questions/10657973/quadratic-curve-with-rope-pattern
|
||||
//https://stackoverflow.com/questions/32322966/quadratic-curve-with-rope-pattern
|
||||
export function bezierTangent(a, b, c, d, t) { |
||||
return (3 * t * t * (-a + 3 * b - 3 * c + d) + 6 * t * (a - 2 * b + c) + 3 * (-a + b)); |
||||
} |
||||
@ -1,21 +0,0 @@
@@ -1,21 +0,0 @@
|
||||
export function Point(mp) { |
||||
Object.assign(this, mp); |
||||
} |
||||
|
||||
Object.assign(Point.prototype, { |
||||
addRect: function (rect) { |
||||
const vv = new Point(this); |
||||
vv.x = this.x + rect.x; |
||||
vv.y = this.y + rect.y; |
||||
vv.x2 = this.x2 + rect.x; |
||||
vv.y2 = this.y2 + rect.y; |
||||
vv.x3 = this.x3 + rect.x; |
||||
vv.y3 = this.y3 + rect.y; |
||||
vv.rx = this.rx + rect.x; |
||||
vv.ry = this.ry + rect.y; |
||||
vv.sx = this.sx + rect.x; |
||||
vv.sy = this.sy + rect.y; |
||||
if (vv.radius < 0.5) vv.radius = 0.5; |
||||
return vv; |
||||
} |
||||
}); |
||||
@ -1,214 +0,0 @@
@@ -1,214 +0,0 @@
|
||||
const DEFAULT_FONT_SIZE = 500; |
||||
export const MIN_FONT_WEIGHT = 1; |
||||
export const MAX_FONT_WEIGHT = 900; |
||||
const MAX_LINE_WIDTH = 70; |
||||
const FONT_WEIGHT_LIMIT = 80; |
||||
const FR_1 = 1; |
||||
const FR_2 = 0.78; |
||||
export const RECT_RATIO = 0.49; |
||||
const MAX_SHAKE = 120; |
||||
export const PI2 = 2 * Math.PI; |
||||
|
||||
export function getAmplitude(amplitude, scale) { |
||||
return (MAX_SHAKE * amplitude) * scale; |
||||
} |
||||
|
||||
export function getFontW(weight) { |
||||
return (MAX_LINE_WIDTH - MIN_FONT_WEIGHT) / (MAX_FONT_WEIGHT - MIN_FONT_WEIGHT) * (weight - MIN_FONT_WEIGHT) + MIN_FONT_WEIGHT; |
||||
} |
||||
|
||||
export function getWeightRatio(fontW) { |
||||
return (1) / (FONT_WEIGHT_LIMIT - MIN_FONT_WEIGHT) * (fontW - MIN_FONT_WEIGHT); |
||||
} |
||||
|
||||
export function getCircleRound(fontW) { |
||||
return (58 - 4) / (FONT_WEIGHT_LIMIT - MIN_FONT_WEIGHT) * (fontW - MIN_FONT_WEIGHT) + 4; |
||||
} |
||||
|
||||
export function getScale(size) { |
||||
return size / DEFAULT_FONT_SIZE; |
||||
} |
||||
|
||||
export function getLineW(fontW, scale) { |
||||
let lw = fontW * scale; |
||||
if (lw < 1) lw = 1; |
||||
//if (weight == 1) lw = 1
|
||||
return lw; |
||||
} |
||||
|
||||
export function getTracking(tracking, scale) { |
||||
return tracking * 50 * scale; |
||||
} |
||||
|
||||
export function getLeading(leading, scale) { |
||||
return leading * 50 * scale; |
||||
} |
||||
|
||||
export function getFontRatio(weightRatio) { |
||||
return (FR_2 - FR_1) * weightRatio + FR_1; |
||||
} |
||||
|
||||
export function getRect(d, scale, x = 0, y = 0) { |
||||
const w = (d.rect.w * RECT_RATIO) * scale; |
||||
const h = ((d.rect.h + 220) * RECT_RATIO) * scale; |
||||
return { |
||||
x: x, |
||||
y: y, |
||||
w: w, |
||||
h: h |
||||
}; |
||||
} |
||||
|
||||
/** |
||||
* @name getGap |
||||
* @property {Object} - typo data object from 'font/index.js' |
||||
* @property {Number} - weightRatio |
||||
* @returns {Object} the gap x and y |
||||
* @description get a typo gap from thin to bold weight |
||||
*/ |
||||
/* |
||||
export function getGap(d, weightRatio) { |
||||
const gx1 = d.ratio.x1 |
||||
const gx2 = d.ratio.x2 |
||||
const gy1 = d.ratio.y1 |
||||
const gy2 = d.ratio.y2 |
||||
const x = (gx2 - gx1) * weightRatio + gx1 |
||||
const y = (gy2 - gy1) * weightRatio + gy1 |
||||
return { |
||||
x: x, |
||||
y: y |
||||
} |
||||
} |
||||
*/ |
||||
|
||||
/** |
||||
* @name getCenter |
||||
* @property {Number} - typo rect width |
||||
* @property {Number} - typo rect height |
||||
* @property {Number} - typo scale |
||||
* @returns {Object} center position x and y |
||||
* @description get a center position of a typo |
||||
*/ |
||||
export function getCenter(w, h, scale) { |
||||
const x = w / 2; |
||||
const y = (h - ((220 - 90) * RECT_RATIO * scale)) / 2; |
||||
return { |
||||
x: x, |
||||
y: y |
||||
}; |
||||
} |
||||
|
||||
/** |
||||
* @name getRange |
||||
* @property {Object} - typo data object from 'font/index.js' |
||||
* @property {Number} - weightRatio |
||||
* @property {Number} - circleRound |
||||
* @returns {Object} ratio range |
||||
* @description save ratio range to control each line's coordinate |
||||
*/ |
||||
export function getRange(d, weightRatio, circleRound) { |
||||
const gx1 = d.ratio.x1; |
||||
const gx2 = d.ratio.x2; |
||||
const gy1 = d.ratio.y1; |
||||
const gy2 = d.ratio.y2; |
||||
return { |
||||
r: weightRatio, |
||||
cr: circleRound, |
||||
fr1: FR_1, |
||||
fr2: FR_2, |
||||
gx1: gx1, |
||||
gx2: gx2, |
||||
gy1: gy1, |
||||
gy2: gy2, |
||||
}; |
||||
} |
||||
|
||||
export function getCurrent(v, vmax, vmin, max, min) { |
||||
let value = (max - min) / (vmax - vmin) * (v - vmin) + min; |
||||
if (value < min) value = min; |
||||
else if (value > max) value = max; |
||||
return value; |
||||
} |
||||
|
||||
export function getLines(data) { |
||||
const total = data.typo.p.length; |
||||
const lines = []; |
||||
let i, j, k, j_total; |
||||
let d2, d3, cp, dir, lt, ltRatio, prevRatio; |
||||
for (i = 0; i < total; i++) { |
||||
d2 = data.typo.p[i]; |
||||
j_total = d2.cv.length; |
||||
for (j = 0; j < j_total; j++) { |
||||
d3 = d2.cv[j]; |
||||
// add current position to all points
|
||||
cp = d3.addRect(data.rect); |
||||
dir = d2.d; |
||||
lt = data.pointsLength.lengths[i]; |
||||
ltRatio = lt / data.pointsLength.max; |
||||
prevRatio = 0; |
||||
if (i > 0) { |
||||
for (k = 0; k < i; k++) { |
||||
prevRatio += (data.pointsLength.lengths[k] / data.pointsLength.max); |
||||
} |
||||
} |
||||
ltRatio += prevRatio; |
||||
|
||||
lines.push({ |
||||
pos: cp, |
||||
drawing: data.drawing, |
||||
direction: dir, |
||||
lengths: lt, |
||||
maxDrawing: ltRatio, |
||||
minDrawing: prevRatio, |
||||
closePath: d3.ratio.c, |
||||
stroke: (ctx, d) => { |
||||
let dv = getCurrent(d.drawing.value, d.maxDrawing, d.minDrawing, 1, 0); |
||||
//if (d.direction == 1) {
|
||||
// dv = getCurrent(1 - d.drawing.value, d.minDrawing, d.maxDrawing, 1, 0);
|
||||
//}
|
||||
if (dv > 0 && d.pos.type != 'a') { |
||||
const frac = d.lengths * dv; |
||||
ctx.setLineDash([d.lengths]); |
||||
ctx.lineDashOffset = d.direction * (frac + d.lengths); |
||||
ctx.stroke(); |
||||
} |
||||
}, |
||||
}); |
||||
} |
||||
} |
||||
|
||||
return lines; |
||||
} |
||||
|
||||
|
||||
export function addRectToPaths(path, data) { |
||||
const total = path.length; |
||||
const arr = []; |
||||
let i, cp, p; |
||||
for (i = 0; i < total; i++) { |
||||
p = path[i]; |
||||
cp = p.addRect(data.rect); |
||||
arr.push(cp); |
||||
} |
||||
return arr; |
||||
} |
||||
|
||||
export function randomBrightColor() { |
||||
return "hsl(" + 360 * Math.random() + ',' + |
||||
'100%,' + |
||||
'50%)'; |
||||
} |
||||
|
||||
export function shuffle(oldArray) { |
||||
let newArray = oldArray.slice(), |
||||
len = newArray.length, |
||||
i = len, |
||||
p, t; |
||||
while (i--) { |
||||
p = (Math.random() * len) | 0; |
||||
t = newArray[i]; |
||||
newArray[i] = newArray[p]; |
||||
newArray[p] = t; |
||||
} |
||||
return newArray; |
||||
} |
||||
@ -1,101 +0,0 @@
@@ -1,101 +0,0 @@
|
||||
import { |
||||
Point |
||||
} from './point.js'; |
||||
|
||||
export function Vector(mp) { |
||||
this.type = mp[0]; |
||||
|
||||
this.x = mp[1] || 0; |
||||
this.y = mp[2] || 0; |
||||
|
||||
if (this.type == 'b') { |
||||
this.x2 = mp[3] || 0; |
||||
this.y2 = mp[4] || 0; |
||||
this.x3 = mp[5] || 0; |
||||
this.y3 = mp[6] || 0; |
||||
if (mp[7] == null) { |
||||
this.ratio = { |
||||
x: 1, |
||||
y: 1, |
||||
r: 0, // rotation : if the rotation is ROTATE_NONE, it will hide in the 'pattern' and 'paths'
|
||||
p: 0, // 1 is hide the point in the pattern paths
|
||||
f: 0, // 1 is fixed position for wave paths
|
||||
c: 0, // 1 is close path for PIXI bug - graphics.closePath()
|
||||
v: 0 // 1 is vertex, it's only for the vertex shape like V, W, A
|
||||
}; |
||||
} else { |
||||
this.ratio = {}; |
||||
this.ratio.x = (mp[7].x == null) ? 1 : mp[7].x; |
||||
this.ratio.y = (mp[7].y == null) ? 1 : mp[7].y; |
||||
this.ratio.r = mp[7].r || 0; |
||||
this.ratio.p = mp[7].p || 0; |
||||
this.ratio.f = mp[7].f || 0; |
||||
this.ratio.c = mp[7].c || 0; |
||||
this.ratio.v = mp[7].v || 0; |
||||
} |
||||
} else { |
||||
if (mp[3] == null) { |
||||
this.ratio = { |
||||
x: 1, |
||||
y: 1, |
||||
r: 0, |
||||
p: 0, |
||||
f: 0, |
||||
c: 0, |
||||
v: 0 |
||||
}; |
||||
} else { |
||||
this.ratio = {}; |
||||
this.ratio.x = (mp[3].x == null) ? 1 : mp[3].x; |
||||
this.ratio.y = (mp[3].y == null) ? 1 : mp[3].y; |
||||
this.ratio.r = mp[3].r || 0; |
||||
this.ratio.p = mp[3].p || 0; |
||||
this.ratio.f = mp[3].f || 0; |
||||
this.ratio.c = mp[3].c || 0; |
||||
this.ratio.v = mp[3].v || 0; |
||||
} |
||||
} |
||||
} |
||||
|
||||
Object.assign(Vector.prototype, { |
||||
convert: function (pos, model) { |
||||
const x = convertX(this.x, pos, this.ratio, model); |
||||
const y = convertY(this.y, pos, this.ratio, model); |
||||
const x2 = convertX(this.x2, pos, this.ratio, model); |
||||
const y2 = convertY(this.y2, pos, this.ratio, model); |
||||
const x3 = convertX(this.x3, pos, this.ratio, model); |
||||
const y3 = convertY(this.y3, pos, this.ratio, model); |
||||
const rd = convertR(this.type, pos, model); |
||||
|
||||
const vv = new Point(this); |
||||
vv.x = x; |
||||
vv.y = y; |
||||
vv.x2 = x2; |
||||
vv.y2 = y2; |
||||
vv.x3 = x3; |
||||
vv.y3 = y3; |
||||
vv.radius = rd; |
||||
|
||||
return vv; |
||||
} |
||||
}); |
||||
|
||||
function convertR(type, pos, model) { |
||||
let rd = 0; |
||||
if (type == 'a') rd = pos.range.cr * model.scale * model.fontRatio; |
||||
return rd; |
||||
} |
||||
|
||||
function convertX(x, pos, ratio, model) { |
||||
const rr = pos.range.r * ratio.x; |
||||
const gx = (pos.range.gx2 - pos.range.gx1) * rr + pos.range.gx1; |
||||
const fr = (pos.range.fr2 - pos.range.fr1) * rr + pos.range.fr1; |
||||
return pos.center.x + (((x - gx)) * model.scale * fr); // + pos.rect.x
|
||||
} |
||||
|
||||
function convertY(y, pos, ratio, model) { |
||||
const rr = pos.range.r * ratio.y; |
||||
const gy = (pos.range.gy2 - pos.range.gy1) * rr + pos.range.gy1; |
||||
const fr = (pos.range.fr2 - pos.range.fr1) * rr + pos.range.fr1; |
||||
return pos.center.y + (((y - gy)) * model.scale * fr); // + pos.rect.y
|
||||
} |
||||
@ -1,20 +0,0 @@
@@ -1,20 +0,0 @@
|
||||
export function Color(ctx, no, data, color) { |
||||
let c_total = color.length; |
||||
const cur = (no + (c_total * (Math.abs((no / 10) | 0) + 1))) % c_total; |
||||
if (Array.isArray(color[cur])) { |
||||
c_total = color[cur].length; |
||||
const vv = 1 / (c_total + 1); |
||||
const g = ctx.createLinearGradient(data.rect.x, data.rect.y, data.rect.x, data.rect.y + data.rect.h); |
||||
let i; |
||||
g.addColorStop(vv, color[cur][0]); |
||||
for (i = 0; i < c_total; i++) { |
||||
g.addColorStop(vv * (i + 1), color[cur][i]); |
||||
} |
||||
g.addColorStop(vv * (c_total + 1), color[cur][c_total - 1]); |
||||
ctx.strokeStyle = g; |
||||
ctx.fillStyle = g; |
||||
} else { |
||||
ctx.strokeStyle = color[cur]; |
||||
ctx.fillStyle = color[cur]; |
||||
} |
||||
} |
||||
@ -1,93 +0,0 @@
@@ -1,93 +0,0 @@
|
||||
import { |
||||
PI2, |
||||
getCurrent |
||||
} from '../../core/util.js'; |
||||
import { |
||||
cubicBezierLength, |
||||
distance |
||||
} from '../../core/length.js'; |
||||
|
||||
let colorArr; |
||||
let curColor = -1; |
||||
let colorTotal; |
||||
const MIN_DISTANCE = 10; |
||||
|
||||
export function Colorful(ctx, model, colors) { |
||||
curColor = -1; |
||||
colorArr = colors; |
||||
colorTotal = colorArr.length; |
||||
const total = model.data.length; |
||||
let i, d, j, j_total, line, pos, prev; |
||||
let max, length, prevRatio; |
||||
for (i = 0; i < total; i++) { |
||||
d = model.data[i]; |
||||
max = d.pointsLength.max; |
||||
prevRatio = 0; |
||||
j_total = d.lines.length; |
||||
prev = null; |
||||
for (j = 0; j < j_total; j++) { |
||||
line = d.lines[j]; |
||||
pos = line.pos; |
||||
if (pos.type == 'a') { |
||||
setColor(ctx); |
||||
ctx.beginPath(); |
||||
ctx.arc(pos.x, pos.y, pos.radius * d.drawing.value, 0, PI2); |
||||
ctx.fill(); |
||||
ctx.closePath(); |
||||
} else if (pos.type == 'm') { |
||||
prev = pos; |
||||
} else if (pos.type == 'l') { |
||||
length = distance(prev.x, prev.y, pos.x, pos.y); |
||||
if (length / model.scale > MIN_DISTANCE) { |
||||
// ignore short distance paths
|
||||
setColor(ctx); |
||||
ctx.beginPath(); |
||||
if (prev) ctx.moveTo(prev.x, prev.y); |
||||
ctx.lineTo(pos.x, pos.y); |
||||
prevRatio += draw(ctx, line, length, max, d, prevRatio); |
||||
} |
||||
prev = pos; |
||||
} else if (pos.type == 'b') { |
||||
length = cubicBezierLength(prev.x, prev.y, pos.x, pos.y, pos.x2, pos.y2, pos.x3, pos.y3); |
||||
if (length / model.scale > MIN_DISTANCE) { |
||||
setColor(ctx); |
||||
ctx.beginPath(); |
||||
if (prev) ctx.moveTo(prev.x, prev.y); |
||||
ctx.bezierCurveTo(pos.x, pos.y, pos.x2, pos.y2, pos.x3, pos.y3); |
||||
prevRatio += draw(ctx, line, length, max, d, prevRatio); |
||||
} |
||||
prev = { |
||||
x: pos.x3, |
||||
y: pos.y3 |
||||
}; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
function setColor(ctx) { |
||||
const color = getColor(); |
||||
ctx.fillStyle = color; |
||||
ctx.strokeStyle = color; |
||||
} |
||||
|
||||
function getColor() { |
||||
curColor++; |
||||
if (curColor == colorTotal) curColor = 0; |
||||
return colorArr[curColor]; |
||||
} |
||||
|
||||
function draw(ctx, line, length, max, d, prevRatio) { |
||||
const ltRatio = length / max; |
||||
let dv = getCurrent(d.drawing.value, prevRatio + ltRatio, prevRatio, 1, 0); |
||||
if (line.direction == 1) { |
||||
dv = getCurrent(1 - d.drawing.value, prevRatio, prevRatio + ltRatio, 1, 0); |
||||
} |
||||
if (dv > 0) { |
||||
const frac = length * dv; |
||||
ctx.setLineDash([length]); |
||||
ctx.lineDashOffset = line.direction * (frac + length); |
||||
ctx.stroke(); |
||||
} |
||||
return ltRatio; |
||||
} |
||||
@ -1,23 +0,0 @@
@@ -1,23 +0,0 @@
|
||||
export function Grids(ctx, data) { |
||||
ctx.save(); |
||||
|
||||
ctx.beginPath(); |
||||
ctx.lineWidth = 1; |
||||
ctx.strokeStyle = "#aaaaaa"; |
||||
let i, total = data.guide.length, |
||||
grid; |
||||
for (i = 0; i < total; i++) { |
||||
grid = data.rect.y + data.grid[i]; |
||||
ctx.moveTo(data.rect.x, grid); |
||||
ctx.lineTo(data.rect.x + data.rect.w, grid); |
||||
} |
||||
ctx.stroke(); |
||||
|
||||
ctx.lineWidth = 1; |
||||
ctx.beginPath(); |
||||
ctx.strokeStyle = "#aaaaaa"; |
||||
ctx.rect(data.rect.x, data.rect.y, data.rect.w, data.rect.h); |
||||
ctx.stroke(); |
||||
|
||||
ctx.restore(); |
||||
} |
||||
@ -1,27 +0,0 @@
@@ -1,27 +0,0 @@
|
||||
import { |
||||
PI2 |
||||
} from '../../core/util.js'; |
||||
|
||||
export function Lines(ctx, data) { |
||||
const total = data.lines.length; |
||||
let i, d, pos; |
||||
for (i = 0; i < total; i++) { |
||||
d = data.lines[i]; |
||||
pos = d.pos; |
||||
if (pos.type == 'a') { |
||||
ctx.beginPath(); |
||||
ctx.arc(pos.x, pos.y, pos.radius * d.drawing.value, 0, PI2); |
||||
ctx.fill(); |
||||
ctx.closePath(); |
||||
} else if (pos.type == 'm') { |
||||
ctx.beginPath(); |
||||
ctx.moveTo(pos.x, pos.y); |
||||
} else if (pos.type == 'l') { |
||||
ctx.lineTo(pos.x, pos.y); |
||||
d.stroke(ctx, d); |
||||
} else if (pos.type == 'b') { |
||||
ctx.bezierCurveTo(pos.x, pos.y, pos.x2, pos.y2, pos.x3, pos.y3); |
||||
d.stroke(ctx, d); |
||||
} |
||||
} |
||||
} |
||||
@ -1,31 +0,0 @@
@@ -1,31 +0,0 @@
|
||||
import { |
||||
PI2 |
||||
} from '../../core/util.js'; |
||||
|
||||
export function Pattern(ctx, data, w, h) { |
||||
const total = Math.round(data.paths.length * data.drawing.value); |
||||
const w2 = w / 2; |
||||
const w3 = w / 3; |
||||
const h2 = h / 2; |
||||
let i, p; |
||||
for (i = 0; i < total; i++) { |
||||
p = data.paths[i]; |
||||
if (p.num == 1) { |
||||
ctx.fillStyle = "#ff00c5"; |
||||
} else { |
||||
ctx.fillStyle = "#ff95f8"; |
||||
} |
||||
if (p.type == 'a') { |
||||
ctx.beginPath(); |
||||
ctx.arc(p.x, p.y, w3, 0, PI2); |
||||
ctx.fill(); |
||||
} else { |
||||
ctx.beginPath(); |
||||
ctx.save(); |
||||
ctx.translate(p.x, p.y); |
||||
ctx.rotate(p.rotation); |
||||
ctx.fillRect(-w2, -h2, w, h); |
||||
ctx.restore(); |
||||
} |
||||
} |
||||
} |
||||
@ -1,73 +0,0 @@
@@ -1,73 +0,0 @@
|
||||
import { |
||||
PI2 |
||||
} from '../../core/util.js'; |
||||
|
||||
export function Points(ctx, data) { |
||||
ctx.save(); |
||||
ctx.lineWidth = 1; |
||||
let total = data.lines.length; |
||||
let i; |
||||
for (i = 0; i < total; i++) { |
||||
eachLine_(ctx, data.lines[i]); |
||||
} |
||||
ctx.restore(); |
||||
|
||||
ctx.save(); |
||||
ctx.lineWidth = 1; |
||||
total = data.typo.p.length; |
||||
for (i = 0; i < total; i++) { |
||||
eachPoint_(ctx, data.typo.p[i], data); |
||||
} |
||||
ctx.restore(); |
||||
} |
||||
|
||||
function eachPoint_(ctx, p, data) { |
||||
const total = p.v.length; |
||||
let i, mp, cp; |
||||
for (i = 0; i < total; i++) { |
||||
mp = p.cv[i]; |
||||
cp = mp.addRect(data.rect); |
||||
if (mp.type == 'b') { |
||||
ctx.fillStyle = "#ff2a00"; |
||||
ctx.beginPath(); |
||||
ctx.arc(cp.x3 + (cp.x3 - cp.x2), cp.y3 + (cp.y3 - cp.y2), 1.5, 0, PI2); |
||||
ctx.fill(); |
||||
ctx.beginPath(); |
||||
ctx.arc(cp.x2, cp.y2, 1.5, 0, PI2); |
||||
ctx.fill(); |
||||
ctx.beginPath(); |
||||
ctx.moveTo(cp.x2, cp.y2); |
||||
ctx.lineTo(cp.x3, cp.y3); |
||||
ctx.lineTo(cp.x3 + (cp.x3 - cp.x2), cp.y3 + (cp.y3 - cp.y2)); |
||||
ctx.stroke(); |
||||
ctx.beginPath(); |
||||
ctx.fillStyle = "#ffffff"; |
||||
ctx.arc(cp.x3, cp.y3, 2.5, 0, PI2); |
||||
ctx.fill(); |
||||
ctx.stroke(); |
||||
} else { |
||||
ctx.beginPath(); |
||||
ctx.fillStyle = "#ffffff"; |
||||
ctx.strokeStyle = "#ff2a00"; |
||||
ctx.arc(cp.x, cp.y, 2.5, 0, PI2); |
||||
ctx.fill(); |
||||
ctx.stroke(); |
||||
} |
||||
} |
||||
} |
||||
|
||||
function eachLine_(ctx, d) { |
||||
const pos = d.pos; |
||||
if (pos.type != 'a') { |
||||
if (pos.type == 'm') { |
||||
ctx.strokeStyle = "#ff2a00"; |
||||
ctx.beginPath(); |
||||
ctx.moveTo(pos.x, pos.y); |
||||
} else if (pos.type == 'l') { |
||||
ctx.lineTo(pos.x, pos.y); |
||||
} else if (pos.type == 'b') { |
||||
ctx.bezierCurveTo(pos.x, pos.y, pos.x2, pos.y2, pos.x3, pos.y3); |
||||
} |
||||
ctx.stroke(); |
||||
} |
||||
} |
||||
@ -1,54 +0,0 @@
@@ -1,54 +0,0 @@
|
||||
import { |
||||
PI2, |
||||
getAmplitude |
||||
} from '../../core/util.js'; |
||||
|
||||
const THIN_LIMIT = 110; |
||||
const COS = Math.cos; |
||||
const SIN = Math.sin; |
||||
|
||||
export function Wave(ctx, data, scale, amplitude, weight, fps) { |
||||
const total = data.wavePaths.length; |
||||
const m_amplitude = getAmplitude(amplitude, scale); |
||||
let i, p, prev, qx, qy, saveDot = []; |
||||
|
||||
ctx.beginPath(); |
||||
for (i = 0; i < total; i++) { |
||||
p = data.wavePaths[i]; |
||||
if (fps) { |
||||
const ranx = (Math.random() * m_amplitude) - (m_amplitude / 2); |
||||
const rany = (Math.random() * m_amplitude) - (m_amplitude / 2); |
||||
p.rx = p.x + ranx * COS(p.rotation); |
||||
p.ry = p.y + ranx * SIN(p.rotation); |
||||
p.sx = p.x + ranx; |
||||
p.sy = p.y + rany; |
||||
} |
||||
|
||||
if (p.type == 'a') { |
||||
saveDot.push(p); |
||||
} else if (p.start == 1) { |
||||
ctx.moveTo(p.x, p.y); |
||||
} else if (p.fix) { |
||||
ctx.lineTo(p.x, p.y); |
||||
} else { |
||||
if (weight < THIN_LIMIT) { |
||||
prev = data.wavePaths[i - 1]; |
||||
if (prev) { |
||||
qx = prev.x + ((p.x - prev.x) * 0.5); |
||||
qy = prev.y + ((p.y - prev.y) * 0.5); |
||||
ctx.quadraticCurveTo(qx, qy, p.rx, p.ry); |
||||
} |
||||
} else { |
||||
ctx.lineTo(p.rx, p.ry); |
||||
} |
||||
} |
||||
} |
||||
ctx.stroke(); |
||||
|
||||
for (i = 0; i < saveDot.length; i++) { |
||||
p = saveDot[i]; |
||||
ctx.beginPath(); |
||||
ctx.arc(p.x, p.y, p.radius, 0, PI2); |
||||
ctx.fill(); |
||||
} |
||||
} |
||||
@ -1,33 +0,0 @@
@@ -1,33 +0,0 @@
|
||||
export function PixiColor(no, data, color) { |
||||
let c_total = color.length; |
||||
const cur = (no + (c_total * (Math.abs((no / 10) | 0) + 1))) % c_total; |
||||
if (Array.isArray(color[cur])) { |
||||
/* |
||||
c_total = color[cur].length; |
||||
const vv = 1 / (c_total - 1); |
||||
const g = ctx.createLinearGradient(data.rect.x, data.rect.y, data.rect.x, data.rect.y + data.rect.h); |
||||
let i; |
||||
for (i = 0; i < c_total; i++) { |
||||
g.addColorStop(vv * i, color[cur][i]); |
||||
} |
||||
ctx.strokeStyle = g; |
||||
ctx.fillStyle = g; |
||||
*/ |
||||
/* |
||||
c_total = color[cur].length; |
||||
const vv = 1 / (c_total - 1); |
||||
const c = document.createElement("canvas"); |
||||
const ctx = c.getContext("2d"); |
||||
const g = ctx.createLinearGradient(0, 0, data.rect.w, data.rect.h); |
||||
let i; |
||||
for (i = 0; i < c_total; i++) { |
||||
g.addColorStop(vv * i, color[cur][i]); |
||||
} |
||||
ctx.fillStyle = g; |
||||
ctx.fillRect(0, 0, data.rect.w, data.rect.h); |
||||
return new PIXI.Texture.from(c); |
||||
*/ |
||||
} else { |
||||
return color[cur]; |
||||
} |
||||
} |
||||
@ -1,51 +0,0 @@
@@ -1,51 +0,0 @@
|
||||
export function PixiLines(graphics, data, lineW, color) { |
||||
let total, i; |
||||
if (data.drawing.value == 1) { |
||||
total = data.lines.length; |
||||
for (i = 0; i < total; i++) { |
||||
eachLine_(graphics, data.lines[i], lineW, color); |
||||
} |
||||
} else { |
||||
total = data.drawingPaths.length * data.drawing.value; |
||||
for (i = 0; i < total; i++) { |
||||
|
||||
eachPath_(graphics, data.drawingPaths[i], lineW, color, data.drawing.value); |
||||
} |
||||
} |
||||
} |
||||
|
||||
function eachLine_(graphics, data, lineW, color) { |
||||
const pos = data.pos; |
||||
if (pos.type == 'a') { |
||||
graphics.lineStyle(0, color, 0); |
||||
graphics.beginFill(color); |
||||
graphics.drawCircle(pos.x, pos.y, pos.radius); |
||||
graphics.endFill(); |
||||
} else if (pos.type == 'm') { |
||||
graphics.lineStyle(lineW, color, 1); |
||||
graphics.moveTo(pos.x, pos.y); |
||||
} else if (pos.type == 'l') { |
||||
graphics.lineTo(pos.x, pos.y); |
||||
} else if (pos.type == 'b') { |
||||
graphics.bezierCurveTo(pos.x, pos.y, pos.x2, pos.y2, pos.x3, pos.y3); |
||||
} |
||||
if (data.closePath) { |
||||
graphics.closePath(); |
||||
} |
||||
} |
||||
|
||||
function eachPath_(graphics, pos, lineW, color, dValue) { |
||||
if (pos.type == 'a') { |
||||
graphics.lineStyle(0, color, 0); |
||||
graphics.beginFill(color); |
||||
graphics.drawCircle(pos.x, pos.y, pos.radius * dValue); |
||||
graphics.endFill(); |
||||
} else { |
||||
if (pos.start == 1) { |
||||
graphics.lineStyle(lineW, color, 1); |
||||
graphics.moveTo(pos.x, pos.y); |
||||
} else { |
||||
graphics.lineTo(pos.x, pos.y, 1); |
||||
} |
||||
} |
||||
} |
||||
@ -1,27 +0,0 @@
@@ -1,27 +0,0 @@
|
||||
import { |
||||
UPPER |
||||
} from './upper.js'; |
||||
import { |
||||
LOWER |
||||
} from './lower.js'; |
||||
import { |
||||
NUMBER |
||||
} from './number.js'; |
||||
import { |
||||
SPECIAL |
||||
} from './special.js'; |
||||
import { |
||||
LATIN |
||||
} from './latin.js'; |
||||
import { |
||||
TOFU |
||||
} from './util.js'; |
||||
|
||||
const DATA = Object.assign({}, UPPER, LOWER, NUMBER, SPECIAL, LATIN); |
||||
|
||||
export function typo(v) { |
||||
const t = DATA[v] || DATA[TOFU]; |
||||
const clone = t.clone(); |
||||
clone.v = v; |
||||
return clone; |
||||
} |
||||
@ -1,728 +0,0 @@
@@ -1,728 +0,0 @@
|
||||
import { |
||||
generateFontData, |
||||
ROTATE_HORIZONTAL, |
||||
ROTATE_VERTICAL, |
||||
ROTATE_NONE, |
||||
getR, |
||||
getCurveR |
||||
} from './util.js'; |
||||
import { |
||||
getLatin1, |
||||
getLatin2, |
||||
getLatin3, |
||||
getLatin4, |
||||
getLatin5, |
||||
getLatin6, |
||||
getLatin7, |
||||
getLatin8, |
||||
getLatin9, |
||||
getLatin10, |
||||
getLatin11, |
||||
getLatin12, |
||||
getLatin13, |
||||
getLatin14 |
||||
} from './latinutil.js'; |
||||
import { |
||||
DATA_UA, |
||||
DATA_UC, |
||||
DATA_UD, |
||||
DATA_UE, |
||||
DATA_UG, |
||||
DATA_UH, |
||||
DATA_UI, |
||||
DATA_UJ, |
||||
DATA_UN, |
||||
DATA_UO, |
||||
DATA_US, |
||||
DATA_UU, |
||||
DATA_UY |
||||
} from './upper.js'; |
||||
import { |
||||
DATA_LA, |
||||
DATA_LC, |
||||
DATA_LD, |
||||
DATA_LE, |
||||
DATA_LG, |
||||
DATA_LH, |
||||
DATA_LN, |
||||
DATA_LO, |
||||
DATA_LS, |
||||
DATA_LU, |
||||
DATA_LY |
||||
} from './lower.js'; |
||||
|
||||
const DATA_LI = [{ |
||||
d: 1, |
||||
v: [ |
||||
['m', 0, 352, { |
||||
y: 0, |
||||
f: 1 |
||||
}], |
||||
['l', 0, 130, { |
||||
y: -3 |
||||
}], |
||||
] |
||||
}]; |
||||
|
||||
const DATA_LJ = [{ |
||||
d: 1, |
||||
v: [ |
||||
['m', 0 - 115.9, 317 + 127, { |
||||
x: 0.4, |
||||
y: 0.63, |
||||
r: getCurveR(0 - 115.9, 317 + 127, 12.6 - 115.9, 327.4 + 127, 29.6 - 115.9, 333.2 + 127, 45.9 - 115.9, 334.2 + 127, 0), |
||||
f: 1 |
||||
}], |
||||
['b', 12.6 - 115.9, 327.4 + 127, 29.6 - 115.9, 333.2 + 127, 45.9 - 115.9, 334.2 + 127, { |
||||
x: 0.4, |
||||
y: 0.63, |
||||
r: ROTATE_VERTICAL |
||||
}], |
||||
['b', 84.5 - 115.9, 336.5 + 127, 0, 308.1 + 127, 0, 269.4 + 127, { |
||||
x: 0.4, |
||||
y: 0.63, |
||||
r: ROTATE_HORIZONTAL |
||||
}], |
||||
['l', 0, 0 + 127 + 3, { |
||||
y: -3 |
||||
}], |
||||
] |
||||
}]; |
||||
|
||||
export const LATIN = { |
||||
'Æ': generateFontData( |
||||
996, 426, 352, |
||||
0, 0, 0, 0, |
||||
[{ |
||||
d: -1, |
||||
v: [ |
||||
['m', 426.0, 0.0, { |
||||
x: 0, |
||||
r: ROTATE_VERTICAL |
||||
}], |
||||
['l', 234.0, 0.0, { |
||||
x: 0.5, |
||||
f: 1, |
||||
r: getR(234.0, 0.0, .0, 352.0), |
||||
}], |
||||
['l', 0.0, 352.0, { |
||||
x: 0.5, |
||||
y: 0.5, |
||||
f: 1 |
||||
}], |
||||
] |
||||
}, { |
||||
d: -1, |
||||
v: [ |
||||
['m', 234.0, 0.0, { |
||||
x: 0.5, |
||||
p: 1, |
||||
}], |
||||
['l', 234.0, 352.0, { |
||||
f: 1, |
||||
x: 0.5 |
||||
}], |
||||
['l', 426.0, 352.0, { |
||||
f: 1, |
||||
x: 0 |
||||
}] |
||||
] |
||||
}, { |
||||
d: -1, |
||||
v: [ |
||||
['m', 76.4, 237.0, { |
||||
r: ROTATE_VERTICAL, |
||||
p: 1, |
||||
}], |
||||
['l', 234.0, 237.0, { |
||||
f: 1, |
||||
r: ROTATE_VERTICAL, |
||||
p: 1, |
||||
}] |
||||
] |
||||
}, { |
||||
d: -1, |
||||
v: [ |
||||
['m', 234.0, 164.0, { |
||||
r: ROTATE_VERTICAL, |
||||
p: 1, |
||||
x: 0.5 |
||||
}], |
||||
['l', 414.0, 164.0, { |
||||
f: 1, |
||||
x: 0 |
||||
}] |
||||
] |
||||
}] |
||||
), |
||||
'æ': generateFontData( |
||||
1000, 232 + 225.5, 232, |
||||
0, 0, -64, -64, |
||||
[{ |
||||
d: -1, |
||||
v: [ |
||||
['m', 232, 8, { |
||||
y: -3.4, |
||||
r: ROTATE_HORIZONTAL |
||||
}], |
||||
['l', 232, 116, { |
||||
r: ROTATE_NONE |
||||
}], |
||||
['b', 232, 180.1, 180.1, 232, 116, 232, { |
||||
r: ROTATE_VERTICAL |
||||
}], |
||||
['b', 51.9, 232, 0, 180.1, 0, 116, { |
||||
r: ROTATE_HORIZONTAL |
||||
}], |
||||
['b', 0, 51.9, 51.9, 0, 116, 0, { |
||||
r: ROTATE_VERTICAL |
||||
}], |
||||
['b', 180.1, 0, 232, 51.9, 232, 116, { |
||||
r: ROTATE_HORIZONTAL |
||||
}], |
||||
['l', 232, 224, { |
||||
y: -0.1, |
||||
r: ROTATE_HORIZONTAL, |
||||
f: 1 |
||||
}] |
||||
] |
||||
}, { |
||||
d: 1, |
||||
v: [ |
||||
['m', 211.6 + 232, 182.9, { |
||||
r: getCurveR(211.6 + 232, 182.9, 191.1 + 232, 213.2, 156.1 + 232, 233.1, 116.5 + 232, 233.1, 0), |
||||
f: 1 |
||||
}], |
||||
['b', 191.1 + 232, 213.2, 156.1 + 232, 233.1, 116.5 + 232, 233.1, { |
||||
r: ROTATE_VERTICAL |
||||
}], |
||||
['b', 52.4 + 232, 233.1, 0.5 + 232, 181.2, 0.5 + 232, 117.1, { |
||||
r: ROTATE_HORIZONTAL |
||||
}], |
||||
['b', 0.5 + 232, 53, 52.4 + 232, 1.1, 116.5 + 232, 1.1, { |
||||
r: ROTATE_VERTICAL |
||||
}], |
||||
['b', 176.4 + 232, 1.1, 224.9 + 232, 47.2, 225.5 + 232, 106.1, { |
||||
r: ROTATE_HORIZONTAL |
||||
}], |
||||
['l', 0.5 + 232, 106.1, { |
||||
r: ROTATE_HORIZONTAL, |
||||
p: 1 |
||||
}], |
||||
] |
||||
}] |
||||
), |
||||
'À': generateFontData( |
||||
620, 290, 352, |
||||
0, 0, 0, 0, |
||||
JSON.parse(JSON.stringify(DATA_UA)).concat(getLatin1(145, -50)) |
||||
), |
||||
'Á': generateFontData( |
||||
620, 290, 352, |
||||
0, 0, 0, 0, |
||||
JSON.parse(JSON.stringify(DATA_UA)).concat(getLatin2(145, -50)) |
||||
), |
||||
'Â': generateFontData( |
||||
620, 290, 352, |
||||
0, 0, 0, 0, |
||||
JSON.parse(JSON.stringify(DATA_UA)).concat(getLatin3(145, -100)) |
||||
), |
||||
'Ã': generateFontData( |
||||
620, 290, 352, |
||||
0, 0, 0, 0, |
||||
JSON.parse(JSON.stringify(DATA_UA)).concat(getLatin4(145, -90)) |
||||
), |
||||
'Ä': generateFontData( |
||||
620, 290, 352, |
||||
0, 0, 0, 0, |
||||
JSON.parse(JSON.stringify(DATA_UA)).concat(getLatin5(145, -70)) |
||||
), |
||||
'Å': generateFontData( |
||||
620, 290, 352, |
||||
0, 0, 0, 0, |
||||
JSON.parse(JSON.stringify(DATA_UA)).concat(getLatin7(0, 0)) |
||||
), |
||||
'Ă': generateFontData( |
||||
620, 290, 352, |
||||
0, 0, 0, 0, |
||||
JSON.parse(JSON.stringify(DATA_UA)).concat(getLatin6(145, -110)) |
||||
), |
||||
'Ą': generateFontData( |
||||
620, 290, 352, |
||||
0, 0, 0, 0, |
||||
JSON.parse(JSON.stringify(DATA_UA)).concat(getLatin10(290, 352)) |
||||
), |
||||
'à': generateFontData( |
||||
600, 232, 232, |
||||
10, 2, -64, -64, |
||||
JSON.parse(JSON.stringify(DATA_LA)).concat(getLatin1(116, -60)) |
||||
), |
||||
'á': generateFontData( |
||||
600, 232, 232, |
||||
10, 2, -64, -64, |
||||
JSON.parse(JSON.stringify(DATA_LA)).concat(getLatin2(116, -60)) |
||||
), |
||||
'â': generateFontData( |
||||
600, 232, 232, |
||||
10, 2, -64, -64, |
||||
JSON.parse(JSON.stringify(DATA_LA)).concat(getLatin3(116, -110)) |
||||
), |
||||
'ã': generateFontData( |
||||
600, 232, 232, |
||||
10, 2, -64, -64, |
||||
JSON.parse(JSON.stringify(DATA_LA)).concat(getLatin4(116, -100)) |
||||
), |
||||
'ä': generateFontData( |
||||
600, 232, 232, |
||||
10, 2, -64, -64, |
||||
JSON.parse(JSON.stringify(DATA_LA)).concat(getLatin5(116, -80)) |
||||
), |
||||
'å': generateFontData( |
||||
600, 232, 232, |
||||
10, 2, -64, -64, |
||||
JSON.parse(JSON.stringify(DATA_LA)).concat(getLatin7(-30, 0)) |
||||
), |
||||
'ă': generateFontData( |
||||
600, 232, 232, |
||||
10, 2, -64, -64, |
||||
JSON.parse(JSON.stringify(DATA_LA)).concat(getLatin6(116, -120)) |
||||
), |
||||
'ą': generateFontData( |
||||
600, 232, 232, |
||||
10, 2, -64, -64, |
||||
JSON.parse(JSON.stringify(DATA_LA)).concat(getLatin10(232, 224)) |
||||
), |
||||
'Ć': generateFontData( |
||||
700, 293.1, 360, |
||||
0, 0, 0, 0, |
||||
JSON.parse(JSON.stringify(DATA_UC)).concat(getLatin1(180, -60)) |
||||
), |
||||
'Ĉ': generateFontData( |
||||
700, 293.1, 360, |
||||
0, 0, 0, 0, |
||||
JSON.parse(JSON.stringify(DATA_UC)).concat(getLatin3(180, -110)) |
||||
), |
||||
'Ċ': generateFontData( |
||||
700, 293.1, 360, |
||||
0, 0, 0, 0, |
||||
JSON.parse(JSON.stringify(DATA_UC)).concat(getLatin11(180, -80)) |
||||
), |
||||
'Č': generateFontData( |
||||
700, 293.1, 360, |
||||
0, 0, 0, 0, |
||||
JSON.parse(JSON.stringify(DATA_UC)).concat(getLatin12(180, -110)) |
||||
), |
||||
'Ç': generateFontData( |
||||
700, 293.1, 360, |
||||
0, 0, 0, 0, |
||||
JSON.parse(JSON.stringify(DATA_UC)).concat(getLatin9(180, 360)) |
||||
), |
||||
'ć': generateFontData( |
||||
520, 212.1, 233.1, |
||||
2, -10, -64, -64, |
||||
JSON.parse(JSON.stringify(DATA_LC)).concat(getLatin1(116.5, 1.1 - 70)) |
||||
), |
||||
'ĉ': generateFontData( |
||||
520, 212.1, 233.1, |
||||
2, -10, -64, -64, |
||||
JSON.parse(JSON.stringify(DATA_LC)).concat(getLatin3(116.5, 1.1 - 120)) |
||||
), |
||||
'ċ': generateFontData( |
||||
520, 212.1, 233.1, |
||||
2, -10, -64, -64, |
||||
JSON.parse(JSON.stringify(DATA_LC)).concat(getLatin11(116.5, 1.1 - 90)) |
||||
), |
||||
'č': generateFontData( |
||||
520, 212.1, 233.1, |
||||
2, -10, -64, -64, |
||||
JSON.parse(JSON.stringify(DATA_LC)).concat(getLatin12(116.5, 1.1 - 120)) |
||||
), |
||||
'ç': generateFontData( |
||||
520, 212.1, 233.1, |
||||
2, -10, -64, -64, |
||||
JSON.parse(JSON.stringify(DATA_LC)).concat(getLatin9(116.5, 233.1)) |
||||
), |
||||
'Đ': generateFontData( |
||||
721, 270, 352, |
||||
-10, -10, 0, 0, |
||||
JSON.parse(JSON.stringify(DATA_UD)).concat(getLatin8(0, 352 / 2)) |
||||
), |
||||
'Ď': generateFontData( |
||||
721, 270, 352, |
||||
-10, -10, 0, 0, |
||||
JSON.parse(JSON.stringify(DATA_UD)).concat(getLatin12(100, -110)) |
||||
), |
||||
'ď': generateFontData( |
||||
600, 232, 352, |
||||
10, 2, 0, 0, |
||||
JSON.parse(JSON.stringify(DATA_LD)).concat(getLatin13(300, 0)) |
||||
), |
||||
'đ': generateFontData( |
||||
600, 232, 352, |
||||
10, 2, 0, 0, |
||||
JSON.parse(JSON.stringify(DATA_LD)).concat(getLatin8(180, 40)) |
||||
), |
||||
'È': generateFontData( |
||||
520, 192, 352, |
||||
-5, -80, 0, 0, |
||||
JSON.parse(JSON.stringify(DATA_UE)).concat(getLatin1(96, -60)) |
||||
), |
||||
'É': generateFontData( |
||||
520, 192, 352, |
||||
-5, -80, 0, 0, |
||||
JSON.parse(JSON.stringify(DATA_UE)).concat(getLatin2(96, -60)) |
||||
), |
||||
'Ê': generateFontData( |
||||
520, 192, 352, |
||||
-5, -80, 0, 0, |
||||
JSON.parse(JSON.stringify(DATA_UE)).concat(getLatin3(96, -110)) |
||||
), |
||||
'Ë': generateFontData( |
||||
520, 192, 352, |
||||
-5, -80, 0, 0, |
||||
JSON.parse(JSON.stringify(DATA_UE)).concat(getLatin5(96, -80)) |
||||
), |
||||
'Ē': generateFontData( |
||||
520, 192, 352, |
||||
-5, -80, 0, 0, |
||||
JSON.parse(JSON.stringify(DATA_UE)).concat(getLatin14(96, -80)) |
||||
), |
||||
'Ĕ': generateFontData( |
||||
520, 192, 352, |
||||
-5, -80, 0, 0, |
||||
JSON.parse(JSON.stringify(DATA_UE)).concat(getLatin6(96, -120)) |
||||
), |
||||
'Ė': generateFontData( |
||||
520, 192, 352, |
||||
-5, -80, 0, 0, |
||||
JSON.parse(JSON.stringify(DATA_UE)).concat(getLatin11(96, -80)) |
||||
), |
||||
'Ě': generateFontData( |
||||
520, 192, 352, |
||||
-5, -80, 0, 0, |
||||
JSON.parse(JSON.stringify(DATA_UE)).concat(getLatin12(96, -110)) |
||||
), |
||||
'è': generateFontData( |
||||
570, 225.5, 233.1, |
||||
0, 0, -64, -64, |
||||
JSON.parse(JSON.stringify(DATA_LE)).concat(getLatin1(112, -60)) |
||||
), |
||||
'é': generateFontData( |
||||
570, 225.5, 233.1, |
||||
0, 0, -64, -64, |
||||
JSON.parse(JSON.stringify(DATA_LE)).concat(getLatin2(112, -60)) |
||||
), |
||||
'ê': generateFontData( |
||||
570, 225.5, 233.1, |
||||
0, 0, -64, -64, |
||||
JSON.parse(JSON.stringify(DATA_LE)).concat(getLatin3(112, -110)) |
||||
), |
||||
'ë': generateFontData( |
||||
570, 225.5, 233.1, |
||||
0, 0, -64, -64, |
||||
JSON.parse(JSON.stringify(DATA_LE)).concat(getLatin5(112, -80)) |
||||
), |
||||
'ē': generateFontData( |
||||
570, 225.5, 233.1, |
||||
0, 0, -64, -64, |
||||
JSON.parse(JSON.stringify(DATA_LE)).concat(getLatin14(112, -80)) |
||||
), |
||||
'ĕ': generateFontData( |
||||
570, 225.5, 233.1, |
||||
0, 0, -64, -64, |
||||
JSON.parse(JSON.stringify(DATA_LE)).concat(getLatin6(112, -120)) |
||||
), |
||||
'ė': generateFontData( |
||||
570, 225.5, 233.1, |
||||
0, 0, -64, -64, |
||||
JSON.parse(JSON.stringify(DATA_LE)).concat(getLatin11(112, -90)) |
||||
), |
||||
'ě': generateFontData( |
||||
570, 225.5, 233.1, |
||||
0, 0, -64, -64, |
||||
JSON.parse(JSON.stringify(DATA_LE)).concat(getLatin12(112, -120)) |
||||
), |
||||
'Ĝ': generateFontData( |
||||
840, 352, 360, |
||||
0, 0, 0, 0, |
||||
JSON.parse(JSON.stringify(DATA_UG)).concat(getLatin3(180, -110)) |
||||
), |
||||
'Ğ': generateFontData( |
||||
840, 352, 360, |
||||
0, 0, 0, 0, |
||||
JSON.parse(JSON.stringify(DATA_UG)).concat(getLatin6(180, -120)) |
||||
), |
||||
'Ġ': generateFontData( |
||||
840, 352, 360, |
||||
0, 0, 0, 0, |
||||
JSON.parse(JSON.stringify(DATA_UG)).concat(getLatin11(180, -80)) |
||||
), |
||||
'Ģ': generateFontData( |
||||
840, 352, 360, |
||||
0, 0, 0, 0, |
||||
JSON.parse(JSON.stringify(DATA_UG)).concat(getLatin9(180, 360)) |
||||
), |
||||
'ĝ': generateFontData( |
||||
600, 232, 338, |
||||
10, 2, -117, -117, |
||||
JSON.parse(JSON.stringify(DATA_LG)).concat(getLatin3(116, 1.1 - 120)) |
||||
), |
||||
'ğ': generateFontData( |
||||
600, 232, 338, |
||||
10, 2, -117, -117, |
||||
JSON.parse(JSON.stringify(DATA_LG)).concat(getLatin6(116, -120)) |
||||
), |
||||
'ġ': generateFontData( |
||||
600, 232, 338, |
||||
10, 2, -117, -117, |
||||
JSON.parse(JSON.stringify(DATA_LG)).concat(getLatin11(116, -90)) |
||||
), |
||||
'ģ': generateFontData( |
||||
600, 232, 338, |
||||
10, 2, -117, -117, |
||||
JSON.parse(JSON.stringify(DATA_LG)).concat(getLatin2(116, -70)) |
||||
), |
||||
'Ĥ': generateFontData( |
||||
684, 232, 352, |
||||
0, 0, 0, 0, |
||||
JSON.parse(JSON.stringify(DATA_UH)).concat(getLatin3(232 / 2, -110)) |
||||
), |
||||
'ĥ': generateFontData( |
||||
520, 182, 352, |
||||
0, 0, 0, 0, |
||||
JSON.parse(JSON.stringify(DATA_LH)).concat(getLatin3(182 / 2, -110)) |
||||
), |
||||
'Ì': generateFontData( |
||||
249, 0, 352, |
||||
0, 0, 0, 0, |
||||
JSON.parse(JSON.stringify(DATA_UI)).concat(getLatin1(0, -60)) |
||||
), |
||||
'Í': generateFontData( |
||||
249, 0, 352, |
||||
0, 0, 0, 0, |
||||
JSON.parse(JSON.stringify(DATA_UI)).concat(getLatin2(0, -60)) |
||||
), |
||||
'Î': generateFontData( |
||||
249, 0, 352, |
||||
0, 0, 0, 0, |
||||
JSON.parse(JSON.stringify(DATA_UI)).concat(getLatin3(0, -110)) |
||||
), |
||||
'Ï': generateFontData( |
||||
249, 0, 352, |
||||
0, 0, 0, 0, |
||||
JSON.parse(JSON.stringify(DATA_UI)).concat(getLatin5(0, -80)) |
||||
), |
||||
'ì': generateFontData( |
||||
200, 0, 352, |
||||
0, 0, 0, 0, |
||||
JSON.parse(JSON.stringify(DATA_LI)).concat(getLatin1(0, -60 + 130)) |
||||
), |
||||
'í': generateFontData( |
||||
200, 0, 352, |
||||
0, 0, 0, 0, |
||||
JSON.parse(JSON.stringify(DATA_LI)).concat(getLatin2(0, -60 + 130)) |
||||
), |
||||
'î': generateFontData( |
||||
200, 0, 352, |
||||
0, 0, 0, 0, |
||||
JSON.parse(JSON.stringify(DATA_LI)).concat(getLatin3(0, -120 + 130)) |
||||
), |
||||
'ï': generateFontData( |
||||
200, 0, 352, |
||||
0, 0, 0, 0, |
||||
JSON.parse(JSON.stringify(DATA_LI)).concat(getLatin5(0, -80 + 130)) |
||||
), |
||||
'Ĵ': generateFontData( |
||||
472, 172.5, 355.5, |
||||
10, 20, -2, -2, |
||||
JSON.parse(JSON.stringify(DATA_UJ)).concat(getLatin3(172.5, -110)) |
||||
), |
||||
'ĵ': generateFontData( |
||||
220, 115.9, 352, |
||||
-60, -60, 0, 0, |
||||
JSON.parse(JSON.stringify(DATA_LJ)).concat(getLatin3(0, -110 + 130)) |
||||
), |
||||
'Ñ': generateFontData( |
||||
721, 250, 352, |
||||
0, 0, 0, 0, |
||||
JSON.parse(JSON.stringify(DATA_UN)).concat(getLatin4(250 / 2, -100)) |
||||
), |
||||
'ñ': generateFontData( |
||||
520, 182, 352, |
||||
0, 0, 0, 0, |
||||
JSON.parse(JSON.stringify(DATA_LN)).concat(getLatin4(182 / 2, -100 + 130)) |
||||
), |
||||
'Ò': generateFontData( |
||||
850, 360, 360, |
||||
0, 0, 0, 0, |
||||
JSON.parse(JSON.stringify(DATA_UO)).concat(getLatin1(180, -60)) |
||||
), |
||||
'Ó': generateFontData( |
||||
850, 360, 360, |
||||
0, 0, 0, 0, |
||||
JSON.parse(JSON.stringify(DATA_UO)).concat(getLatin2(180, -60)) |
||||
), |
||||
'Ô': generateFontData( |
||||
850, 360, 360, |
||||
0, 0, 0, 0, |
||||
JSON.parse(JSON.stringify(DATA_UO)).concat(getLatin3(180, -110)) |
||||
), |
||||
'Õ': generateFontData( |
||||
850, 360, 360, |
||||
0, 0, 0, 0, |
||||
JSON.parse(JSON.stringify(DATA_UO)).concat(getLatin4(180, -100)) |
||||
), |
||||
'Ö': generateFontData( |
||||
850, 360, 360, |
||||
0, 0, 0, 0, |
||||
JSON.parse(JSON.stringify(DATA_UO)).concat(getLatin5(180, -80)) |
||||
), |
||||
'Ø': generateFontData( |
||||
850, 360, 360, |
||||
0, 0, 0, 0, |
||||
JSON.parse(JSON.stringify(DATA_UO)).concat([{ |
||||
d: 1, |
||||
v: [ |
||||
['m', 0, 360, { |
||||
r: getR(0, 360, 360, 0), |
||||
f: 1, |
||||
x: 0, |
||||
y: 1 |
||||
}], |
||||
['l', 360, 0, { |
||||
x: 0, |
||||
y: 1 |
||||
}] |
||||
] |
||||
}]) |
||||
), |
||||
'ò': generateFontData( |
||||
580, 232, 232, |
||||
0, 0, -64, -64, |
||||
JSON.parse(JSON.stringify(DATA_LO)).concat(getLatin1(116, -60)) |
||||
), |
||||
'ó': generateFontData( |
||||
580, 232, 232, |
||||
0, 0, -64, -64, |
||||
JSON.parse(JSON.stringify(DATA_LO)).concat(getLatin2(116, -60)) |
||||
), |
||||
'ô': generateFontData( |
||||
580, 232, 232, |
||||
0, 0, -64, -64, |
||||
JSON.parse(JSON.stringify(DATA_LO)).concat(getLatin3(116, -110)) |
||||
), |
||||
'õ': generateFontData( |
||||
580, 232, 232, |
||||
0, 0, -64, -64, |
||||
JSON.parse(JSON.stringify(DATA_LO)).concat(getLatin4(116, -100)) |
||||
), |
||||
'ö': generateFontData( |
||||
580, 232, 232, |
||||
0, 0, -64, -64, |
||||
JSON.parse(JSON.stringify(DATA_LO)).concat(getLatin5(116, -80)) |
||||
), |
||||
'ø': generateFontData( |
||||
580, 232, 232, |
||||
0, 0, -64, -64, |
||||
JSON.parse(JSON.stringify(DATA_LO)).concat([{ |
||||
d: 1, |
||||
v: [ |
||||
['m', 0, 232, { |
||||
r: getR(0, 232, 232, 0), |
||||
f: 1, |
||||
x: 0, |
||||
y: 1 |
||||
}], |
||||
['l', 232, 0, { |
||||
x: 0, |
||||
y: 1 |
||||
}] |
||||
] |
||||
}]) |
||||
), |
||||
'Ŝ': generateFontData( |
||||
560, 224, 360, |
||||
0, 0, 0, 0, |
||||
JSON.parse(JSON.stringify(DATA_US)).concat(getLatin3(112.4, -110)) |
||||
), |
||||
'ŝ': generateFontData( |
||||
400, 224 * 0.642, 360 * 0.642, |
||||
0, 0, -64, -64, |
||||
JSON.parse(JSON.stringify(DATA_LS)).concat(getLatin3(112.4 * 0.642, -110)) |
||||
), |
||||
'Ş': generateFontData( |
||||
560, 224, 360, |
||||
0, 0, 0, 0, |
||||
JSON.parse(JSON.stringify(DATA_US)).concat(getLatin9(110.3, 360)) |
||||
), |
||||
'ş': generateFontData( |
||||
400, 224 * 0.642, 360 * 0.642, |
||||
0, 0, -64, -64, |
||||
JSON.parse(JSON.stringify(DATA_LS)).concat(getLatin9(110.3 * 0.642, 360 * 0.642)) |
||||
), |
||||
'Ù': generateFontData( |
||||
712, 250, 355, |
||||
0, 0, -0.5, -0.5, |
||||
JSON.parse(JSON.stringify(DATA_UU)).concat(getLatin1(125, -50)) |
||||
), |
||||
'Ú': generateFontData( |
||||
712, 250, 355, |
||||
0, 0, -0.5, -0.5, |
||||
JSON.parse(JSON.stringify(DATA_UU)).concat(getLatin2(125, -50)) |
||||
), |
||||
'Û': generateFontData( |
||||
712, 250, 355, |
||||
0, 0, -0.5, -0.5, |
||||
JSON.parse(JSON.stringify(DATA_UU)).concat(getLatin3(125, -100)) |
||||
), |
||||
'Ŭ': generateFontData( |
||||
712, 250, 355, |
||||
0, 0, -0.5, -0.5, |
||||
JSON.parse(JSON.stringify(DATA_UU)).concat(getLatin6(125, -110)) |
||||
), |
||||
'Ü': generateFontData( |
||||
712, 250, 355, |
||||
0, 0, -0.5, -0.5, |
||||
JSON.parse(JSON.stringify(DATA_UU)).concat(getLatin5(125, -70)) |
||||
), |
||||
'ù': generateFontData( |
||||
520, 182, 352, |
||||
0, 0, 0, 0, |
||||
JSON.parse(JSON.stringify(DATA_LU)).concat(getLatin1(91, -60 + 130)) |
||||
), |
||||
'ú': generateFontData( |
||||
520, 182, 352, |
||||
0, 0, 0, 0, |
||||
JSON.parse(JSON.stringify(DATA_LU)).concat(getLatin2(91, -60 + 130)) |
||||
), |
||||
'û': generateFontData( |
||||
520, 182, 352, |
||||
0, 0, 0, 0, |
||||
JSON.parse(JSON.stringify(DATA_LU)).concat(getLatin3(91, -110 + 130)) |
||||
), |
||||
'ŭ': generateFontData( |
||||
520, 182, 352, |
||||
0, 0, 0, 0, |
||||
JSON.parse(JSON.stringify(DATA_LU)).concat(getLatin6(91, -120 + 130)) |
||||
), |
||||
'ü': generateFontData( |
||||
520, 182, 352, |
||||
0, 0, 0, 0, |
||||
JSON.parse(JSON.stringify(DATA_LU)).concat(getLatin5(91, -80 + 130)) |
||||
), |
||||
'Ý': generateFontData( |
||||
673, 270, 352, |
||||
0, 0, 0, 0, |
||||
JSON.parse(JSON.stringify(DATA_UY)).concat(getLatin2(135, -60)) |
||||
), |
||||
'ý': generateFontData( |
||||
500, 225.5, 331.5, |
||||
10, 10, -119, -119, |
||||
JSON.parse(JSON.stringify(DATA_LY)).concat(getLatin2(116.3, -60)) |
||||
), |
||||
'ÿ': generateFontData( |
||||
500, 225.5, 331.5, |
||||
10, 10, -119, -119, |
||||
JSON.parse(JSON.stringify(DATA_LY)).concat(getLatin5(116.3, -90)) |
||||
), |
||||
}; |
||||
@ -1,338 +0,0 @@
@@ -1,338 +0,0 @@
|
||||
import { |
||||
ROTATE_HORIZONTAL, |
||||
ROTATE_VERTICAL, |
||||
VERTEX_GAP2, |
||||
getR, |
||||
getCurveR |
||||
} from './util.js'; |
||||
|
||||
//À
|
||||
export function getLatin1(x, y) { |
||||
const tx = x; |
||||
const ty = -60 + y; |
||||
return [{ |
||||
d: -1, |
||||
v: [ |
||||
['m', -40 + tx, ty, { |
||||
x: 0, |
||||
y: 0, |
||||
r: getR(-40 + tx, ty, 0 + tx, 60 + ty) |
||||
}], |
||||
['l', 0 + tx, 60 + ty, { |
||||
x: 0, |
||||
y: 0, |
||||
f: 1 |
||||
}], |
||||
] |
||||
}]; |
||||
} |
||||
//Á
|
||||
export function getLatin2(x, y) { |
||||
const tx = x; |
||||
const ty = -60 + y; |
||||
return [{ |
||||
d: -1, |
||||
v: [ |
||||
['m', 40 + tx, ty, { |
||||
x: 0, |
||||
y: 0, |
||||
r: getR(40 + tx, ty, 0 + tx, 60 + ty) |
||||
}], |
||||
['l', 0 + tx, 60 + ty, { |
||||
x: 0, |
||||
y: 0, |
||||
f: 1 |
||||
}], |
||||
] |
||||
}]; |
||||
} |
||||
//Â
|
||||
export function getLatin3(x, y) { |
||||
const tx = -68 + x; |
||||
const ty = 0 + y; |
||||
return [{ |
||||
d: -1, |
||||
v: [ |
||||
['m', 0 + tx, 50 + ty, { |
||||
r: getR(0 + tx, 50 + ty, 68 - VERTEX_GAP2 + tx, 0 + ty), |
||||
y: 0, |
||||
x: 0 |
||||
}], |
||||
['l', 68 - VERTEX_GAP2 + tx, 0 + ty, { |
||||
r: getR(0 + tx, 50 + ty, 68 - VERTEX_GAP2 + tx, 0 + ty), |
||||
y: 0, |
||||
x: 0, |
||||
f: 1, |
||||
}], |
||||
['l', 68 + VERTEX_GAP2 + tx, 0 + ty, { |
||||
r: getR(68 + VERTEX_GAP2 + tx, 0 + ty, 68 + 68 + tx, 50 + ty), |
||||
y: 0, |
||||
x: 0, |
||||
f: 1, |
||||
v: 1 |
||||
}], |
||||
['l', 68 + 68 + tx, 50 + ty, { |
||||
y: 0, |
||||
x: 0, |
||||
f: 1 |
||||
}] |
||||
] |
||||
}]; |
||||
} |
||||
//Ã
|
||||
export function getLatin4(x, y) { |
||||
const tx = x - 76.24; |
||||
const ty = y; |
||||
return [{ |
||||
d: 1, |
||||
v: [ |
||||
['m', 159.52 + tx, 16.56 + ty, { |
||||
x: -1, |
||||
y: -0.2, |
||||
r: getCurveR(159.52 + tx, 16.56 + ty, 150.08 + tx, 29.28 + ty, 134.56 + tx, 37.68 + ty, 118.56 + tx, 37.68 + ty, 0), |
||||
f: 1 |
||||
}], |
||||
['b', 150.08 + tx, 29.28 + ty, 134.56 + tx, 37.68 + ty, 118.56 + tx, 37.68 + ty, { |
||||
x: -1, |
||||
y: -0.2, |
||||
r: ROTATE_VERTICAL |
||||
}], |
||||
['b', 103.28 + tx, 37.68 + ty, 89.68 + tx, 29.28 + ty, 76.24 + tx, 20.4 + ty, { |
||||
x: -1, |
||||
y: -0.2 |
||||
}], |
||||
['b', 61.44 + tx, 10.56 + ty, 47.28 + tx, 0 + ty, 31.68 + tx, 0 + ty, { |
||||
x: -1, |
||||
y: -0.2, |
||||
r: ROTATE_VERTICAL |
||||
}], |
||||
['b', 17.84 + tx, 0 + ty, 8.72 + tx, 7.12 + ty, 0 + tx, 16 + ty, { |
||||
x: -1, |
||||
y: -0.2 |
||||
}], |
||||
] |
||||
}]; |
||||
} |
||||
//Ä
|
||||
export function getLatin5(x, y) { |
||||
return [{ |
||||
d: 1, |
||||
v: [ |
||||
['a', -50 + x, y, { |
||||
x: 0, |
||||
y: 0 |
||||
}], |
||||
] |
||||
}, { |
||||
d: 1, |
||||
v: [ |
||||
['a', 50 + x, y, { |
||||
x: 0, |
||||
y: 0 |
||||
}], |
||||
] |
||||
}]; |
||||
} |
||||
//Ŭ
|
||||
export function getLatin6(x, y) { |
||||
const tx = x - 57; |
||||
const ty = y; |
||||
return [{ |
||||
d: 1, |
||||
v: [ |
||||
['m', 112.7 + tx, 0.0 + ty, { |
||||
r: getCurveR(112.7 + tx, 0.0 + ty + tx, 10.1 + ty, 110.1 + tx, 19.3 + ty, 105.0 + tx, 27.7 + ty, 0), |
||||
x: 0, |
||||
y: 0, |
||||
f: 1 |
||||
}], |
||||
['b', 112.7 + tx, 10.1 + ty, 110.1 + tx, 19.3 + ty, 105.0 + tx, 27.7 + ty, { |
||||
x: 0, |
||||
y: 0, |
||||
}], |
||||
['b', 99.8 + tx, 36.1 + ty, 92.9 + tx, 42.8 + ty, 84.3 + tx, 47.7 + ty, { |
||||
x: 0, |
||||
y: 0, |
||||
}], |
||||
['b', 75.7 + tx, 52.6 + ty, 66.7 + tx, 55.0 + ty, 57.3 + tx, 55.0 + ty, { |
||||
x: 0, |
||||
y: 0, |
||||
}], |
||||
['b', 47.5 + tx, 55.0 + ty, 38.3 + tx, 52.6 + ty, 29.6 + tx, 47.7 + ty, { |
||||
x: 0, |
||||
y: 0, |
||||
}], |
||||
['b', 20.8 + tx, 42.8 + ty, 13.8 + tx, 36.1 + ty, 8.5 + tx, 27.7 + ty, { |
||||
x: 0, |
||||
y: 0, |
||||
}], |
||||
['b', 3.2 + tx, 19.3 + ty, 0.5 + tx, 10.1 + ty, 0.5 + tx, 0.0 + ty, { |
||||
x: 0, |
||||
y: 0, |
||||
}], |
||||
] |
||||
}]; |
||||
} |
||||
//Å
|
||||
export function getLatin7(x, y) { |
||||
const tx = 88 + x; |
||||
const ty = -116 + y; |
||||
const scale = 0.5; |
||||
return [{ |
||||
d: 1, |
||||
v: [ |
||||
['m', 232 * scale + tx, 116 * scale + ty, { |
||||
r: ROTATE_HORIZONTAL, |
||||
p: 1, |
||||
f: 1 |
||||
}], |
||||
['b', 232 * scale + tx, 180.1 * scale + ty, 180.1 * scale + tx, 232 * scale + ty, 116 * scale + tx, 232 * scale + ty, { |
||||
r: ROTATE_VERTICAL |
||||
}], |
||||
['b', 51.9 * scale + tx, 232 * scale + ty, 0 * scale + tx, 180.1 * scale + ty, 0 * scale + tx, 116 * scale + ty, { |
||||
r: ROTATE_HORIZONTAL |
||||
}], |
||||
['b', 0 * scale + tx, 51.9 * scale + ty, 51.9 * scale + tx, 0 * scale + ty, 116 * scale + tx, 0 * scale + ty, { |
||||
r: ROTATE_VERTICAL |
||||
}], |
||||
['b', 180.1 * scale + tx, 0 * scale + ty, 232 * scale + tx, 51.9 * scale + ty, 232 * scale + tx, 116 * scale + ty, { |
||||
r: ROTATE_HORIZONTAL, |
||||
c: 1 |
||||
}], |
||||
] |
||||
}] |
||||
} |
||||
//Ð
|
||||
export function getLatin8(x, y) { |
||||
return [{ |
||||
d: 1, |
||||
v: [ |
||||
['m', x - 40, y, { |
||||
x: 0, |
||||
y: 1, |
||||
r: ROTATE_VERTICAL |
||||
}], |
||||
['l', 100 + x, y, { |
||||
x: 0, |
||||
y: 1, |
||||
f: 1 |
||||
}], |
||||
] |
||||
}] |
||||
} |
||||
//Ç
|
||||
export function getLatin9(x, y) { |
||||
return [{ |
||||
d: -1, |
||||
v: [ |
||||
['m', x, y, { |
||||
p: 1 |
||||
}], |
||||
['b', 9.3 + x, 11.6 + y, 15.6 + x, 27.1 + y, 15.6 + x, 40.9 + y], |
||||
['b', 15.6 + x, 83.3 + y, -18.2 + x, 107.8 + y, -59.5 + x, 107.8 + y], |
||||
['b', -70.9 + x, 107.8 + y, -82.9 + x, 106.2 + y, -93.7 + x, 102.7 + y, { |
||||
x: 0.5, |
||||
f: 1 |
||||
}], |
||||
] |
||||
}] |
||||
} |
||||
//Ą
|
||||
export function getLatin10(x, y) { |
||||
return [{ |
||||
d: -1, |
||||
v: [ |
||||
['m', x, y, { |
||||
p: 1 |
||||
}], |
||||
['b', 22.6 - 42.2 + x, 14.8 + y, -42.2 + x, 37.9 + y, -42.2 + x, 64.1 + y], |
||||
['b', -42.2 + x, 100.3 + y, 30.2 - 42.2 + x, 118.8 + y, 63.6 - 42.2 + x, 118.8 + y], |
||||
['b', 68.3 - 42.2 + x, 118.8 + y, 72.9 - 42.2 + x, 118.4 + y, 77.4 - 42.2 + x, 117.6 + y, { |
||||
x: 0.5, |
||||
f: 1 |
||||
}], |
||||
] |
||||
}] |
||||
} |
||||
|
||||
//Ċ
|
||||
export function getLatin11(x, y) { |
||||
return [{ |
||||
d: 1, |
||||
v: [ |
||||
['a', x, y, { |
||||
x: 0, |
||||
y: 0 |
||||
}], |
||||
] |
||||
}]; |
||||
} |
||||
|
||||
//Č
|
||||
export function getLatin12(x, y) { |
||||
const tx = -68 + x; |
||||
const ty = y; |
||||
return [{ |
||||
d: -1, |
||||
v: [ |
||||
['m', 0 + tx, ty, { |
||||
r: getR(0 + tx, ty, 68 - VERTEX_GAP2 + tx, 50 + ty), |
||||
y: 0, |
||||
x: 0 |
||||
}], |
||||
['l', 68 - VERTEX_GAP2 + tx, 50 + ty, { |
||||
r: getR(0 + tx, ty, 68 - VERTEX_GAP2 + tx, 50 + ty), |
||||
y: 0, |
||||
x: 0, |
||||
f: 1, |
||||
}], |
||||
['l', 68 + VERTEX_GAP2 + tx, 50 + ty, { |
||||
r: getR(68 + VERTEX_GAP2 + tx, 50 + ty, 68 + 68 + tx, ty), |
||||
y: 0, |
||||
x: 0, |
||||
f: 1, |
||||
v: 1 |
||||
}], |
||||
['l', 68 + 68 + tx, ty, { |
||||
y: 0, |
||||
x: 0, |
||||
f: 1 |
||||
}] |
||||
] |
||||
}]; |
||||
} |
||||
|
||||
//ď
|
||||
export function getLatin13(x, y) { |
||||
return [{ |
||||
d: -1, |
||||
v: [ |
||||
['m', x, y, { |
||||
x: 0, |
||||
y: 0 |
||||
}], |
||||
['l', x, 80 + y, { |
||||
x: 0, |
||||
y: 0, |
||||
f: 1 |
||||
}], |
||||
] |
||||
}]; |
||||
} |
||||
//Ē
|
||||
export function getLatin14(x, y) { |
||||
return [{ |
||||
d: 1, |
||||
v: [ |
||||
['m', x - 50, y, { |
||||
x: 0, |
||||
y: 0 |
||||
}], |
||||
['l', x + 50, y, { |
||||
x: 0, |
||||
y: 0, |
||||
f: 1 |
||||
}], |
||||
] |
||||
}]; |
||||
} |
||||
@ -1,905 +0,0 @@
@@ -1,905 +0,0 @@
|
||||
import { |
||||
generateFontData, |
||||
ROTATE_HORIZONTAL, |
||||
ROTATE_VERTICAL, |
||||
ROTATE_NONE, |
||||
VERTEX_GAP, |
||||
VERTEX_GAP2, |
||||
getR, |
||||
getCurveR |
||||
} from './util.js'; |
||||
|
||||
export const DATA_LA = [{ |
||||
d: -1, |
||||
v: [ |
||||
['m', 232, 8, { |
||||
y: -3.4, |
||||
r: ROTATE_HORIZONTAL |
||||
}], |
||||
['l', 232, 116, { |
||||
r: ROTATE_NONE |
||||
}], |
||||
['b', 232, 180.1, 180.1, 232, 116, 232, { |
||||
r: ROTATE_VERTICAL |
||||
}], |
||||
['b', 51.9, 232, 0, 180.1, 0, 116, { |
||||
r: ROTATE_HORIZONTAL |
||||
}], |
||||
['b', 0, 51.9, 51.9, 0, 116, 0, { |
||||
r: ROTATE_VERTICAL |
||||
}], |
||||
['b', 180.1, 0, 232, 51.9, 232, 116, { |
||||
r: ROTATE_HORIZONTAL |
||||
}], |
||||
['l', 232, 224, { |
||||
y: -0.1, |
||||
r: ROTATE_HORIZONTAL, |
||||
f: 1 |
||||
}] |
||||
] |
||||
}]; |
||||
|
||||
export const DATA_LC = [{ |
||||
d: 1, |
||||
v: [ |
||||
['m', 212.1, 182.9, { |
||||
r: getCurveR(212.1, 182.9, 191.1, 213.2, 156.1, 233.1, 116.5, 233.1, 0), |
||||
f: 1 |
||||
}], |
||||
['b', 191.1, 213.2, 156.1, 233.1, 116.5, 233.1, { |
||||
r: ROTATE_VERTICAL |
||||
}], |
||||
['b', 52.4, 233.1, 0.5, 181.2, 0.5, 117.1, { |
||||
r: ROTATE_HORIZONTAL |
||||
}], |
||||
['b', 0.5, 53, 52.4, 1.1, 116.5, 1.1, { |
||||
r: ROTATE_VERTICAL |
||||
}], |
||||
['b', 156.1, 1.1, 191.1, 21, 212.1, 51.3], |
||||
] |
||||
}]; |
||||
|
||||
export const DATA_LD = [{ |
||||
d: -1, |
||||
v: [ |
||||
['m', 232, 0, { |
||||
y: 0 |
||||
}], |
||||
['l', 232, 116 + 123, { |
||||
r: ROTATE_NONE |
||||
}], |
||||
['b', 232, 180.1 + 123, 180.1, 232 + 123, 116, 232 + 123, { |
||||
r: ROTATE_VERTICAL |
||||
}], |
||||
['b', 51.9, 232 + 123, 0, 180.1 + 123, 0, 116 + 123, { |
||||
r: ROTATE_HORIZONTAL |
||||
}], |
||||
['b', 0, 51.9 + 123, 51.9, 0 + 123, 116, 0 + 123, { |
||||
r: ROTATE_VERTICAL |
||||
}], |
||||
['b', 180.1, 0 + 123, 232, 51.9 + 123, 232, 116 + 123, { |
||||
r: ROTATE_HORIZONTAL |
||||
}], |
||||
['l', 232, 352, { |
||||
y: 0, |
||||
f: 1 |
||||
}], |
||||
] |
||||
}]; |
||||
|
||||
export const DATA_LE = [{ |
||||
d: 1, |
||||
v: [ |
||||
['m', 211.6, 182.9, { |
||||
r: getCurveR(211.6, 182.9, 191.1, 213.2, 156.1, 233.1, 116.5, 233.1, 0), |
||||
f: 1 |
||||
}], |
||||
['b', 191.1, 213.2, 156.1, 233.1, 116.5, 233.1, { |
||||
r: ROTATE_VERTICAL |
||||
}], |
||||
['b', 52.4, 233.1, 0.5, 181.2, 0.5, 117.1, { |
||||
r: ROTATE_HORIZONTAL |
||||
}], |
||||
['b', 0.5, 53, 52.4, 1.1, 116.5, 1.1, { |
||||
r: ROTATE_VERTICAL |
||||
}], |
||||
['b', 176.4, 1.1, 224.9, 47.2, 225.5, 106.1, { |
||||
r: ROTATE_HORIZONTAL |
||||
}], |
||||
['l', 0.5, 106.1, { |
||||
r: ROTATE_HORIZONTAL, |
||||
p: 1 |
||||
}], |
||||
] |
||||
}]; |
||||
|
||||
export const DATA_LG = [{ |
||||
d: -1, |
||||
v: [ |
||||
['m', 232, 5, { |
||||
y: -2.8 |
||||
}], |
||||
['l', 232, 116, { |
||||
r: ROTATE_NONE |
||||
}], |
||||
['b', 232, 180.1, 180.1, 232, 116, 232, { |
||||
r: ROTATE_VERTICAL |
||||
}], |
||||
['b', 51.9, 232, 0, 180.1, 0, 116, { |
||||
r: ROTATE_HORIZONTAL |
||||
}], |
||||
['b', 0, 51.9, 51.9, 0, 116, 0, { |
||||
r: ROTATE_VERTICAL |
||||
}], |
||||
['b', 180.1, 0, 232, 51.9, 232, 116, { |
||||
r: ROTATE_HORIZONTAL |
||||
}], |
||||
['l', 232, 222], |
||||
['b', 234.5, 300.3, 180.2, 338.5, 116, 338, { |
||||
y: 0.64, |
||||
r: ROTATE_VERTICAL |
||||
}], |
||||
['b', 76.2, 337.7, 36.6, 320.7, 15.7, 290.1, { |
||||
y: 0.64, |
||||
f: 1 |
||||
}], |
||||
] |
||||
}]; |
||||
|
||||
export const DATA_LH = [{ |
||||
d: -1, |
||||
v: [ |
||||
['m', 0, 0, { |
||||
y: 0, |
||||
r: ROTATE_HORIZONTAL |
||||
}], |
||||
['l', 0, 352, { |
||||
y: 0, |
||||
f: 1 |
||||
}], |
||||
] |
||||
}, { |
||||
d: -1, |
||||
v: [ |
||||
['m', 0, 91 + 123, { |
||||
r: ROTATE_NONE |
||||
}], |
||||
['b', 0, 40.7 + 123, 40.7, 0 + 123, 91, 0 + 123, { |
||||
r: ROTATE_VERTICAL |
||||
}], |
||||
['b', 141.3, 0 + 123, 182, 40.7 + 123, 182, 91 + 123, { |
||||
r: ROTATE_HORIZONTAL |
||||
}], |
||||
['l', 182, 352, { |
||||
y: 0, |
||||
f: 1 |
||||
}], |
||||
] |
||||
}]; |
||||
|
||||
|
||||
export const DATA_LN = [{ |
||||
d: -1, |
||||
v: [ |
||||
['m', 0, 130, { |
||||
y: -3.3 |
||||
}], |
||||
['l', 0, 352, { |
||||
y: 0, |
||||
f: 1 |
||||
}], |
||||
] |
||||
}, { |
||||
d: -1, |
||||
v: [ |
||||
['m', 0, 91 + 123, { |
||||
y: 0, |
||||
r: ROTATE_HORIZONTAL, |
||||
p: 1 |
||||
}], |
||||
['b', 0, 40.7 + 123, 40.7, 0 + 123, 91, 0 + 123, { |
||||
r: ROTATE_VERTICAL |
||||
}], |
||||
['b', 141.3, 0 + 123, 182, 40.7 + 123, 182, 91 + 123, { |
||||
r: ROTATE_HORIZONTAL |
||||
}], |
||||
['l', 182, 352, { |
||||
y: 0, |
||||
f: 1 |
||||
}], |
||||
] |
||||
}]; |
||||
|
||||
export const DATA_LO = [{ |
||||
d: 1, |
||||
v: [ |
||||
['m', 232, 116, { |
||||
r: ROTATE_HORIZONTAL, |
||||
p: 1, |
||||
f: 1 |
||||
}], |
||||
['b', 232, 180.1, 180.1, 232, 116, 232, { |
||||
r: ROTATE_VERTICAL |
||||
}], |
||||
['b', 51.9, 232, 0, 180.1, 0, 116, { |
||||
r: ROTATE_HORIZONTAL |
||||
}], |
||||
['b', 0, 51.9, 51.9, 0, 116, 0, { |
||||
r: ROTATE_VERTICAL |
||||
}], |
||||
['b', 180.1, 0, 232, 51.9, 232, 116, { |
||||
r: ROTATE_HORIZONTAL, |
||||
c: 1 |
||||
}], |
||||
] |
||||
}]; |
||||
|
||||
export const DATA_LS = [{ |
||||
d: 1, |
||||
v: [ |
||||
['m', 0 * 0.642, 295.4 * 0.642, { |
||||
r: getCurveR(0 * 0.642, 295.4 * 0.642, 17.6 * 0.642, 332.1 * 0.642, 58.3 * 0.642, 360 * 0.642, 110.3 * 0.642, 360 * 0.642, 0), |
||||
f: 1 |
||||
}], |
||||
['b', 17.6 * 0.642, 332.1 * 0.642, 58.3 * 0.642, 360 * 0.642, 110.3 * 0.642, 360 * 0.642], |
||||
['b', 173.9 * 0.642, 360 * 0.642, 223.8 * 0.642, 329.6 * 0.642, 224 * 0.642, 271 * 0.642], |
||||
['b', 224.2 * 0.642, 214.7 * 0.642, 180.7 * 0.642, 189.6 * 0.642, 112.4 * 0.642, 173.3 * 0.642], |
||||
['b', 47.3 * 0.642, 157.7 * 0.642, 10.9 * 0.642, 130.6 * 0.642, 12 * 0.642, 84.4 * 0.642], |
||||
['b', 13.3 * 0.642, 29.8 * 0.642, 57.3 * 0.642, 0 * 0.642, 114.8 * 0.642, 0 * 0.642], |
||||
['b', 158.4 * 0.642, 0 * 0.642, 196.5 * 0.642, 20.5 * 0.642, 212 * 0.642, 51.3 * 0.642], |
||||
] |
||||
}]; |
||||
|
||||
export const DATA_LU = [{ |
||||
d: -1, |
||||
v: [ |
||||
['m', 0, 130, { |
||||
y: -3 |
||||
}], |
||||
['l', 0, 0 + 265, { |
||||
r: ROTATE_HORIZONTAL |
||||
}], |
||||
['b', 0, 50.3 + 265, 40.7, 91 + 265, 91, 91 + 265, { |
||||
r: ROTATE_VERTICAL |
||||
}], |
||||
['b', 141.3, 91 + 265, 182, 50.3 + 265, 182, 0 + 265, { |
||||
r: ROTATE_HORIZONTAL, |
||||
p: 1, |
||||
f: 1, |
||||
}], |
||||
] |
||||
}, |
||||
{ |
||||
d: -1, |
||||
v: [ |
||||
['m', 182, 130, { |
||||
y: -3 |
||||
}], |
||||
['l', 182, 352, { |
||||
y: 0, |
||||
f: 1 |
||||
}], |
||||
] |
||||
} |
||||
]; |
||||
|
||||
export const DATA_LY = [{ |
||||
d: -1, |
||||
v: [ |
||||
['m', 225.5, 0, { |
||||
y: -3, |
||||
r: getR(225.5, 0, 116.3, 248.8) |
||||
}], |
||||
['l', 116.3, 248.8, { |
||||
x: 0.5, |
||||
y: 0.64 |
||||
}], |
||||
['b', 71.8, 349.6, 0, 331.5, 0, 331.5, { |
||||
x: 0.5, |
||||
y: 0.64, |
||||
r: getCurveR(0, 331.5, 71.8, 349.6, 116.3, 248.8, 0, 331.5, 0), |
||||
f: 1 |
||||
}], |
||||
] |
||||
}, |
||||
{ |
||||
d: -1, |
||||
v: [ |
||||
['m', 3.2, 0, { |
||||
y: -3, |
||||
r: getR(3.2, 0, 125.7, 226.6) |
||||
}], |
||||
['l', 125.7, 226.6, { |
||||
p: 1, |
||||
f: 1 |
||||
}], |
||||
] |
||||
} |
||||
]; |
||||
|
||||
export const LOWER = { |
||||
'a': generateFontData( |
||||
600, 232, 232, |
||||
10, 2, -64, -64, |
||||
JSON.parse(JSON.stringify(DATA_LA)) |
||||
), |
||||
'b': generateFontData( |
||||
600, 232, 352, |
||||
-10, -2, 0, 0, |
||||
[{ |
||||
d: -1, |
||||
v: [ |
||||
['m', 0, 0, { |
||||
y: 0, |
||||
r: ROTATE_HORIZONTAL |
||||
}], |
||||
['l', 0, 116 + 123, { |
||||
r: ROTATE_NONE |
||||
}], |
||||
['b', 0, 180.1 + 123, 51.9, 232 + 123, 116, 232 + 123, { |
||||
r: ROTATE_VERTICAL |
||||
}], |
||||
['b', 180.1, 232 + 123, 232, 180.1 + 123, 232, 116 + 123, { |
||||
r: ROTATE_HORIZONTAL |
||||
}], |
||||
['b', 232, 51.9 + 123, 180.1, 0 + 123, 116, 0 + 123, { |
||||
r: ROTATE_VERTICAL |
||||
}], |
||||
['b', 51.9, 0 + 123, 0, 51.9 + 123, 0, 116 + 123, { |
||||
r: ROTATE_HORIZONTAL |
||||
}], |
||||
['l', 0, 352, { |
||||
y: 0, |
||||
r: ROTATE_HORIZONTAL, |
||||
f: 1 |
||||
}] |
||||
|
||||
] |
||||
}, ] |
||||
), |
||||
'c': generateFontData( |
||||
520, 212.1, 233.1, |
||||
2, -10, -64, -64, |
||||
JSON.parse(JSON.stringify(DATA_LC)) |
||||
), |
||||
'd': generateFontData( |
||||
600, 232, 352, |
||||
10, 2, 0, 0, |
||||
JSON.parse(JSON.stringify(DATA_LD)) |
||||
), |
||||
'e': generateFontData( |
||||
570, 225.5, 233.1, |
||||
0, 0, -64, -64, |
||||
JSON.parse(JSON.stringify(DATA_LE)) |
||||
), |
||||
'f': generateFontData( |
||||
356, 232, 352, |
||||
-40, -40, 0, 0, |
||||
[{ |
||||
d: -1, |
||||
v: [ |
||||
['m', 166.6, 33, { |
||||
x: 0.5, |
||||
r: getCurveR(166.6, 33, 159.3, 13.1, 139.2, 0, 116.9, 0, 0) |
||||
}], |
||||
['b', 159.3, 13.1, 139.2, 0, 116.9, 0, { |
||||
r: ROTATE_VERTICAL |
||||
}], |
||||
['b', 88.2, 0, 65, 23.2, 65, 51.9, { |
||||
r: ROTATE_HORIZONTAL |
||||
}], |
||||
['l', 65, 352, { |
||||
y: 0, |
||||
f: 1 |
||||
}], |
||||
] |
||||
}, |
||||
{ |
||||
d: -1, |
||||
v: [ |
||||
['m', 0, 130, { |
||||
x: 0, |
||||
r: ROTATE_VERTICAL |
||||
}], |
||||
['l', 154, 130, { |
||||
x: 0, |
||||
f: 1 |
||||
}], |
||||
] |
||||
} |
||||
] |
||||
), |
||||
'g': generateFontData( |
||||
600, 232, 338, |
||||
10, 2, -117, -117, |
||||
JSON.parse(JSON.stringify(DATA_LG)) |
||||
), |
||||
'h': generateFontData( |
||||
520, 182, 352, |
||||
0, 0, 0, 0, |
||||
JSON.parse(JSON.stringify(DATA_LH)) |
||||
), |
||||
'i': generateFontData( |
||||
200, 0, 352, |
||||
0, 0, 0, 0, |
||||
[{ |
||||
d: 1, |
||||
v: [ |
||||
['a', 0, 90, { |
||||
y: -3 |
||||
}], |
||||
] |
||||
}, { |
||||
d: 1, |
||||
v: [ |
||||
['m', 0, 352, { |
||||
y: 0, |
||||
f: 1 |
||||
}], |
||||
['l', 0, 130, { |
||||
y: -3 |
||||
}], |
||||
] |
||||
}] |
||||
), |
||||
'j': generateFontData( |
||||
220, 115.9, 352, |
||||
-60, -60, 0, 0, |
||||
[{ |
||||
d: 1, |
||||
v: [ |
||||
['a', 0, 90, { |
||||
y: -3 |
||||
}], |
||||
] |
||||
}, { |
||||
d: 1, |
||||
v: [ |
||||
['m', 0 - 115.9, 317 + 127, { |
||||
x: 0.4, |
||||
y: 0.63, |
||||
r: getCurveR(0 - 115.9, 317 + 127, 12.6 - 115.9, 327.4 + 127, 29.6 - 115.9, 333.2 + 127, 45.9 - 115.9, 334.2 + 127, 0), |
||||
f: 1 |
||||
}], |
||||
['b', 12.6 - 115.9, 327.4 + 127, 29.6 - 115.9, 333.2 + 127, 45.9 - 115.9, 334.2 + 127, { |
||||
x: 0.4, |
||||
y: 0.63, |
||||
r: ROTATE_VERTICAL |
||||
}], |
||||
['b', 84.5 - 115.9, 336.5 + 127, 115.9 - 115.9, 308.1 + 127, 115.9 - 115.9, 269.4 + 127, { |
||||
x: 0.4, |
||||
y: 0.63, |
||||
r: ROTATE_HORIZONTAL |
||||
}], |
||||
['l', 115.9 - 115.9, 0 + 127 + 3, { |
||||
y: -3 |
||||
}], |
||||
] |
||||
}] |
||||
), |
||||
'k': generateFontData( |
||||
450, 164, 352, |
||||
-10, -10, 0, 0, |
||||
[{ |
||||
d: -1, |
||||
v: [ |
||||
['m', 0, 0, { |
||||
y: 0, |
||||
r: ROTATE_HORIZONTAL |
||||
}], |
||||
['l', 0, 352, { |
||||
y: 0, |
||||
f: 1 |
||||
}], |
||||
] |
||||
}, |
||||
{ |
||||
d: -1, |
||||
v: [ |
||||
['m', 160, 130, { |
||||
x: 0.7, |
||||
y: 0, |
||||
r: getR(164, 130, 0, 106 + 130 - VERTEX_GAP2), |
||||
f: 1 |
||||
}], |
||||
['l', 0, 106 + 130 - VERTEX_GAP2, { |
||||
r: ROTATE_VERTICAL, |
||||
p: 1 |
||||
}], |
||||
['l', 0, 106 + 130 + VERTEX_GAP2, { |
||||
r: ROTATE_VERTICAL, |
||||
p: 1, |
||||
v: 1 |
||||
}], |
||||
['l', 164, 352, { |
||||
x: 0.7, |
||||
y: 0.7, |
||||
f: 1 |
||||
}], |
||||
] |
||||
} |
||||
] |
||||
), |
||||
'l': generateFontData( |
||||
200, 0, 352, |
||||
0, 0, 0, 0, |
||||
[{ |
||||
d: 1, |
||||
v: [ |
||||
['m', 0, 352, { |
||||
y: 0, |
||||
f: 1 |
||||
}], |
||||
['l', 0, 0, { |
||||
y: 0 |
||||
}], |
||||
] |
||||
}] |
||||
), |
||||
'm': generateFontData( |
||||
740, 150 + 150, 352, |
||||
0, 0, 0, 0, |
||||
[{ |
||||
d: -1, |
||||
v: [ |
||||
['m', 0, 130, { |
||||
y: -3.6 |
||||
}], |
||||
['l', 0, 352, { |
||||
y: 0, |
||||
f: 1 |
||||
}], |
||||
] |
||||
}, |
||||
{ |
||||
d: -1, |
||||
v: [ |
||||
['m', 0, 75 + 123, { |
||||
y: 0, |
||||
r: ROTATE_HORIZONTAL, |
||||
p: 1 |
||||
}], |
||||
['b', 0, 33.6 + 123, 33.6, 0 + 123, 75, 0 + 123, { |
||||
r: ROTATE_VERTICAL |
||||
}], |
||||
['b', 116.4, 0 + 123, 150, 33.6 + 123, 150, 75 + 123, { |
||||
r: ROTATE_HORIZONTAL |
||||
}], |
||||
['l', 150, 352, { |
||||
y: 0, |
||||
f: 1 |
||||
}], |
||||
] |
||||
}, |
||||
{ |
||||
d: -1, |
||||
v: [ |
||||
['m', 0 + 150, 75 + 123, { |
||||
y: 0, |
||||
r: ROTATE_HORIZONTAL, |
||||
p: 1 |
||||
}], |
||||
['b', 0 + 150, 33.6 + 123, 33.6 + 150, 0 + 123, 75 + 150, 0 + 123, { |
||||
r: ROTATE_VERTICAL |
||||
}], |
||||
['b', 116.4 + 150, 0 + 123, 150 + 150, 33.6 + 123, 150 + 150, 75 + 123, { |
||||
r: ROTATE_HORIZONTAL |
||||
}], |
||||
['l', 150 + 150, 352, { |
||||
y: 0, |
||||
f: 1 |
||||
}], |
||||
] |
||||
} |
||||
|
||||
] |
||||
), |
||||
'n': generateFontData( |
||||
520, 182, 352, |
||||
0, 0, 0, 0, |
||||
JSON.parse(JSON.stringify(DATA_LN)) |
||||
), |
||||
'o': generateFontData( |
||||
580, 232, 232, |
||||
0, 0, -64, -64, |
||||
JSON.parse(JSON.stringify(DATA_LO)) |
||||
), |
||||
'p': generateFontData( |
||||
600, 232, 338, |
||||
-10, -2, -117, -117, |
||||
[{ |
||||
d: -1, |
||||
v: [ |
||||
['m', 0, 5, { |
||||
y: -2.8 |
||||
}], |
||||
['l', 0, 116, { |
||||
r: ROTATE_NONE |
||||
}], |
||||
['b', 0, 180.1, 51.9, 232, 116, 232, { |
||||
r: ROTATE_VERTICAL |
||||
}], |
||||
['b', 180.1, 232, 232, 180.1, 232, 116, { |
||||
r: ROTATE_HORIZONTAL |
||||
}], |
||||
['b', 232, 51.9, 180.1, 0, 116, 0, { |
||||
r: ROTATE_VERTICAL |
||||
}], |
||||
['b', 51.9, 0, 0, 51.9, 0, 116, { |
||||
r: ROTATE_HORIZONTAL |
||||
}], |
||||
['l', 0, 338, { |
||||
y: 0, |
||||
f: 1 |
||||
}], |
||||
] |
||||
}] |
||||
), |
||||
'q': generateFontData( |
||||
600, 232, 338, |
||||
10, 2, -117, -117, |
||||
[{ |
||||
d: -1, |
||||
v: [ |
||||
['m', 232, 5, { |
||||
y: -2.8 |
||||
}], |
||||
['l', 232, 116, { |
||||
r: ROTATE_NONE |
||||
}], |
||||
['b', 232, 180.1, 180.1, 232, 116, 232, { |
||||
r: ROTATE_VERTICAL |
||||
}], |
||||
['b', 51.9, 232, 0, 180.1, 0, 116, { |
||||
r: ROTATE_HORIZONTAL |
||||
}], |
||||
['b', 0, 51.9, 51.9, 0, 116, 0, { |
||||
r: ROTATE_VERTICAL |
||||
}], |
||||
['b', 180.1, 0, 232, 51.9, 232, 116, { |
||||
r: ROTATE_HORIZONTAL |
||||
}], |
||||
['l', 232, 338, { |
||||
y: 0, |
||||
f: 1 |
||||
}], |
||||
] |
||||
}] |
||||
), |
||||
'r': generateFontData( |
||||
340, 119.2, 352, |
||||
-20, -20, 0, 0, |
||||
[{ |
||||
d: -1, |
||||
v: [ |
||||
['m', 0, 130, { |
||||
y: -3.3 |
||||
}], |
||||
['l', 0, 352, { |
||||
y: 0, |
||||
f: 1 |
||||
}], |
||||
] |
||||
}, |
||||
{ |
||||
d: -1, |
||||
v: [ |
||||
['m', 0, 57 + 124, { |
||||
r: ROTATE_HORIZONTAL, |
||||
p: 1, |
||||
}], |
||||
['b', 0, 57 + 124, 41.9, -22.8 + 124, 119.2, 4.5 + 124, { |
||||
x: 0, |
||||
y: 2, |
||||
r: getCurveR(119.2, 4.5 + 124, 41.9, -22.8 + 124, 0, 57 + 124, 119.2, 4.5 + 124, 0), |
||||
f: 1 |
||||
}], |
||||
] |
||||
} |
||||
|
||||
] |
||||
), |
||||
's': generateFontData( |
||||
400, 224 * 0.642, 360 * 0.642, |
||||
0, 0, -64, -64, |
||||
JSON.parse(JSON.stringify(DATA_LS)) |
||||
), |
||||
't': generateFontData( |
||||
356, 232, 352, |
||||
-30, -30, 0, 0, |
||||
[{ |
||||
d: -1, |
||||
v: [ |
||||
['m', 65, 0, { |
||||
y: 0 |
||||
}], |
||||
['l', 65, 298.2 + 6], |
||||
['b', 65, 326.9 + 6, 88.2, 350.1 + 6, 116.9, 350.1 + 6, { |
||||
r: ROTATE_VERTICAL |
||||
}], |
||||
['b', 139.2, 350.1 + 6, 159.3, 337 + 6, 166.6, 317.1, { |
||||
x: 0, |
||||
f: 1 |
||||
}] |
||||
] |
||||
}, |
||||
{ |
||||
d: -1, |
||||
v: [ |
||||
['m', 0, 130, { |
||||
x: 0, |
||||
r: ROTATE_VERTICAL |
||||
}], |
||||
['l', 154, 130, { |
||||
x: 0, |
||||
f: 1 |
||||
}], |
||||
] |
||||
} |
||||
] |
||||
), |
||||
'u': generateFontData( |
||||
520, 182, 352, |
||||
0, 0, 0, 0, |
||||
JSON.parse(JSON.stringify(DATA_LU)) |
||||
), |
||||
'v': generateFontData( |
||||
500, 200, 352, |
||||
0, 0, 0, 0, |
||||
[{ |
||||
d: -1, |
||||
v: [ |
||||
['m', 0, 130, { |
||||
x: 0.6, |
||||
y: -3, |
||||
r: getR(0, 130, 100 - VERTEX_GAP2, 352) |
||||
}], |
||||
['l', 100 - VERTEX_GAP2, 352, { |
||||
r: getR(0, 130, 100 - VERTEX_GAP2, 352), |
||||
f: 1 |
||||
}], |
||||
['l', 100 + VERTEX_GAP2, 352, { |
||||
r: getR(100 + VERTEX_GAP2, 352, 200, 130), |
||||
f: 1, |
||||
v: 1 |
||||
}], |
||||
['l', 200, 130, { |
||||
x: 0.6, |
||||
y: -3, |
||||
f: 1 |
||||
}], |
||||
] |
||||
}] |
||||
), |
||||
'w': generateFontData( |
||||
700, 310, 352, |
||||
0, 0, 0, 0, |
||||
[{ |
||||
d: -1, |
||||
v: [ |
||||
['m', 0, 130, { |
||||
x: 0.6, |
||||
y: -3, |
||||
r: getR(0, 130, 78 - VERTEX_GAP2, 352) |
||||
}], |
||||
['l', 78 - VERTEX_GAP2, 352, { |
||||
r: getR(0, 130, 78 - VERTEX_GAP2, 352), |
||||
f: 1 |
||||
}], |
||||
['l', 78 + VERTEX_GAP2, 352, { |
||||
r: getR(78 + VERTEX_GAP2, 352, 155 - VERTEX_GAP2, 130), |
||||
f: 1, |
||||
v: 1 |
||||
}], |
||||
['l', 155 - VERTEX_GAP2, 130, { |
||||
y: 1, |
||||
r: getR(78 + VERTEX_GAP2, 352, 155 - VERTEX_GAP2, 130), |
||||
f: 1 |
||||
}], |
||||
['l', 155 + VERTEX_GAP2, 130, { |
||||
y: 1, |
||||
r: getR(155 + VERTEX_GAP2, 130, 233 - VERTEX_GAP2, 352), |
||||
f: 1, |
||||
v: 1 |
||||
}], |
||||
['l', 233 - VERTEX_GAP2, 352, { |
||||
r: getR(155 + VERTEX_GAP2, 130, 233 - VERTEX_GAP2, 352), |
||||
f: 1 |
||||
}], |
||||
['l', 233 + VERTEX_GAP2, 352, { |
||||
r: getR(233 + VERTEX_GAP2, 352, 310, 130), |
||||
f: 1, |
||||
v: 1 |
||||
}], |
||||
['l', 310, 130, { |
||||
x: 0.6, |
||||
y: -3, |
||||
f: 1 |
||||
}], |
||||
] |
||||
}] |
||||
), |
||||
'x': generateFontData( |
||||
490, 210, 352, |
||||
0, 0, 0, -7, |
||||
[{ |
||||
d: -1, |
||||
v: [ |
||||
['m', 10, 130, { |
||||
x: 0.5, |
||||
y: -1, |
||||
r: getR(10, 130, 210, 352) |
||||
}], |
||||
['l', 210, 352, { |
||||
x: 0.5, |
||||
y: 0.5, |
||||
f: 1 |
||||
}] |
||||
] |
||||
}, |
||||
{ |
||||
d: -1, |
||||
v: [ |
||||
['m', 200, 130, { |
||||
x: 0.5, |
||||
y: -1, |
||||
r: getR(200, 130, 0, 352) |
||||
}], |
||||
['l', 0, 352, { |
||||
x: 0.5, |
||||
y: 0.5, |
||||
f: 1 |
||||
}] |
||||
] |
||||
} |
||||
] |
||||
), |
||||
'y': generateFontData( |
||||
500, 225.5, 331.5, |
||||
10, 10, -119, -119, |
||||
JSON.parse(JSON.stringify(DATA_LY)) |
||||
), |
||||
'z': generateFontData( // 232, 224
|
||||
420, 172, 352, |
||||
0, 0, 0, 0, |
||||
[{ |
||||
d: -1, |
||||
v: [ |
||||
['m', 6, 130, { |
||||
x: -0.5, |
||||
y: 1, |
||||
r: ROTATE_VERTICAL, |
||||
}], |
||||
['l', 166, 130, { |
||||
x: 1.8, |
||||
y: 1, |
||||
r: ROTATE_VERTICAL, |
||||
f: 1 |
||||
}], |
||||
['l', 166, 130 + VERTEX_GAP, { |
||||
x: 1.8, |
||||
y: 1, |
||||
r: ROTATE_HORIZONTAL, |
||||
p: 1, |
||||
v: 1 |
||||
}], |
||||
['l', 0, 352 - VERTEX_GAP, { |
||||
x: 1.7, |
||||
r: ROTATE_HORIZONTAL, |
||||
p: 1 |
||||
}], |
||||
['l', 0, 352, { |
||||
x: 1.7, |
||||
r: ROTATE_VERTICAL, |
||||
f: 1, |
||||
v: 1 |
||||
}], |
||||
['l', 172, 352, { |
||||
x: -0.4, |
||||
r: ROTATE_VERTICAL, |
||||
f: 1 |
||||
}] |
||||
] |
||||
}] |
||||
) |
||||
}; |
||||
@ -1,344 +0,0 @@
@@ -1,344 +0,0 @@
|
||||
import { |
||||
generateFontData, |
||||
ROTATE_HORIZONTAL, |
||||
ROTATE_VERTICAL, |
||||
ROTATE_NONE, |
||||
VERTEX_GAP, |
||||
getR, |
||||
getCurveR |
||||
} from './util.js'; |
||||
|
||||
export const NUMBER = { |
||||
'0': generateFontData( |
||||
660, 270, 360, |
||||
0, 0, 0, 0, |
||||
[{ |
||||
d: 1, |
||||
v: [ |
||||
['m', 270, 180, { |
||||
r: ROTATE_HORIZONTAL, |
||||
p: 1, |
||||
f: 1 |
||||
}], |
||||
['b', 270, 279.4, 209.6, 360, 135, 360, { |
||||
r: ROTATE_VERTICAL |
||||
}], |
||||
['b', 60.4, 360, 0, 279.4, 0, 180, { |
||||
r: ROTATE_HORIZONTAL |
||||
}], |
||||
['b', 0, 80.6, 60.4, 0, 135, 0, { |
||||
r: ROTATE_VERTICAL |
||||
}], |
||||
['b', 209.6, 0, 270, 80.6, 270, 180, { |
||||
r: ROTATE_HORIZONTAL, |
||||
c: 1 |
||||
}], |
||||
] |
||||
}] |
||||
), |
||||
'1': generateFontData( |
||||
380, 76, 352, |
||||
15, 15, 0, 0, |
||||
[{ |
||||
d: -1, |
||||
v: [ |
||||
['m', 0, 51, { |
||||
x: -2, |
||||
y: 2, |
||||
r: getR(0, 51, 76 - VERTEX_GAP, 0) |
||||
}], |
||||
['l', 76 - VERTEX_GAP, 0, { |
||||
r: ROTATE_HORIZONTAL, |
||||
p: 1 |
||||
}], |
||||
['l', 76, 0, { |
||||
r: ROTATE_HORIZONTAL, |
||||
f: 1, |
||||
v: 1 |
||||
}], |
||||
['l', 76, 352, { |
||||
y: 0, |
||||
f: 1 |
||||
}], |
||||
] |
||||
}] |
||||
), |
||||
'2': generateFontData( |
||||
580, 210, 356, |
||||
0, 0, 2, 2, |
||||
[{ |
||||
d: -1, |
||||
v: [ |
||||
['m', 3.9, 68.8, { |
||||
x: 1.2, |
||||
y: 1.2, |
||||
r: getCurveR(3.9, 68.8, 16.7, 29, 54.2, 3.1, 98.2, 0.2, 0) |
||||
}], |
||||
['b', 16.7, 29, 54.2, 3.1, 98.2, 0.2], |
||||
['b', 151.8, -3.3, 208.5, 38.3, 198.9, 100.1], |
||||
['b', 197.1, 111.8, 196.4, 142.4, 101.5, 235.2], |
||||
['b', 11.4, 323.2, 0, 356 - VERTEX_GAP, 0, 356 - VERTEX_GAP, { |
||||
r: ROTATE_NONE |
||||
}], |
||||
['l', 0, 356 - VERTEX_GAP, { |
||||
r: ROTATE_VERTICAL, |
||||
p: 1 |
||||
}], |
||||
['l', 0, 356, { |
||||
r: ROTATE_VERTICAL, |
||||
f: 1, |
||||
v: 1 |
||||
}], |
||||
['l', 210, 356, { |
||||
x: -0.5, |
||||
f: 1 |
||||
}], |
||||
] |
||||
}] |
||||
), |
||||
'3': generateFontData( |
||||
580, 222.1, 360, |
||||
0, 0, 0, 0, |
||||
[{ |
||||
d: -1, |
||||
v: [ |
||||
['m', 10.7, 66.3, { |
||||
r: getCurveR(10.7, 66.3, 11.2, 64.8, 11.7, 63.3, 12.3, 61.8, 0) |
||||
}], |
||||
['b', 11.2, 64.8, 11.7, 63.3, 12.3, 61.8, { |
||||
r: ROTATE_NONE |
||||
}], |
||||
['b', 25.8, 25.9, 64.5, 0, 110.1, 0, { |
||||
r: ROTATE_VERTICAL |
||||
}], |
||||
['b', 167, 0, 213.1, 40.3, 213.1, 90, { |
||||
r: ROTATE_HORIZONTAL |
||||
}], |
||||
['b', 213.1, 139.7, 167, 180, 110.1, 179.9, { |
||||
r: ROTATE_VERTICAL, |
||||
f: 1 |
||||
}], |
||||
['l', 100.1, 179.9, { |
||||
x: -5, |
||||
y: 1, |
||||
r: ROTATE_VERTICAL, |
||||
f: 1 |
||||
}], |
||||
['l', 110.1, 180, { |
||||
r: ROTATE_VERTICAL, |
||||
p: 1 |
||||
}], |
||||
['b', 172, 180, 222.1, 220.3, 222.1, 270, { |
||||
r: ROTATE_HORIZONTAL |
||||
}], |
||||
['b', 222.1, 319.7, 172, 360, 110.1, 360, { |
||||
r: ROTATE_VERTICAL |
||||
}], |
||||
['b', 56.9, 360, 12.4, 330.2, 1, 290.3, { |
||||
f: 1 |
||||
}], |
||||
] |
||||
}] |
||||
), |
||||
'4': generateFontData( |
||||
596, 236, 352, |
||||
0, 0, 0, 0, |
||||
[{ |
||||
d: 1, |
||||
v: [ |
||||
['m', 175, 352, { |
||||
y: 0, |
||||
f: 1 |
||||
}], |
||||
['l', 175, 0, { |
||||
f: 1 |
||||
}], |
||||
['l', 175 - VERTEX_GAP, 0, { |
||||
r: ROTATE_VERTICAL, |
||||
p: 1, |
||||
v: 1 |
||||
}], |
||||
['l', 0, 276 - VERTEX_GAP, { |
||||
r: ROTATE_HORIZONTAL, |
||||
p: 1 |
||||
}], |
||||
['l', 0, 276, { |
||||
r: ROTATE_VERTICAL, |
||||
f: 1, |
||||
v: 1 |
||||
}], |
||||
['l', 236, 276, { |
||||
x: -0.5 |
||||
}], |
||||
] |
||||
}] |
||||
), |
||||
'5': generateFontData( |
||||
596, 208.5, 356, |
||||
0, -5, -2, -2, |
||||
[{ |
||||
d: 1, |
||||
v: [ |
||||
['m', 0, 295.7, { |
||||
r: getCurveR(0, 295.7, 15.3, 333.8, 52.2, 356.2, 97.5, 356, 0), |
||||
f: 1 |
||||
}], |
||||
['b', 15.3, 333.8, 52.2, 356.2, 97.5, 356, { |
||||
r: ROTATE_VERTICAL |
||||
}], |
||||
['b', 159.1, 355.7, 206.1, 306.9, 208.5, 240.8, { |
||||
r: ROTATE_HORIZONTAL |
||||
}], |
||||
['b', 210.9, 173.9, 162.7, 120.8, 97.5, 125.6, { |
||||
r: ROTATE_VERTICAL |
||||
}], |
||||
['b', 59.4, 128.4, 25.5, 145.8, 5.6, 176.4, { |
||||
f: 1 |
||||
}], |
||||
['l', 5.6, 176.4, { |
||||
r: ROTATE_NONE |
||||
}], |
||||
['l', 5.6 - VERTEX_GAP, 176.4, { |
||||
r: ROTATE_HORIZONTAL, |
||||
p: 1, |
||||
v: 1 |
||||
}], |
||||
['l', 11.5, 0, { |
||||
r: ROTATE_VERTICAL, |
||||
f: 1 |
||||
}], |
||||
['l', 193.5, 0, { |
||||
x: -0.5 |
||||
}], |
||||
] |
||||
}] |
||||
), |
||||
'6': generateFontData( |
||||
596, 215.8, 360, |
||||
0, -2, 0, 0, |
||||
[{ |
||||
d: 1, |
||||
v: [ |
||||
['m', 7.6, 272.3, { |
||||
r: ROTATE_HORIZONTAL, |
||||
p: 1, |
||||
f: 1 |
||||
}], |
||||
['b', 6.4, 265.8, 5.8, 259.1, 5.8, 252.2, { |
||||
r: ROTATE_HORIZONTAL |
||||
}], |
||||
['b', 5.8, 192.6, 52.8, 144.2, 110.8, 144.2, { |
||||
r: ROTATE_VERTICAL |
||||
}], |
||||
['b', 168.7, 144.2, 215.8, 192.6, 215.8, 252.2, { |
||||
r: ROTATE_HORIZONTAL |
||||
}], |
||||
['b', 215.8, 311.9, 168.7, 360, 110.8, 360, { |
||||
r: ROTATE_VERTICAL |
||||
}], |
||||
['b', 59.5, 360, 16.8, 322.4, 7.6, 272.4, { |
||||
r: ROTATE_NONE |
||||
}], |
||||
['b', 7.6, 272.4, -44.1, 8.8, 122.2, 0.2], |
||||
['b', 165.5, -2.1, 193.8, 21, 212.1, 56.4], |
||||
] |
||||
}] |
||||
), |
||||
'7': generateFontData( |
||||
540, 213, 352, |
||||
0, 0, 0, 0, |
||||
[{ |
||||
d: -1, |
||||
v: [ |
||||
['m', 0, 0, { |
||||
x: 0, |
||||
r: ROTATE_VERTICAL |
||||
}], |
||||
['l', 213, 0, { |
||||
r: ROTATE_VERTICAL, |
||||
f: 1 |
||||
}], |
||||
['l', 213, 0.1, { |
||||
r: ROTATE_NONE |
||||
}], |
||||
['l', 72.7, 352, { |
||||
y: 0.1, |
||||
f: 1 |
||||
}], |
||||
] |
||||
}] |
||||
), |
||||
'8': generateFontData( |
||||
596, 224, 360, |
||||
0, 0, 0, 0, |
||||
[{ |
||||
d: 1, |
||||
v: [ |
||||
['m', 112, 180, { |
||||
r: ROTATE_HORIZONTAL, |
||||
p: 1, |
||||
f: 1 |
||||
}], |
||||
['b', 50.1, 180, 0, 220.3, 0, 270, { |
||||
r: ROTATE_HORIZONTAL |
||||
}], |
||||
['b', 0, 319.7, 50.1, 360, 112, 360, { |
||||
r: ROTATE_VERTICAL |
||||
}], |
||||
['b', 173.9, 360, 224, 319.7, 224, 270, { |
||||
r: ROTATE_HORIZONTAL |
||||
}], |
||||
['b', 224, 220.3, 173.9, 180, 112, 180, { |
||||
r: ROTATE_VERTICAL |
||||
}], |
||||
['b', 55.1, 180, 9, 139.7, 9, 90, { |
||||
r: ROTATE_HORIZONTAL |
||||
}], |
||||
['b', 9, 40.3, 55.1, 0, 112, 0, { |
||||
r: ROTATE_VERTICAL |
||||
}], |
||||
['b', 168.9, 0, 215, 40.3, 215, 90, { |
||||
r: ROTATE_HORIZONTAL |
||||
}], |
||||
['b', 215, 139.7, 168.9, 180, 112, 180, { |
||||
r: ROTATE_HORIZONTAL, |
||||
p: 1, |
||||
f: 1 |
||||
}], |
||||
] |
||||
}] |
||||
), |
||||
'9': generateFontData( |
||||
596, 215.8, 360, |
||||
0, -2, 0, 0, |
||||
[{ |
||||
d: -1, |
||||
v: [ |
||||
['m', 208.2, 88, { |
||||
r: ROTATE_HORIZONTAL, |
||||
p: 1, |
||||
f: 1 |
||||
}], |
||||
['b', 209.4, 94.5, 210, 101.2, 210, 108, { |
||||
r: ROTATE_HORIZONTAL |
||||
}], |
||||
['b', 210, 167.6, 163, 216, 105, 216, { |
||||
r: ROTATE_VERTICAL |
||||
}], |
||||
['b', 47, 216, -0, 167.6, 0, 108, { |
||||
r: ROTATE_HORIZONTAL |
||||
}], |
||||
['b', 0, 48.4, 47, -0, 105, 0, { |
||||
r: ROTATE_VERTICAL |
||||
}], |
||||
['b', 156.3, 0, 199, 37.8, 208.2, 87.8, { |
||||
r: ROTATE_NONE |
||||
}], |
||||
['b', 208.2, 87.8, 259.8, 351.4, 93.5, 360], |
||||
['b', 50.3, 362.3, 21.9, 339.2, 3.6, 303.8, { |
||||
f: 1 |
||||
}], |
||||
] |
||||
}] |
||||
) |
||||
}; |
||||
@ -1,916 +0,0 @@
@@ -1,916 +0,0 @@
|
||||
import { |
||||
generateFontData, |
||||
ROTATE_HORIZONTAL, |
||||
ROTATE_VERTICAL, |
||||
VERTEX_GAP, |
||||
VERTEX_GAP2, |
||||
getR, |
||||
getCurveR |
||||
} from './util.js'; |
||||
|
||||
export const DATA_UA = [{ |
||||
d: -1, |
||||
v: [ |
||||
['m', 0, 352, { |
||||
x: 0.55, |
||||
y: 0.3, |
||||
r: getR(0, 352, 145 - VERTEX_GAP2, 0), |
||||
}], |
||||
['l', 145 - VERTEX_GAP2, 0, { |
||||
r: getR(0, 352, 145 - VERTEX_GAP2, 0), |
||||
f: 1 |
||||
}], |
||||
['l', 145 + VERTEX_GAP2, 0, { |
||||
r: getR(290, 352, 145 + VERTEX_GAP2, 0), |
||||
f: 1, |
||||
v: 1 |
||||
}], |
||||
['l', 290, 352, { |
||||
x: 0.55, |
||||
y: 0.3, |
||||
f: 1 |
||||
}], |
||||
] |
||||
}, |
||||
{ |
||||
d: -1, |
||||
v: [ |
||||
['m', 47, 237, { |
||||
r: ROTATE_VERTICAL, |
||||
p: 1 |
||||
}], |
||||
['l', 243, 237, { |
||||
r: ROTATE_VERTICAL, |
||||
p: 1, |
||||
f: 1, |
||||
}], |
||||
] |
||||
} |
||||
]; |
||||
|
||||
export const DATA_UC = [{ |
||||
d: 1, |
||||
v: [ |
||||
['m', 293.1, 320.1, { |
||||
r: getCurveR(293.1, 320.1, 262.2, 345, 222.8, 360, 180, 360, 0), |
||||
f: 1 |
||||
}], |
||||
['b', 262.2, 345, 222.8, 360, 180, 360], |
||||
['b', 80.6, 360, 0, 279.4, 0, 180], |
||||
['b', 0, 80.6, 80.6, 0, 180, 0], |
||||
['b', 222.8, 0, 262.2, 15, 293.1, 39.9], |
||||
] |
||||
}]; |
||||
|
||||
export const DATA_UD = [{ |
||||
d: -1, |
||||
v: [ |
||||
['m', 95, 352, { |
||||
r: ROTATE_VERTICAL, |
||||
f: 1 |
||||
}], |
||||
['b', 191.6, 352, 270, 271.6, 270, 175, { |
||||
r: ROTATE_HORIZONTAL |
||||
}], |
||||
['b', 270, 78.4, 191.6, 0, 95, 0, { |
||||
r: ROTATE_VERTICAL |
||||
}], |
||||
['l', 0, 0, { |
||||
r: ROTATE_HORIZONTAL, |
||||
f: 1 |
||||
}], |
||||
['l', 0, 352, { |
||||
r: ROTATE_HORIZONTAL, |
||||
f: 1 |
||||
}], |
||||
['l', 95, 352, { |
||||
r: ROTATE_VERTICAL, |
||||
f: 1 |
||||
}], |
||||
] |
||||
}]; |
||||
|
||||
export const DATA_UE = [{ |
||||
d: -1, |
||||
v: [ |
||||
['m', 192, 0, { |
||||
x: 0, |
||||
r: ROTATE_VERTICAL, |
||||
}], |
||||
['l', 0, 0, { |
||||
r: ROTATE_HORIZONTAL, |
||||
f: 1, |
||||
x: 0.5 |
||||
}], |
||||
['l', 0, 352, { |
||||
f: 1, |
||||
x: 0.5 |
||||
}], |
||||
['l', 192, 352, { |
||||
x: 0, |
||||
r: ROTATE_VERTICAL, |
||||
f: 1 |
||||
}], |
||||
] |
||||
}, |
||||
{ |
||||
d: -1, |
||||
v: [ |
||||
['m', 0, 164, { |
||||
r: ROTATE_VERTICAL, |
||||
p: 1, |
||||
x: 0.5 |
||||
}], |
||||
['l', 180, 164, { |
||||
x: 0, |
||||
r: ROTATE_VERTICAL, |
||||
f: 1 |
||||
}], |
||||
] |
||||
} |
||||
]; |
||||
|
||||
export const DATA_UG = [{ |
||||
d: 1, |
||||
v: [ |
||||
['m', 202, 180, { |
||||
r: ROTATE_VERTICAL, |
||||
f: 1 |
||||
}], |
||||
['l', 352, 180, { |
||||
f: 1 |
||||
}], |
||||
['b', 352, 279.4, 279.4, 360, 180, 360, { |
||||
r: ROTATE_VERTICAL |
||||
}], |
||||
['b', 80.6, 360, 0, 279.4, 0, 180, { |
||||
r: ROTATE_HORIZONTAL |
||||
}], |
||||
['b', 0, 80.6, 80.6, 0, 180, 0, { |
||||
r: ROTATE_VERTICAL |
||||
}], |
||||
['b', 222.8, 0, 262.1, 14.9, 293, 39.9], |
||||
] |
||||
}]; |
||||
|
||||
export const DATA_UH = [{ |
||||
d: -1, |
||||
v: [ |
||||
['m', 0, 0, { |
||||
y: 0, |
||||
r: ROTATE_HORIZONTAL |
||||
}], |
||||
['l', 0, 352, { |
||||
y: 0, |
||||
r: ROTATE_HORIZONTAL, |
||||
f: 1 |
||||
}], |
||||
] |
||||
}, |
||||
{ |
||||
d: -1, |
||||
v: [ |
||||
['m', 232, 0, { |
||||
y: 0, |
||||
r: ROTATE_HORIZONTAL |
||||
}], |
||||
['l', 232, 352, { |
||||
y: 0, |
||||
r: ROTATE_HORIZONTAL, |
||||
f: 1 |
||||
}], |
||||
] |
||||
}, |
||||
{ |
||||
d: -1, |
||||
v: [ |
||||
['m', 0, 164, { |
||||
r: ROTATE_VERTICAL, |
||||
p: 1 |
||||
}], |
||||
['l', 232, 164, { |
||||
r: ROTATE_VERTICAL, |
||||
f: 1, |
||||
p: 1 |
||||
}], |
||||
] |
||||
} |
||||
]; |
||||
|
||||
export const DATA_UI = [{ |
||||
d: 1, |
||||
v: [ |
||||
['m', 0, 352, { |
||||
y: 0, |
||||
r: ROTATE_HORIZONTAL, |
||||
f: 1 |
||||
}], |
||||
['l', 0, 0, { |
||||
y: 0, |
||||
r: ROTATE_HORIZONTAL |
||||
}], |
||||
] |
||||
}]; |
||||
|
||||
export const DATA_UJ = [{ |
||||
d: 1, |
||||
v: [ |
||||
['m', 0, 310.5 + 0.5, { |
||||
r: getCurveR(0, 310.5 + 0.5, 16.2, 341.1 + 0.5, 49.3, 355.5 + 0.5, 86, 355.5 + 0.5, 0), |
||||
f: 1 |
||||
}], |
||||
['b', 16.2, 341.1 + 0.5, 49.3, 355.5 + 0.5, 86, 355.5 + 0.5, { |
||||
r: ROTATE_VERTICAL |
||||
}], |
||||
['b', 133.5, 355.5 + 0.5, 172, 317 + 0.5, 172, 269.5 + 0.5], |
||||
['l', 172.5, 0, { |
||||
y: 0, |
||||
r: ROTATE_HORIZONTAL |
||||
}], |
||||
] |
||||
}]; |
||||
|
||||
export const DATA_UN = [{ |
||||
d: -1, |
||||
v: [ |
||||
['m', 0, 352, { |
||||
y: 0, |
||||
r: ROTATE_HORIZONTAL |
||||
}], |
||||
['l', 0, 0, { |
||||
r: ROTATE_HORIZONTAL, |
||||
f: 1 |
||||
}], |
||||
['l', 0 + VERTEX_GAP, 0, { |
||||
r: ROTATE_HORIZONTAL, |
||||
p: 1, |
||||
f: 1, |
||||
v: 1 |
||||
}], |
||||
['l', 250 - VERTEX_GAP, 351, { |
||||
r: ROTATE_HORIZONTAL, |
||||
p: 1, |
||||
f: 1 |
||||
}], |
||||
['l', 250, 351, { |
||||
r: ROTATE_HORIZONTAL, |
||||
f: 1, |
||||
v: 1 |
||||
}], |
||||
['l', 250, 0, { |
||||
y: 0, |
||||
r: ROTATE_HORIZONTAL, |
||||
f: 1 |
||||
}], |
||||
] |
||||
}]; |
||||
|
||||
export const DATA_UO = [{ |
||||
d: 1, |
||||
v: [ |
||||
['m', 360, 180, { |
||||
r: ROTATE_HORIZONTAL, |
||||
p: 1, |
||||
f: 1 |
||||
}], |
||||
['b', 360, 279.4, 279.4, 360, 180, 360, { |
||||
r: ROTATE_VERTICAL |
||||
}], |
||||
['b', 80.6, 360, 0, 279.4, 0, 180, { |
||||
r: ROTATE_HORIZONTAL |
||||
}], |
||||
['b', 0, 80.6, 80.6, 0, 180, 0, { |
||||
r: ROTATE_VERTICAL |
||||
}], |
||||
['b', 279.4, 0, 360, 80.6, 360, 180, { |
||||
r: ROTATE_HORIZONTAL, |
||||
c: 1 |
||||
}], |
||||
] |
||||
}]; |
||||
|
||||
export const DATA_US = [{ |
||||
d: 1, |
||||
v: [ |
||||
['m', 0, 295.4, { |
||||
r: getCurveR(0, 295.4, 17.6, 332.1, 58.3, 360, 110.3, 360, 0), |
||||
f: 1 |
||||
}], |
||||
['b', 17.6, 332.1, 58.3, 360, 110.3, 360], |
||||
['b', 173.9, 360, 223.8, 329.6, 224, 271], |
||||
['b', 224.2, 214.7, 180.7, 189.6, 112.4, 173.3], |
||||
['b', 47.3, 157.7, 10.9, 130.6, 12, 84.4], |
||||
['b', 13.3, 29.8, 57.3, 0, 114.8, 0], |
||||
['b', 158.4, 0, 196.5, 20.5, 212, 51.3], |
||||
] |
||||
}]; |
||||
|
||||
export const DATA_UU = [{ |
||||
d: 1, |
||||
v: [ |
||||
['m', 250, 0, { |
||||
y: 0, |
||||
r: ROTATE_HORIZONTAL |
||||
}], |
||||
['l', 250, 230 + 1, { |
||||
r: ROTATE_HORIZONTAL |
||||
}], |
||||
['b', 250, 299 + 1, 194, 355 + 1, 125, 355 + 1, { |
||||
r: ROTATE_VERTICAL |
||||
}], |
||||
['b', 56, 355 + 1, 0, 299 + 1, 0, 230 + 1, { |
||||
r: ROTATE_HORIZONTAL |
||||
}], |
||||
['l', 0, 0, { |
||||
y: 0, |
||||
r: ROTATE_HORIZONTAL |
||||
}], |
||||
] |
||||
}]; |
||||
|
||||
export const DATA_UY = [{ |
||||
d: -1, |
||||
v: [ |
||||
['m', 0, 0, { |
||||
x: 0.6, |
||||
y: 0.3, |
||||
r: getR(0, 0, 135, 186), |
||||
}], |
||||
['l', 135, 186, { |
||||
r: ROTATE_HORIZONTAL, |
||||
f: 1 |
||||
}], |
||||
['l', 270, 0, { |
||||
x: 0.6, |
||||
y: 0.3, |
||||
f: 1 |
||||
}] |
||||
] |
||||
}, |
||||
{ |
||||
d: -1, |
||||
v: [ |
||||
['m', 135, 186, { |
||||
r: ROTATE_HORIZONTAL, |
||||
p: 1 |
||||
}], |
||||
['l', 135, 352, { |
||||
y: 0, |
||||
f: 1 |
||||
}], |
||||
] |
||||
} |
||||
]; |
||||
|
||||
export const UPPER = { |
||||
'A': generateFontData( |
||||
620, 290, 352, |
||||
0, 0, 0, 0, |
||||
JSON.parse(JSON.stringify(DATA_UA)) |
||||
), |
||||
'B': generateFontData( |
||||
596, 209, 352, |
||||
-10, -10, 0, 0, |
||||
[{ |
||||
d: 1, |
||||
v: [ |
||||
['m', 0, 164, { |
||||
r: ROTATE_VERTICAL, |
||||
p: 1 |
||||
}], |
||||
['l', 116, 164, { |
||||
r: ROTATE_VERTICAL, |
||||
p: 1, |
||||
f: 1 |
||||
}], |
||||
['b', 167.4, 164, 209, 205.6, 209, 257, { |
||||
r: ROTATE_HORIZONTAL |
||||
}], |
||||
['b', 209, 308.4, 167.4, 352, 116, 352, { |
||||
r: ROTATE_VERTICAL |
||||
}], |
||||
['l', 0, 352, { |
||||
r: ROTATE_HORIZONTAL, |
||||
f: 1 |
||||
}], |
||||
['l', 0, 0, { |
||||
r: ROTATE_HORIZONTAL, |
||||
f: 1 |
||||
}], |
||||
['l', 116, 0, { |
||||
r: ROTATE_VERTICAL |
||||
}], |
||||
['b', 161.3, 0, 198, 36.7, 198, 82, { |
||||
r: ROTATE_HORIZONTAL |
||||
}], |
||||
['b', 198, 127.3, 161.3, 164, 116, 164, { |
||||
r: ROTATE_VERTICAL |
||||
}] |
||||
] |
||||
}] |
||||
), |
||||
'C': generateFontData( |
||||
700, 293.1, 360, |
||||
0, 0, 0, 0, |
||||
JSON.parse(JSON.stringify(DATA_UC)) |
||||
), |
||||
'D': generateFontData( |
||||
721, 270, 352, |
||||
-10, -10, 0, 0, |
||||
JSON.parse(JSON.stringify(DATA_UD)) |
||||
), |
||||
'E': generateFontData( |
||||
520, 192, 352, |
||||
-5, -80, 0, 0, |
||||
JSON.parse(JSON.stringify(DATA_UE)) |
||||
), |
||||
'F': generateFontData( |
||||
510, 192, 352, |
||||
-5, -80, 0, 0, |
||||
[{ |
||||
d: -1, |
||||
v: [ |
||||
['m', 192, 0, { |
||||
x: 0, |
||||
r: ROTATE_VERTICAL, |
||||
}], |
||||
['l', 0, 0, { |
||||
r: ROTATE_HORIZONTAL, |
||||
f: 1, |
||||
x: 0.5 |
||||
}], |
||||
['l', 0, 352, { |
||||
y: 0, |
||||
f: 1, |
||||
x: 0.5 |
||||
}], |
||||
] |
||||
}, |
||||
{ |
||||
d: -1, |
||||
v: [ |
||||
['m', 0, 164, { |
||||
r: ROTATE_VERTICAL, |
||||
p: 1, |
||||
x: 0.5 |
||||
}], |
||||
['l', 180, 164, { |
||||
x: 0, |
||||
r: ROTATE_VERTICAL, |
||||
f: 1 |
||||
}], |
||||
] |
||||
} |
||||
] |
||||
), |
||||
'G': generateFontData( |
||||
840, 352, 360, |
||||
0, 0, 0, 0, |
||||
JSON.parse(JSON.stringify(DATA_UG)) |
||||
), |
||||
'H': generateFontData( |
||||
684, 232, 352, |
||||
0, 0, 0, 0, |
||||
JSON.parse(JSON.stringify(DATA_UH)) |
||||
), |
||||
'I': generateFontData( |
||||
249, 0, 352, |
||||
0, 0, 0, 0, |
||||
JSON.parse(JSON.stringify(DATA_UI)) |
||||
), |
||||
'J': generateFontData( |
||||
472, 172.5, 355.5, |
||||
10, 20, -2, -2, |
||||
JSON.parse(JSON.stringify(DATA_UJ)) |
||||
), |
||||
'K': generateFontData( |
||||
616, 232, 352, |
||||
-10, -20, 0, 0, |
||||
[{ |
||||
d: -1, |
||||
v: [ |
||||
['m', 0, 0, { |
||||
y: 0, |
||||
r: ROTATE_HORIZONTAL |
||||
}], |
||||
['l', 0, 352, { |
||||
y: 0, |
||||
r: ROTATE_HORIZONTAL, |
||||
f: 1 |
||||
}], |
||||
] |
||||
}, |
||||
{ |
||||
d: -1, |
||||
v: [ |
||||
['m', 212, 0, { |
||||
x: 0.7, |
||||
y: 0.7, |
||||
r: getR(212, 0, 0, 164 - VERTEX_GAP2), |
||||
}], |
||||
['l', 0, 164 - VERTEX_GAP2, { |
||||
r: ROTATE_VERTICAL, |
||||
p: 1 |
||||
}], |
||||
['l', 0, 164 + VERTEX_GAP2, { |
||||
r: ROTATE_VERTICAL, |
||||
p: 1, |
||||
v: 1 |
||||
}], |
||||
['l', 232, 352, { |
||||
x: 0.7, |
||||
y: 0.7, |
||||
f: 1 |
||||
}], |
||||
] |
||||
} |
||||
] |
||||
), |
||||
'L': generateFontData( |
||||
529, 192, 352, |
||||
-10, -20, 0, 0, |
||||
[{ |
||||
d: -1, |
||||
v: [ |
||||
['m', 0, 0, { |
||||
y: 0 |
||||
}], |
||||
['l', 0, 352, { |
||||
f: 1 |
||||
}], |
||||
['l', 192, 352, { |
||||
x: 0, |
||||
f: 1 |
||||
}], |
||||
] |
||||
}] |
||||
), |
||||
'M': generateFontData( |
||||
885, 330, 352, |
||||
0, 0, 0, 0, |
||||
[{ |
||||
d: -1, |
||||
v: [ |
||||
['m', 0, 352, { |
||||
y: 0, |
||||
r: ROTATE_HORIZONTAL |
||||
}], |
||||
['l', 0, 0, { |
||||
r: ROTATE_HORIZONTAL, |
||||
f: 1 |
||||
}], |
||||
['l', 0 + VERTEX_GAP, 0, { |
||||
r: ROTATE_HORIZONTAL, |
||||
p: 1, |
||||
f: 1, |
||||
v: 1 |
||||
}], |
||||
['l', 165 - VERTEX_GAP2, 330, { |
||||
r: getR(165 - VERTEX_GAP2, 330, 165 - VERTEX_GAP2, 330), |
||||
f: 1 |
||||
}], |
||||
['l', 165 + VERTEX_GAP2, 330, { |
||||
r: getR(165 + VERTEX_GAP2, 330, 330 - VERTEX_GAP, 0), |
||||
f: 1, |
||||
v: 1 |
||||
}], |
||||
['l', 330 - VERTEX_GAP, 0, { |
||||
r: ROTATE_HORIZONTAL, |
||||
p: 1, |
||||
f: 1 |
||||
}], |
||||
['l', 330, 0, { |
||||
r: ROTATE_HORIZONTAL, |
||||
f: 1, |
||||
v: 1 |
||||
}], |
||||
['l', 330, 352, { |
||||
y: 0, |
||||
r: ROTATE_HORIZONTAL, |
||||
f: 1 |
||||
}], |
||||
] |
||||
}] |
||||
), |
||||
'N': generateFontData( |
||||
721, 250, 352, |
||||
0, 0, 0, 0, |
||||
JSON.parse(JSON.stringify(DATA_UN)) |
||||
), |
||||
'O': generateFontData( |
||||
850, 360, 360, |
||||
0, 0, 0, 0, |
||||
JSON.parse(JSON.stringify(DATA_UO)) |
||||
), |
||||
'P': generateFontData( |
||||
568, 210, 352, |
||||
-10, -10, -0.5, -0.5, |
||||
[{ |
||||
d: 1, |
||||
v: [ |
||||
['m', 0, 352, { |
||||
y: 0, |
||||
f: 1 |
||||
}], |
||||
['l', 0, 0, { |
||||
f: 1 |
||||
}], |
||||
['l', 117, 0, { |
||||
r: ROTATE_VERTICAL |
||||
}], |
||||
['b', 168.4, 0, 210, 41.6, 210, 93, { |
||||
r: ROTATE_HORIZONTAL |
||||
}], |
||||
['b', 210, 144.4, 168.4, 186, 117, 186, { |
||||
r: ROTATE_VERTICAL |
||||
}], |
||||
['l', 0, 186, { |
||||
r: ROTATE_VERTICAL, |
||||
p: 1 |
||||
}], |
||||
] |
||||
}] |
||||
), |
||||
'Q': generateFontData( |
||||
850, 360, 360, |
||||
0, 0, 0, 0, |
||||
[{ |
||||
d: -1, |
||||
v: [ |
||||
['m', 360, 180, { |
||||
r: ROTATE_VERTICAL, |
||||
p: 1, |
||||
f: 1 |
||||
}], |
||||
['b', 360, 80.6, 279.4, 0, 180, 0, { |
||||
r: ROTATE_VERTICAL |
||||
}], |
||||
['b', 80.6, 0, 0, 80.6, 0, 180, { |
||||
r: ROTATE_HORIZONTAL |
||||
}], |
||||
['b', 0, 279.4, 80.6, 360, 180, 360, { |
||||
r: ROTATE_VERTICAL |
||||
}], |
||||
['b', 279.4, 360, 360, 279.4, 360, 180, { |
||||
r: ROTATE_HORIZONTAL, |
||||
c: 1, |
||||
f: 1 |
||||
}], |
||||
] |
||||
}, |
||||
{ |
||||
d: -1, |
||||
v: [ |
||||
['m', 222, 222, { |
||||
x: 0.5, |
||||
y: 0.5, |
||||
r: getR(222, 222, 360, 360), |
||||
}], |
||||
['l', 360, 360, { |
||||
x: 0.5, |
||||
y: 0.5, |
||||
f: 1 |
||||
}] |
||||
] |
||||
} |
||||
] |
||||
), |
||||
'R': generateFontData( |
||||
634, 232, 352, |
||||
-10, -10, -0.5, -0.5, |
||||
[{ |
||||
d: -1, |
||||
v: [ |
||||
['m', 0, 186, { |
||||
r: ROTATE_VERTICAL, |
||||
p: 1 |
||||
}], |
||||
['l', 139, 186, { |
||||
r: ROTATE_VERTICAL |
||||
}], |
||||
['b', 190.4, 186, 232, 144.4, 232, 93, { |
||||
r: ROTATE_HORIZONTAL |
||||
}], |
||||
['b', 232, 41.6, 190.4, 0, 139, 0, { |
||||
r: ROTATE_VERTICAL |
||||
}], |
||||
['l', 0, 0, { |
||||
r: ROTATE_HORIZONTAL, |
||||
f: 1 |
||||
}], |
||||
['l', 0, 352, { |
||||
y: 0, |
||||
f: 1 |
||||
}], |
||||
] |
||||
}, |
||||
{ |
||||
d: -1, |
||||
v: [ |
||||
['m', 139, 186, { |
||||
p: 1, |
||||
r: getR(139, 186, 232, 352), |
||||
}], |
||||
['l', 232, 352, { |
||||
x: 0.5, |
||||
y: 0.39, |
||||
f: 1 |
||||
}], |
||||
] |
||||
} |
||||
] |
||||
), |
||||
'S': generateFontData( |
||||
560, 224, 360, |
||||
0, 0, 0, 0, |
||||
JSON.parse(JSON.stringify(DATA_US)) |
||||
), |
||||
'T': generateFontData( |
||||
568, 232, 352, |
||||
0, 0, -0.5, -0.5, |
||||
[{ |
||||
d: -1, |
||||
v: [ |
||||
['m', 0, 0, { |
||||
x: 0, |
||||
r: ROTATE_VERTICAL |
||||
}], |
||||
['l', 232, 0, { |
||||
x: 0, |
||||
r: ROTATE_VERTICAL, |
||||
f: 1 |
||||
}], |
||||
] |
||||
}, |
||||
{ |
||||
d: -1, |
||||
v: [ |
||||
['m', 116, 0, { |
||||
r: ROTATE_HORIZONTAL, |
||||
p: 1 |
||||
}], |
||||
['l', 116, 352, { |
||||
y: 0, |
||||
r: ROTATE_HORIZONTAL, |
||||
f: 1 |
||||
}], |
||||
] |
||||
} |
||||
] |
||||
), |
||||
'U': generateFontData( |
||||
712, 250, 355, |
||||
0, 0, -0.5, -0.5, |
||||
JSON.parse(JSON.stringify(DATA_UU)) |
||||
), |
||||
'V': generateFontData( |
||||
650, 270, 352, |
||||
0, 0, 0, 0, |
||||
[{ |
||||
d: -1, |
||||
v: [ |
||||
['m', 0, 0, { |
||||
x: 0.6, |
||||
y: 0.1, |
||||
r: getR(0, 0, 135 - VERTEX_GAP2, 352), |
||||
}], |
||||
['l', 135 - VERTEX_GAP2, 352, { |
||||
r: getR(0, 0, 135 - VERTEX_GAP2, 352), |
||||
f: 1 |
||||
}], |
||||
['l', 135 + VERTEX_GAP2, 352, { |
||||
r: getR(135 + VERTEX_GAP2, 352, 270, 0), |
||||
f: 1, |
||||
v: 1 |
||||
}], |
||||
['l', 270, 0, { |
||||
x: 0.6, |
||||
y: 0.1, |
||||
f: 1 |
||||
}], |
||||
] |
||||
}] |
||||
), |
||||
'W': generateFontData( |
||||
894, 390, 352, |
||||
0, 0, 0, 0, |
||||
[{ |
||||
d: -1, |
||||
v: [ |
||||
['m', 0, 0, { |
||||
x: 0.6, |
||||
y: 0.05, |
||||
r: getR(0, 0, 86 - VERTEX_GAP2, 352), |
||||
}], |
||||
['l', 86 - VERTEX_GAP2, 352, { |
||||
r: getR(0, 0, 86 - VERTEX_GAP2, 352), |
||||
f: 1 |
||||
}], |
||||
['l', 86 + VERTEX_GAP2, 352, { |
||||
r: getR(86 + VERTEX_GAP2, 352, 195 - VERTEX_GAP2, 0), |
||||
f: 1, |
||||
v: 1 |
||||
}], |
||||
['l', 195 - VERTEX_GAP2, 0, { |
||||
r: getR(86 + VERTEX_GAP2, 352, 195 - VERTEX_GAP2, 0), |
||||
f: 1 |
||||
}], |
||||
['l', 195 + VERTEX_GAP2, 0, { |
||||
r: getR(195 + VERTEX_GAP2, 0, 304 - VERTEX_GAP2, 352), |
||||
f: 1, |
||||
v: 1 |
||||
}], |
||||
['l', 304 - VERTEX_GAP2, 352, { |
||||
r: getR(195 + VERTEX_GAP2, 0, 304 - VERTEX_GAP2, 352), |
||||
f: 1 |
||||
}], |
||||
['l', 304 + VERTEX_GAP2, 352, { |
||||
r: getR(304 + VERTEX_GAP2, 352, 390, 0), |
||||
f: 1, |
||||
v: 1 |
||||
}], |
||||
['l', 390, 0, { |
||||
x: 0.6, |
||||
y: 0.05, |
||||
f: 1 |
||||
}], |
||||
] |
||||
}] |
||||
), |
||||
'X': generateFontData( |
||||
660, 270, 352, |
||||
0, 0, 0, -7, |
||||
[{ |
||||
d: -1, |
||||
v: [ |
||||
['m', 10, 0, { |
||||
x: 0.5, |
||||
y: 0.3, |
||||
r: getR(10, 0, 270, 352), |
||||
}], |
||||
['l', 270, 352, { |
||||
x: 0.5, |
||||
y: 0.5, |
||||
f: 1 |
||||
}] |
||||
] |
||||
}, |
||||
{ |
||||
d: -1, |
||||
v: [ |
||||
['m', 260, 0, { |
||||
x: 0.5, |
||||
y: 0.3, |
||||
r: getR(260, 0, 0, 352), |
||||
}], |
||||
['l', 0, 352, { |
||||
x: 0.5, |
||||
y: 0.5, |
||||
f: 1 |
||||
}] |
||||
] |
||||
} |
||||
] |
||||
), |
||||
'Y': generateFontData( |
||||
673, 270, 352, |
||||
0, 0, 0, 0, |
||||
JSON.parse(JSON.stringify(DATA_UY)) |
||||
), |
||||
'Z': generateFontData( |
||||
558, 232, 352, |
||||
0, -5, 0, 0, |
||||
[{ |
||||
d: -1, |
||||
v: [ |
||||
['m', 8, 0, { |
||||
x: 0, |
||||
r: ROTATE_VERTICAL |
||||
}], |
||||
['l', 224, 0, { |
||||
r: ROTATE_VERTICAL, |
||||
f: 1 |
||||
}], |
||||
['l', 224, 0 + VERTEX_GAP, { |
||||
r: ROTATE_HORIZONTAL, |
||||
p: 1, |
||||
v: 1 |
||||
}], |
||||
['l', 0, 352 - VERTEX_GAP, { |
||||
r: ROTATE_HORIZONTAL, |
||||
p: 1 |
||||
}], |
||||
['l', 0, 352, { |
||||
r: ROTATE_VERTICAL, |
||||
f: 1, |
||||
v: 1 |
||||
}], |
||||
['l', 232, 352, { |
||||
x: 0, |
||||
r: ROTATE_VERTICAL, |
||||
f: 1 |
||||
}] |
||||
] |
||||
}] |
||||
) |
||||
}; |
||||
@ -1,101 +0,0 @@
@@ -1,101 +0,0 @@
|
||||
import { |
||||
Vector |
||||
} from '../core/vector.js'; |
||||
import { |
||||
bezierTangent |
||||
} from '../core/paths.js'; |
||||
|
||||
export const ROTATE_HORIZONTAL = 180 * (Math.PI / 180); |
||||
export const ROTATE_VERTICAL = 90 * (Math.PI / 180); |
||||
export const ROTATE_NONE = -100; |
||||
export const VERTEX_GAP = 3; |
||||
export const VERTEX_GAP2 = VERTEX_GAP / 2; |
||||
export const TOFU = 'tofu'; |
||||
const FONT_HEIGHT = 824; |
||||
|
||||
export function generateFontData(w, fw, fh, x1, x2, y1, y2, path) { |
||||
const arr = []; |
||||
const total = path.length; |
||||
let i; |
||||
for (i = 0; i < total; i++) { |
||||
arr.push({ |
||||
d: path[i].d, |
||||
v: setCenter(path[i].v, fw, fh) |
||||
}); |
||||
} |
||||
|
||||
return { |
||||
rect: { |
||||
w: w, |
||||
h: FONT_HEIGHT, |
||||
fw: fw, |
||||
fh: fh |
||||
}, |
||||
ratio: { |
||||
x1: x1, |
||||
x2: x2, |
||||
y1: y1, |
||||
y2: y2, |
||||
}, |
||||
p: arr, |
||||
clone: () => { |
||||
const arr2 = []; |
||||
for (let i = 0; i < arr.length; i++) { |
||||
arr2[i] = { |
||||
d: arr[i].d, |
||||
v: arr[i].v |
||||
}; |
||||
} |
||||
const v = { |
||||
rect: { |
||||
w: w, |
||||
h: FONT_HEIGHT, |
||||
fw: fw, |
||||
fh: fh |
||||
}, |
||||
ratio: { |
||||
x1: x1, |
||||
x2: x2, |
||||
y1: y1, |
||||
y2: y2, |
||||
}, |
||||
p: arr2, |
||||
}; |
||||
return v; |
||||
} |
||||
}; |
||||
} |
||||
|
||||
function setCenter(arr, fw, fh) { |
||||
const total = arr.length; |
||||
const cx = fw / 2; |
||||
const cy = fh / 2; |
||||
let mp, i, ct = []; |
||||
|
||||
for (i = 0; i < total; i++) { |
||||
mp = arr[i]; |
||||
mp[1] -= cx; |
||||
mp[2] -= cy; |
||||
if (mp[0] == 'b') { |
||||
mp[3] -= cx; |
||||
mp[4] -= cy; |
||||
mp[5] -= cx; |
||||
mp[6] -= cy; |
||||
} |
||||
ct.push(new Vector(mp)); |
||||
} |
||||
|
||||
return ct; |
||||
} |
||||
|
||||
export function getR(x1, y1, x2, y2) { |
||||
const x = x1 - x2; |
||||
const y = y1 - y2; |
||||
return -Math.atan2(x, y); |
||||
} |
||||
|
||||
export function getCurveR(x1, y1, x2, y2, x3, y3, x4, y4, t) { |
||||
const x = bezierTangent(x1, x2, x3, x4, t); |
||||
const y = bezierTangent(y1, y2, y3, y4, t); |
||||
return -Math.atan2(x, y); |
||||
} |
||||
@ -1,2 +0,0 @@
@@ -1,2 +0,0 @@
|
||||
const LeonSans = require('./leonsans').default; |
||||
module.exports = LeonSans; |
||||
@ -1,528 +0,0 @@
@@ -1,528 +0,0 @@
|
||||
/*! |
||||
* VERSION: 1.6.3 |
||||
* DATE: 2019-09-13 |
||||
* https://leon-sans.com
|
||||
* |
||||
* @license Copyright (c) 2019, Jongmin Kim. All rights reserved. |
||||
**/ |
||||
import { |
||||
Dispatcher |
||||
} from './core/dispatcher.js'; |
||||
import { |
||||
MIN_FONT_WEIGHT, |
||||
MAX_FONT_WEIGHT, |
||||
shuffle |
||||
} from './core/util.js'; |
||||
import { |
||||
Lines |
||||
} from './draw/canvas/lines.js'; |
||||
import { |
||||
Points |
||||
} from './draw/canvas/points.js'; |
||||
import { |
||||
Grids |
||||
} from './draw/canvas/grids.js'; |
||||
import { |
||||
Wave |
||||
} from './draw/canvas/wave.js'; |
||||
import { |
||||
Pattern |
||||
} from './draw/canvas/pattern.js'; |
||||
import { |
||||
Color |
||||
} from './draw/canvas/color.js'; |
||||
import { |
||||
Colorful |
||||
} from './draw/canvas/colorful.js'; |
||||
import { |
||||
PixiLines |
||||
} from './draw/pixi/lines.js'; |
||||
import { |
||||
PixiColor |
||||
} from './draw/pixi/color.js'; |
||||
import { |
||||
Model |
||||
} from './core/model.js'; |
||||
|
||||
|
||||
export default class LeonSans extends Dispatcher { |
||||
constructor({ |
||||
text = '', |
||||
size = 500, |
||||
weight = MIN_FONT_WEIGHT, |
||||
color = ['#000000'], |
||||
colorful = ['#c5d73f', '#9d529c', '#49a9db', '#fec330', '#5eb96e', '#fc5356', '#f38f31'], |
||||
tracking = 0, |
||||
leading = 0, |
||||
align = 'left', |
||||
pathGap = 0.5, |
||||
amplitude = 0.5, |
||||
width = 0, |
||||
breakWord = false, |
||||
fps = 30, |
||||
isPath = false, |
||||
isWave = false, |
||||
} = {}) { |
||||
super(); |
||||
|
||||
this.size_ = size; |
||||
this.weight_ = weight; |
||||
this.color_ = color; |
||||
this.colorful_ = shuffle(colorful); |
||||
this.tracking_ = tracking; |
||||
this.leading_ = leading; |
||||
this.pathGap_ = pathGap; |
||||
this.amplitude_ = amplitude; |
||||
this.width_ = width; |
||||
this.breakWord_ = breakWord; |
||||
this.fps_ = fps; |
||||
this.fpsTime_ = 1000 / this.fps_; |
||||
this.isPath_ = isPath; |
||||
this.isWave_ = isWave; |
||||
|
||||
this.model = new Model(); |
||||
|
||||
this.str_ = null; |
||||
|
||||
this.time_ = null; |
||||
this.isFps_ = false; |
||||
this.isForceRander_ = false; |
||||
|
||||
this.updateID_ = 0; |
||||
this.dPathsID_ = null; |
||||
this.pPathsID_ = null; |
||||
this.wPathsID_ = null; |
||||
this.guideID_ = null; |
||||
|
||||
this.text = text; |
||||
|
||||
this.model.align = align; |
||||
} |
||||
|
||||
on(event, callback) { |
||||
super.on(event, callback); |
||||
this.update(); |
||||
} |
||||
|
||||
off(event, callback) { |
||||
super.off(event, callback); |
||||
} |
||||
|
||||
get text() { |
||||
return this.str_; |
||||
} |
||||
|
||||
set text(str) { |
||||
if (this.str_ == str) return; |
||||
this.str_ = str; |
||||
this.update(); |
||||
} |
||||
|
||||
get size() { |
||||
return this.size_; |
||||
} |
||||
|
||||
set size(v) { |
||||
if (this.size_ == v) return; |
||||
this.size_ = v; |
||||
this.update(); |
||||
this.isForceRander_ = true; |
||||
} |
||||
|
||||
get weight() { |
||||
return this.weight_; |
||||
} |
||||
|
||||
set weight(v) { |
||||
if (v < MIN_FONT_WEIGHT) { |
||||
v = MIN_FONT_WEIGHT; |
||||
} else if (v > MAX_FONT_WEIGHT) { |
||||
v = MAX_FONT_WEIGHT; |
||||
} |
||||
if (this.weight_ == v) return; |
||||
this.weight_ = v; |
||||
this.update(); |
||||
this.isForceRander_ = true; |
||||
} |
||||
|
||||
get color() { |
||||
return this.color_; |
||||
} |
||||
|
||||
set color(v) { |
||||
if (this.color_ == v) return; |
||||
this.color_ = v; |
||||
} |
||||
|
||||
get tracking() { |
||||
return this.tracking_; |
||||
} |
||||
|
||||
set tracking(v) { |
||||
if (this.tracking_ == v) return; |
||||
this.tracking_ = v; |
||||
this.update(); |
||||
this.isForceRander_ = true; |
||||
} |
||||
|
||||
get leading() { |
||||
return this.leading_; |
||||
} |
||||
|
||||
set leading(v) { |
||||
if (this.leading_ == v) return; |
||||
this.leading_ = v; |
||||
this.update(); |
||||
this.isForceRander_ = true; |
||||
} |
||||
|
||||
get align() { |
||||
return this.model.align; |
||||
} |
||||
|
||||
set align(v) { |
||||
if (this.model.align != v) { |
||||
this.model.align = v; |
||||
this.updateID_++; |
||||
this.updateSignal(); |
||||
} |
||||
} |
||||
|
||||
get pathGap() { |
||||
return this.pathGap_; |
||||
} |
||||
|
||||
set pathGap(v) { |
||||
if (this.pathGap_ != v) { |
||||
this.pathGap_ = v; |
||||
this.updatePatternPaths(true); |
||||
this.updateWavePaths(true); |
||||
this.isForceRander_ = true; |
||||
} |
||||
} |
||||
|
||||
get amplitude() { |
||||
return this.amplitude_; |
||||
} |
||||
|
||||
set amplitude(v) { |
||||
this.amplitude_ = v; |
||||
} |
||||
|
||||
get rect() { |
||||
return this.model.rect; |
||||
} |
||||
|
||||
set maxWidth(v) { |
||||
if (this.width_ == v) return; |
||||
this.width_ = v; |
||||
this.update(); |
||||
} |
||||
|
||||
get maxWidth() { |
||||
return this.width_; |
||||
} |
||||
|
||||
set breakWord(v) { |
||||
if (this.breakWord_ == v) return; |
||||
this.breakWord_ = v; |
||||
this.update(); |
||||
} |
||||
|
||||
get breakWord() { |
||||
return this.breakWord_; |
||||
} |
||||
|
||||
get isPath() { |
||||
return this.isPath_; |
||||
} |
||||
|
||||
set isPath(v) { |
||||
this.isPath_ = v; |
||||
this.updatePatternPaths(true); |
||||
} |
||||
|
||||
get isWave() { |
||||
return this.isWave_; |
||||
} |
||||
|
||||
set isWave(v) { |
||||
this.isWave_ = v; |
||||
this.updateWavePaths(true); |
||||
} |
||||
|
||||
get fps() { |
||||
return this.fps_; |
||||
} |
||||
|
||||
set fps(v) { |
||||
this.fps_ = v; |
||||
this.fpsTime_ = 1000 / this.fps_; |
||||
} |
||||
|
||||
get lineWidth() { |
||||
return this.model.lineWidth; |
||||
} |
||||
|
||||
get scale() { |
||||
return this.model.scale; |
||||
} |
||||
|
||||
get drawing() { |
||||
return this.model.drawing; |
||||
} |
||||
|
||||
get data() { |
||||
return this.model.data; |
||||
} |
||||
|
||||
get paths() { |
||||
return this.model.paths; |
||||
} |
||||
|
||||
get drawingPaths() { |
||||
return this.model.drawingPaths; |
||||
} |
||||
|
||||
get wavePaths() { |
||||
return this.model.wavePaths; |
||||
} |
||||
|
||||
position(x = 0, y = 0) { |
||||
if (this.model.position(x, y)) { |
||||
this.updateID_++; |
||||
this.updateSignal(); |
||||
} |
||||
} |
||||
|
||||
update() { |
||||
this.updateID_++; |
||||
|
||||
this.model.update( |
||||
this.str_, |
||||
this.width_, |
||||
this.breakWord_, |
||||
this.weight_, |
||||
this.size_, |
||||
this.tracking_, |
||||
this.leading_ |
||||
); |
||||
|
||||
if (this.isPath_ || this.isWave_) { |
||||
this.updatePatternPaths(); |
||||
this.updateWavePaths(); |
||||
} else { |
||||
this.updateSignal(); |
||||
} |
||||
} |
||||
|
||||
updateGuide() { |
||||
if (this.guideID_ != this.updateID_) { |
||||
this.guideID_ = this.updateID_; |
||||
this.model.updateGuide(); |
||||
} |
||||
} |
||||
|
||||
/** |
||||
* Update paths for drawing in WebGL (PIXI.js). It's very expensive, only call when it needs. |
||||
*/ |
||||
updateDrawingPaths() { |
||||
if (this.dPathsID_ != this.updateID_) { |
||||
this.dPathsID_ = this.updateID_; |
||||
this.model.updateDrawingPaths(); |
||||
} |
||||
} |
||||
|
||||
/** |
||||
* Update paths for pattern |
||||
* @param {boolean} force - Force execution |
||||
*/ |
||||
updatePatternPaths(force) { |
||||
if (this.isPath_ && (force || this.pPathsID_ != this.updateID_)) { |
||||
this.pPathsID_ = this.updateID_; |
||||
this.model.updatePatternPaths(this.pathGap_); |
||||
this.isForceRander_ = true; |
||||
this.updateSignal(); |
||||
} |
||||
} |
||||
|
||||
/** |
||||
* Update paths for wave effect |
||||
* @param {boolean} force - Force execution |
||||
*/ |
||||
updateWavePaths(force) { |
||||
if (this.isWave_ && (force || this.wPathsID_ != this.updateID_)) { |
||||
this.wPathsID_ = this.updateID_; |
||||
this.model.updateWavePaths(this.pathGap_); |
||||
this.isForceRander_ = true; |
||||
this.updateSignal(); |
||||
} |
||||
} |
||||
|
||||
updateSignal() { |
||||
this.model.updateLinesForRect(); |
||||
this.model.updatePathsForRect(); |
||||
this.dispatch('update', this.model); |
||||
} |
||||
|
||||
reset() { |
||||
this.size_ = 500; |
||||
this.weight_ = MIN_FONT_WEIGHT; |
||||
this.color_ = ['#000000']; |
||||
this.tracking_ = 0; |
||||
this.leading_ = 0; |
||||
this.pathGap_ = 0.5; |
||||
this.amplitude_ = 0.5; |
||||
this.width_ = 0; |
||||
this.breakWord_ = false; |
||||
this.fps_ = 30; |
||||
this.fpsTime_ = 1000 / this.fps_; |
||||
this.isPath_ = false; |
||||
this.isWave_ = false; |
||||
|
||||
this.str_ = null; |
||||
|
||||
this.time_ = null; |
||||
this.isFps_ = false; |
||||
this.isForceRander_ = false; |
||||
|
||||
this.updateID_ = 0; |
||||
this.dPathsID_ = null; |
||||
this.pPathsID_ = null; |
||||
this.wPathsID_ = null; |
||||
this.guideID_ = null; |
||||
|
||||
this.model.reset(); |
||||
} |
||||
|
||||
dispose() { |
||||
this.reset(); |
||||
this.model = null; |
||||
} |
||||
|
||||
/** |
||||
* Draw text in WebGL with PIXI.js |
||||
* @param {PIXI.Graphics} graphics |
||||
*/ |
||||
drawPixi(graphics) { |
||||
const total = this.model.data.length; |
||||
let i, d, color; |
||||
for (i = 0; i < total; i++) { |
||||
d = this.model.data[i]; |
||||
color = PixiColor(i, d, this.color_); |
||||
PixiLines(graphics, d, this.lineWidth, color); |
||||
} |
||||
} |
||||
|
||||
/** |
||||
* Draw text in the Canvas element. |
||||
* @param {CanvasRenderingContext2D} ctx |
||||
*/ |
||||
draw(ctx) { |
||||
ctx.lineWidth = this.lineWidth; |
||||
const total = this.model.data.length; |
||||
let i, d; |
||||
for (i = 0; i < total; i++) { |
||||
d = this.model.data[i]; |
||||
Color(ctx, i, d, this.color_); |
||||
Lines(ctx, d); |
||||
} |
||||
} |
||||
|
||||
/** |
||||
* Draw the colorful effect. |
||||
* @param {CanvasRenderingContext2D} ctx |
||||
*/ |
||||
drawColorful(ctx) { |
||||
ctx.lineWidth = this.lineWidth; |
||||
Colorful(ctx, this.model, this.colorful_); |
||||
} |
||||
|
||||
/** |
||||
* Draw the wave effect. |
||||
* @param {CanvasRenderingContext2D} ctx |
||||
* @param {DOMHighResTimeStamp} t time stemp from requestAnimationFrame() |
||||
*/ |
||||
wave(ctx, t) { |
||||
ctx.lineWidth = this.lineWidth; |
||||
|
||||
if (t) { |
||||
if (!this.time_) this.time_ = t; |
||||
const p = t - this.time_; |
||||
if (p > this.fpsTime_ || this.isForceRander_) { |
||||
this.time_ = t; |
||||
this.isFps_ = true; |
||||
} else { |
||||
this.isFps_ = false; |
||||
} |
||||
} |
||||
this.isForceRander_ = false; |
||||
|
||||
const total = this.model.data.length; |
||||
let i, d; |
||||
for (i = 0; i < total; i++) { |
||||
d = this.model.data[i]; |
||||
Color(ctx, i, d, this.color_); |
||||
Wave(ctx, d, this.model.scale, this.amplitude_, this.weight_, this.isFps_); |
||||
} |
||||
} |
||||
|
||||
/** |
||||
* Draw rectangle shapes at each path point. |
||||
* @param {CanvasRenderingContext2D} ctx |
||||
* @param {number} w pattern width |
||||
* @param {number} h pattern height |
||||
*/ |
||||
pattern(ctx, w, h) { |
||||
const tw = w * this.model.scale; |
||||
const th = h * this.model.scale; |
||||
|
||||
const total = this.model.data.length; |
||||
let i, d; |
||||
for (i = 0; i < total; i++) { |
||||
d = this.model.data[i]; |
||||
Pattern(ctx, d, tw, th); |
||||
} |
||||
} |
||||
|
||||
/** |
||||
* Draw grid for each type. |
||||
* @param {CanvasRenderingContext2D} ctx |
||||
*/ |
||||
grid(ctx) { |
||||
this.updateGuide(); |
||||
|
||||
const total = this.model.data.length; |
||||
let i, d; |
||||
for (i = 0; i < total; i++) { |
||||
d = this.model.data[i]; |
||||
Grids(ctx, d); |
||||
} |
||||
} |
||||
|
||||
/** |
||||
* Draw circles at each drawing point and lines for each type. |
||||
* @param {CanvasRenderingContext2D} ctx |
||||
*/ |
||||
point(ctx) { |
||||
const total = this.model.data.length; |
||||
let i, d; |
||||
for (i = 0; i < total; i++) { |
||||
d = this.model.data[i]; |
||||
Points(ctx, d); |
||||
} |
||||
} |
||||
|
||||
/** |
||||
* Draw outline box for the text. |
||||
* @param {CanvasRenderingContext2D} ctx |
||||
* @private |
||||
*/ |
||||
box(ctx) { |
||||
ctx.lineWidth = 1; |
||||
ctx.beginPath(); |
||||
ctx.strokeStyle = "#0b90dc"; |
||||
ctx.rect(this.model.rect.x, this.model.rect.y, this.model.rect.w, this.model.rect.h); |
||||
ctx.stroke(); |
||||
} |
||||
} |
||||
Loading…
Reference in new issue