gpt4 book ai didi

javascript - 如何使用fabricjs

转载 作者:行者123 更新时间:2023-12-03 12:12:36 24 4
gpt4 key购买 nike

嘿我对 Canvas 非常陌生,我正在尝试学习如何使用 Fabricjs,但我什至无法让非常基本的示例工作,这非常令人沮丧。我下载了fabricjs-1.4.8.zip文件,我使用的唯一文件是dist/fabric.min.js,这是我的 html 代码

<html>
<head>
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="fabric.js-1.4.8/dist/fabric.js"></script>
<script tye="text/javascript" src="test.js"></script>
</head>
<body>
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>
</body>
</html>

首先,我没有包含 jquery,但是在看到很多示例后,看起来这可以解决问题,但它不适合我,也许我包含了错误的版本?这是我的 test.js 文件

  var canvas = new fabric.Canvas('myCanvas');

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

我可以看到 Canvas 元素的边框,但内部没有矩形。有人能看到我做错了什么吗?谢谢

最佳答案

看起来你的 Canvas 是 200 x 100。但是你试图在距离顶部 100 像素的地方绘制一个矩形。您的代码可能有效,但矩形不会显示,因为它是在 Canvas 底部绘制的。尝试更改此行

top: 100

对此:

top: 0

更新

如果一开始不起作用,可能是因为在脚本运行之前 DOM 尚未加载。您可以将代码放入 jQuery 文档就绪监听器中,如下所示:

$(document).ready(function(){
//Your code here...
});

这将确保在脚本触发时 Canvas 元素实际上已准备好可供使用。祝你好运!

关于javascript - 如何使用fabricjs,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24889806/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com