Ткань JS ничего не делает на холстеHtml

Программисты Html
Ответить
Anonymous
 Ткань JS ничего не делает на холсте

Сообщение Anonymous »

Я попытался использовать библиотеку Fabric.js, чтобы нарисовать на холсте HTML5, но она ничего не делает. Это угловой проект 19. < /P>
этого кода должно быть достаточно, чтобы использовать ткань?
ngAfterViewInit() {
this.log.debug(`[FractalComponent] ngAfterViewInit`)

const width = (this.fractalCanvasContainer.nativeElement as HTMLDivElement).clientWidth;
const height = (this.fractalCanvasContainer.nativeElement as HTMLDivElement).clientHeight;

console.log(`[FractalComponent] fractalCanvas ${JSON.stringify(this.fractalCanvas)}`)

this.canvas = new Canvas(this.fractalCanvas.nativeElement, {
width: width,
height: height,
backgroundColor: '#000000',
selection: false,
preserveObjectStacking: true,
isDrawingMode: true,
});
const text = new FabricText('Fabric.JS', {
left: 0,
top: 0,
cornerStrokeColor: 'blue',
cornerColor: 'lightblue',
cornerStyle: 'circle',
padding: 10,
transparentCorners: false,
cornerDashArray: [2, 2],
borderColor: 'orange',
borderDashArray: [3, 1, 3],
borderScaleFactor: 2,
});

const text1 = new FabricText('Hello Fabric', {
left: 50,
top: 30,
fontSize: 24,
fill: '#336699'
});
this.canvas.add(text1);

this.canvas.add(text);
this.canvas.centerObject(text);
this.canvas.setActiveObject(text);

console.log(`[FractalComponent] ${JSON.stringify(this.canvas)}`)
}
< /code>
Но цвет фона не установлен, текст не добавлен. Ничего не работает. /> Редактировать: после удаления фона стиля из CSS результат выглядит так:

ther />
itsstatic.net/65nk5 проблема Firefox. В Chrome теперь выглядит нормально: < /p>
Firefox: 141.0.3 (64-бит)
chromium: версия 139.0.7258.66 (официальная сборка) для Mint Linux (64-битный) < /p>


Подробнее здесь: https://stackoverflow.com/questions/797 ... the-canvas
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «Html»