通过 Fabric JS 在 Wordpress 中的 Canvas 上添加基本红色方块

Question

我用 Bootstrap 创建了一个 Wordpress 主题，并且一直在尝试将教程中的基本红色方块加载到我的 html 中的 canvas。

    // create a wrapper around native canvas element (with id="c")
var canvas = new fabric.Canvas('c');

// create a rectangle object
var rect = new fabric.Rect({
  left: 100,
  top: 100,
  fill: 'red',
  width: 20,
  height: 20
});

// "add" rectangle onto canvas
canvas.add(rect);

脚本已加载，当我 console.log canvas 对象时，它输出 canvas 对象及其属性。但是，canvas 上不会出现任何内容。我已确保我的 ID 匹配并且我的 canvas 在包装器之间并且设置了 1000 / 1000 px space，它是居中的。

下面是我的模板代码

 <div class="container">
    <div class="row">
        <div class="col-lg-12">
            <h1 class="test-header">Test Your Ad Here!</h1>
        </div>
    </div>
 </div>

 <div>
    <canvas id="c" width="1000" height="1000"> </canvas>
 </div>

 <hr/>
<?php get_footer(); ?>

谢谢！

Answer 1

不确定为什么它不呈现，但要尝试的一件事是调用 canvas.renderAll() 以确保 fanric 知道是时候将它的数据呈现到 canvas。

通过 Fabric JS 在 Wordpress 中的 Canvas 上添加基本红色方块

Adding Basic Red Square On Canvas In Wordpress Via Fabric JS

html

wordpress

canvas

fabricjs