나는 여전히 붙어있어서 내 캔버스 프로젝트에 도움이 필요하다. 나는 템플릿에 대한 아이디어를 얻었고, 거기서보고 싶은 내용이 있으며, 여기에 내용을 삽입하고 싶습니다. 마지막 질문에서 저는이 작업 캔버스 템플릿을 가지고 있습니다 : jsfiddle.net/AbdiasSoftware/LmCwZ/2/ 여기 내 첫 번째 탭에서 갖고 싶은 아이디어가 있습니다. 첫 번째 기본 탭을 만드는 데 도움이 되었기를 바랍니다. 예제를 확장하고 직접 작업 할 것입니다.
첫 번째 탭 예 : http://i.imgur.com/5Anzfny.png
첫 번째 탭에서 어떻게 할 수 있습니까? 일부 텍스트 내용은 응용 프로그램별로 자동으로 업데이트되어야합니다. 미리 감사드립니다.HTML5 캔버스로 가져 오는 방대한 콘텐츠
@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);
}
물론 다른 종류의 객체를 생성해야합니다 :
<!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>
은 예제 코드와 데모를 시작하고있다