Холст теряет стиль, когда я создаю объект холста Fabric.js

У меня есть объект Canvas с верхним и левым атрибутами, определенными с помощью предыдущей функции JavaScript, но когда я создаю объект Canvas ткани

  var fabricCanvas= new fabric.Canvas('mycanvas');

мой HTML Canvas имеет верхний и левый атрибуты, установленные на 0.

Я попытался установить верхний и левый атрибуты после создания объекта холста ткани с помощью скрипта, но когда я это делаю, холст меняет положение, но функция ткани (функции выбора и перемещения) остается там, где холст был расположен ранее (где холст ткани имеет позиционировал)!

Что я могу сделать, чтобы разрешить этот конфликт? Есть ли способ сохранить равный холст?


javascript canvas html fabricjs
person JBerta93    schedule 13.02.2012    source источник

Ответы (3)


arrow_upward
3
arrow_downward

Когда вы создаете холст с помощью Fabric.js, он оборачивает его в div и добавляет второй <canvas> (используется для выбора объектов, отображаемых на первом холсте). Это объясняется на вики-странице Fabric. .js. Если вы хотите расположить свой холст, примените правила CSS к родительскому элементу div, который относится к классу «холст-контейнер».

person Laure Jonchery    schedule 07.09.2012
comment
Мне не удалось переопределить положение ткани на холсте. - person dsdsdsdsd; 26.02.2013
comment
класс canvas-container не является переопределяющим, он не применяет CSS к этому div. - person Piyush Dholariya; 23.05.2019
comment
@PiyushDholariya Я думаю, вы используете CSS в js или что-то, что касается CSS, на самом деле, я использовал ткань с vue.js и столкнулся с той же проблемой, но когда я переместил свое правило CSS canvas-container в глобальный файл, он работает - person Umair Ahmed; 19.01.2020

arrow_upward
0
arrow_downward

ответ из моего идентичного потока

применять

margin: 0 auto;

в класс = холст-контейнер

canvas-контейнер автоматически создается тканью.

см. скрипку

person dsdsdsdsd    schedule 26.02.2013
comment
класс canvas-container не переопределяет, он не применяет CSS к этому div - person Piyush Dholariya; 23.05.2019

arrow_upward
0
arrow_downward

Обратите внимание, что если вы используете какой-либо препроцессор css (для меня это была таблица стилей scss внутри Angular) — нацеливание на класс «холст-контейнер» внутри файла scss компонента не будет работать. Для меня обходным путем был общий файл css проекта.

person Maoritzio    schedule 17.02.2019