Question

我仍然坚持并需要你的帮助我的画布项目。我有了一个模板的想法，我想看到那里，我想在那里插入一个内容。从我上一个关于我有这个工作画布模板的问题：jsfiddle.net/AbdiasSoftware/LmCwZ/2/这是我想要在我的第一个标签上的想法。希望在您帮助创建第一个主要选项卡的同时，我将继续扩展示例并自行完成工作。
第一个标签示例：http://i.imgur.com/5Anzfny.png
我如何为我的第一个标签做到这一点？一些文本内容应该由应用程序自动更新。提前谢谢。

Answer 1

正如@Ken在回答你的上一个问题时建议的那样，复杂内容的布局通常是用HTML + CSS完成的。为您提供选项卡的一个很好的工具是jqueryUI的选项卡控件：https://jqueryui.com/tabs/生产应用程序将使用HTML + CSS。

但是，由于您是为了学习目的而对项目进行编码，因此您可以通过以下方式为标签内容创建“模板”。

JavaScript有一个名为object的变量。对象有点像数组，因为一个对象可以容纳多条信息。标记对象中的每条信息。

保存有关要包含在模板中的文本信息的对象可能如下所示：

var myTextObject1 = { text:"Hello", x:100, y:20 };

var myTextObject2 = { text:"World", x:100, y:35 };

制作模板，创建内容数组并将对象保存在该数组中

var contents=[];

contents.push(myTextObject1);

contents.push(myTextObject2);

然后，当您激活此选项卡时，您可以使用对象在选项卡上绘制内容

for(var i=0;i<contents.length;i++){
    drawTextContent( contents[i] );
}

function drawTextContent(text){
    ctx.fillText(text.text,text.x,text.y);
}

当然，您需要创建不同类型的对象：

定义文本的对象。
定义图像的对象。
定义背景矩形的对象。
定义字幕图像（图像+文本）的对象。

以下是开始示例代码和演示：http://jsfiddle.net/m1erickson/WNaLn/

enter image description here

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>
<script>
$(function(){

    // get a reference to the canvas and context
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // the contents[] array will hold individual content objects
    // the content objects will be used to later draw the content to the tab
    var contents=[];

    // load a test image
    var house=new Image();
    house.onload=start;
    house.src="houseIcon.png";


    function start(){

        // create some test contents

        // tab background

        addBackgroundRect(0,0,275,275,"red");

        // left panel example

        addBackgroundRect(10,10,100,250,"lavender");

        addImageContent(house,50,15,20,20);

        addImageContent(house,75,65,20,20);

        addImageContent(house,50,110,20,20);

        addImageContent(house,15,65,20,20);

        addImageContent(house,40,65,30,30);

        // right panel example

        addBackgroundRect(110,10,150,100,"white");

        addTextContent("Text1",115,20,"red");
        addTextContent("Text2",115,40,"red");
        addTextContent("Text3",115,60,"red");
        addTextContent("Text4",115,80,"red");

        addTextImageContent("Caption",house,175,20,60,60);

        drawContents(contents);
    }

    // draw all content in the contents array

    function drawContents(contents){

        for(var i=0;i<contents.length;i++){
            var content=contents[i];
            //
            switch (content.type){
                case "background":
                    drawBackgroundRect(content);
                    break;
                case "text":
                    drawTextContent(content);
                    break;
                case "image":
                    drawImageContent(content);
                    break;
                case "textImage":
                    drawTextImageContent(content);
                    break;
                default:
                    break;
            }
        }
    }


    // draw contents based on a content object

    function drawBackgroundRect(bk){
        ctx.fillStyle=bk.color;
        ctx.fillRect(bk.x,bk.y,bk.width,bk.height);
    }
    //
    function drawTextContent(text){
        ctx.fillStyle=text.color;
        ctx.fillText(text.text,text.x,text.y);
    }
    //
    function drawImageContent(img){
        ctx.drawImage(img.image,img.x,img.y,img.width,img.height);
    }
    //
    function drawTextImageContent(tImg){
        ctx.drawImage(tImg.image,tImg.x,tImg.y,tImg.width,tImg.height);
        ctx.fillStyle="black";
        ctx.fillRect(tImg.x,tImg.y+tImg.height-15,tImg.width,15);
        ctx.fillStyle="white";
        ctx.fillText(tImg.text,tImg.x+5,tImg.y+tImg.height-4);
    }


    // create content objects

    function addBackgroundRect(x,y,width,height,color){
        contents.push({
            type:"background",
            x:x,
            y:y,
            width:width,
            height:height,
            color:color
        });
    }
    //
    function addTextContent(text,x,y,color){
        contents.push({
            type:"text",
            text:text,
            x:x,
            y:y,
            color:color
        });
    }
    //
    function addImageContent(imgObject,x,y,width,height){
        contents.push({
            type:"image",
            image:imgObject,
            x:x,
            y:y,
            width:width,
            height:height
        });
    }
    //
    function addTextImageContent(text,imgObject,x,y,width,height){
        contents.push({
            type:"textImage",
            text:text,
            image:imgObject,
            x:x,
            y:y,
            width:width,
            height:height
        });
    }


}); // end $(function(){});
</script>
</head>
<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

大量内容导入HTML5画布

1 个答案: