Как изменить размер промокательного холста?

По какой-то причине размер холста blotter.js нельзя изменить. Блоттер, кажется, по умолчанию генерирует холст с именем b-canvas? Но я не могу найти, откуда он берет ширину и высоту? И я не могу установить новую ширину и размер с помощью .style в js. Помощь?!

Я перепробовал все методы, которые смог найти. Я также пытался установить Overflow: visible для родителя (текста) в js и в файле css, но рендеринг все еще не работает с границами холста. Что я делаю не так?


var text = new Blotter.Text("Hello", {
        weight: 800,
        size: 80,
        fill: 'lightgray',
        paddingLeft: 80,
        paddingRight: 80,
        paddingBottom: 80,
        paddingTop: 80
    });
    /*
     * https://blotter.js.org
     */
    var blotter = new Blotter(material, {
        texts: text
    });
    var canvas = blotter.forText(text).domElement;
    canvas.style.visibility = 'visible!important';
    canvas.style = "width: 100vh !important";
    canvas.style = "height: 100vw !important";
    canvas.style = "z-index: -3 !important";
    container.appendChild(canvas);

javascript canvas css blotter
person L MXIII    schedule 20.09.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете просто обернуть его внутри div и изменить его размер. Размер холста, вероятно, рассчитывается на основе размера шрифта и равен размеру самого рисунка.

<div id="wrap">
    <canvas></canvas>
</div>

<style>
    #wrap canvas {
        width: 50px !important
    } 
</style>

Взгляните на сам веб-сайт «Blotter.js» и осмотрите его логотип, убедитесь, что он имеет тот же код и как вы можете изменить его размер.

person Sergi    schedule 20.09.2019
comment
В моем случае холст присоединяется к родительскому div, который я сделал для текста. Кажется, это не влияет на размер холста, если я по какой-то причине изменю CSS в этом div? - person L MXIII; 20.09.2019
comment
Вы используете !important? Если вы скопируете эту структуру, так и должно быть, иначе проблема в другом. Я бы пошел на страницу Blotter.js, как я уже сказал, и взглянул на их графику, вы можете легко изменить их размер, изменив размер его контейнеров, скопировав аналогичную структуру HTML. - person Sergi; 20.09.2019
comment
@LMXIII Кто-нибудь из вас знает, как пропорционально масштабировать холст, чтобы он не растягивал текст? - person oldboy; 22.09.2020