🤖 Merge PR #46889 fix: opentype.js by @keroxp

* fix: opentype.js

* fix

* merge
This commit is contained in:
Yusuke Sakurai 2020-09-08 09:56:01 +09:00 committed by GitHub
parent d68f0b1f84
commit bded65db49
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 51 additions and 24 deletions

View File

@ -191,7 +191,7 @@ export interface Field {
******************************************/
export class Glyph {
private index;
index: number;
private xMin;
private xMax;
private yMin;
@ -317,9 +317,9 @@ export interface Point {
******************************************/
export class Path {
private fill;
private stroke;
private strokeWidth;
fill: string | null;
stroke: string | null;
strokeWidth: number;
constructor();
bezierCurveTo(
x1: number,
@ -353,15 +353,36 @@ export class Path {
unitsPerEm: number;
}
export interface PathCommand {
type: string;
x?: number;
y?: number;
x1?: number;
y1?: number;
x2?: number;
y2?: number;
}
export type PathCommand =
| {
type: "M";
x: number;
y: number;
}
| {
type: "L";
x: number;
y: number;
}
| {
type: "C";
x1: number;
y1: number;
x2: number;
y2: number;
x: number;
y: number;
}
| {
type: "Q";
x1: number;
y1: number;
x: number;
y: number;
}
| {
type: "Z";
};
/******************************************
* UTIL CLASSES

View File

@ -1,9 +1,12 @@
import { load, loadSync, parse, Glyph, Font, Path, PathCommand } from "opentype.js";
const x = 0;
const y = 0;
const fontSize = 72;
const ctx: CanvasRenderingContext2D = (document.getElementById('canvas') as HTMLCanvasElement).getContext('2d')!;
const canvas: HTMLCanvasElement = document.createElement("canvas");
const ctx = canvas.getContext("2d")!;
opentype.load('fonts/Roboto-Black.ttf', (err, font) => {
load('fonts/Roboto-Black.ttf', (err, font) => {
if (err) {
alert('Font could not be loaded: ' + err);
} else {
@ -12,20 +15,19 @@ opentype.load('fonts/Roboto-Black.ttf', (err, font) => {
}
});
let myBuffer = new ArrayBuffer(1024);
let font = opentype.parse(myBuffer);
font = opentype.loadSync('fonts/Roboto-Black.ttf', { lowMemory: true});
let font = parse(new ArrayBuffer(0));
font = loadSync('fonts/Roboto-Black.ttf', {lowMemory: true });
const notdefGlyph = new opentype.Glyph({
const notdefGlyph = new Glyph({
name: '.notdef',
unicode: 0,
advanceWidth: 650,
path: new opentype.Path()
path: new Path()
});
const aPath = new opentype.Path();
const aPath = new Path();
// more drawing instructions...
const aGlyph = new opentype.Glyph({
const aGlyph = new Glyph({
name: 'A',
unicode: 65,
advanceWidth: 650,
@ -33,7 +35,7 @@ const aGlyph = new opentype.Glyph({
});
const glyphs = [notdefGlyph, aGlyph];
const fontGenerated = new opentype.Font({
const fontGenerated = new Font({
familyName: 'OpenTypeSans',
styleName: 'Medium',
unitsPerEm: 1000,
@ -118,9 +120,13 @@ aPath.draw(ctx);
const pathData: string = aPath.toPathData(7);
const pathSvg: string = aPath.toSVG(7);
const pathDom: SVGPathElement = aPath.toDOMElement(7);
const pathCommands: PathCommand[] = aPath.commands;
const pathFill: string | null = aPath.fill;
const pathStroke: string | null = aPath.stroke;
const pathStrokeWidth: number = aPath.strokeWidth;
async function make() {
const font = await opentype.load('fonts/Roboto-Black.ttf');
const font = await load('fonts/Roboto-Black.ttf');
const path = font.getPath('Hello, World!', 0, 150, 72);
console.log(path);
}