gpt4 book ai didi

javascript - 知道为什么矩形不会出现在我的 Fabricjs Canvas 中吗?

转载 作者:行者123 更新时间:2023-11-28 18:03:32 34 4
gpt4 key购买 nike

http://jsfiddle.net/a7ZSG/10/有指向 jsfiddle 的链接。

绿色 Canvas 中应该有一个红色矩形,但由于某种原因它不会出现,有人知道为什么吗?我试过在与 Canvas 有关的所有内容周围放置一个 window.onload,但我不起作用。

html:

<!doctype html>
<html lang="en" ;>

<head>
<meta charset="utf-8" />
<title>CustomCase</title>
<link rel="stylesheet" href="HeaderFooter.css">
<link rel="stylesheet" href="SkapaDesign.css">
<script src="Jquery.js"></script>
<script src="Fabric.js"></script>
<script src="Canvas.js"></script>
</head>

<body>
<div id="Wrapper">

<section id="Body">
<img id="UpperShadow" src=NeråtSkugga.png>
<div id="LeftColumn">
<div id="TextMode"></div>
<div id="CanvasContainer">
<canvas id="Canvas"></canvas>
</div>
<div id="LayerMode"></div>
<div id="IPhoneMode"></div>
</div>
<div id="RightColumn">
<div id="TextureMode"></div>
<div id="TextureFilter"></div>
<div id="TextureView">
<div id="TextureViewInside">
<div id="images">
<img src="FärgadePapper.png">
<img src="Hajar.png">
<img src="Labyrint.png">
<img src="Martini.png">
<img src="FärgadePapper.png">
<img src="Hajar.png">
<img src="Labyrint.png">
<img src="Martini.png">
<img src="FärgadePapper.png">
<img src="Hajar.png">
<img src="Labyrint.png">
<img src="Martini.png">
<img src="FärgadePapper.png">
</div>
</div>
</div>
</div>
<img id="LowerShadow" src=UppåtSkugga.png>
</section>
</div>
</body>

</html>

CSS:

#Body {
height: 675px;
}
/*--------------------------------Body--------------------------------*/
#TextMode, #TextureMode, #CanvasContainer, #Canvas, #LayerMode, #TextureFilter, #TextureView, #IPhoneMode {
float: left;
}
/*------------------------------Columns------------------------------*/
#LeftColumn {
float: left;
width: 355px;
margin: 20px 30px 0px 0px;
}
#RightColumn {
float: left;
width: 600px;
margin-top: 20px;
}
/*----------------------------Left Column----------------------------*/
#TextMode {
width: 340px;
height: 40px;
margin-left: 15px;
background: #848484;
}
#CanvasContainer {
width: 270px;
height: 519px;
margin-left: 15px;
background: black;
}
#Canvas {
overflow: hidden;
background: green;
width: 270px;
height: 519px;
}
#LayerMode {
width: 70px;
height: 519px;
background: #848484;
}
#IPhoneMode {
width: 340px;
height: 40px;
margin-left: 15px;
background: #848484;
}
/*----------------------------Right Column---------------------------*/
#TextureMode {
width: 600px;
height: 40px;
background: #848484;
}
#TextureFilter {
width: 130px;
height: 559px;
background: #848484;
}
#TextureView {
width: 470px;
height: 559px;
overflow: auto;
}
#TextureViewInside {
padding: 10px;
}
#images img {
width: 97px;
display: inline-block;
vertical-align: top;
padding: 4px;
}

Javascript:

$(document).ready(function () {
$("#images img").click(function () {
var getsource = $(this).attr("src");
alert(getsource);
});
});

var canvas = new fabric.Canvas('Canvas');
var rect = new fabric.Rect({
fill: 'red',
width: 20,
height: 20,
angle: 45
});
canvas.add(rect);

最佳答案

你没有在你的 fiddle 中加入 jQuery。

这是一个修改后的 fiddle ,同时包含 fabricjQuery(请参阅外部资源):

http://jsfiddle.net/AbdiasSoftware/a7ZSG/11/

关于javascript - 知道为什么矩形不会出现在我的 Fabricjs Canvas 中吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19989742/

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