Question

我已经设置了一个合理的Django网站来测试和玩游戏，但我有一个糟糕的时间，包括fabric.js

最终我想使用fabric.js从数据库中获取小图像并将它们显示在画布上，但我离题了。

我遇到的问题是我无法使用fabric.js在我的html中使用本地png图像 - 我的意思是，包含了结构（因为我可以使用结构做非常基本的技巧，比如创建矩形），教程并不清楚包括本地图像。

这是我糟糕的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
        <title>This is using render</title>
    {% load staticfiles %}
    <script scr="{% static "js/fabric.js" %}" type="text/javascript"></script>
</head>


<body>


<script type="text/javascript">
var canvas = new fabric.Canvas('c');
canvas.setHeight(480);
canvas.setWidth(640);
var imgElement = fabric.Image.fromURL('../static/images/pitch.png', function(oImg) {
  canvas.add(oImg);
});

var imgInstance = new fabric.Image(imgElement, {
  left: 100,
  top: 100,
  angle: 90,
  opacity: 0.85
});
canvas.add(imgInstance);

</script>


</body>
</html>

可能会做一些noobish，所以提前道歉。

Answer 1

在HTML 中添加图片元素（并通过ID获取），而不是使用fabric.Image.fromURL()

加载它

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>This is using render</title> {% load staticfiles %}
    <script src="{% static "js/fabric.js" %}" type="text/javascript"></script>
</head>

<body>
    <canvas id="c"></canvas>
    <img id="imgElement" src="../static/images/pitch.png" hidden>

    <script type="text/javascript">
        var canvas = new fabric.Canvas('c');
        canvas.setHeight(480);
        canvas.setWidth(640);

        var imgInstance = new fabric.Image(imgElement, {
            left: 100,
            top: 100,
            angle: 90,
            opacity: 0.85
        });
        canvas.add(imgInstance);
    </script>
</body>

</html>

Django模板标签+使用fabric.js

1 个答案: