Question

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

绿色画布应该有一个红色矩形但由于某种原因它不会出现，有人知道为什么吗？我试过把一个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);

Answer 1

你没有把jQuery包含在你的小提琴中。

以下是fabric和jQuery的修改小提琴（请参阅外部资源）：

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

知道为什么矩形不会出现在我的Fabricjs画布中吗？

1 个答案: