javascript - 如何更改吸墨纸画布尺寸？

Question

出于某种原因，blotter.js 画布大小不可更改。Blotter 似乎默认会生成一个名为 b-canvas 的画布？但我找不到它从哪里得到宽度和高度？而且我无法在 js 中通过 .style 设置新的宽度和大小。帮助？！

我已经尝试了所有我能找到的技术。我还尝试在 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);

Answer 1

您可以简单地将其包装在 div 中并调整其大小。画布大小可能是根据字体大小计算的，它与绘图本身一样大。

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

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

查看“Blotter.js”网站本身并检查其徽标，看看它是否具有相同的代码以及如何调整它的大小。