티스토리 뷰
php CGI의 데이터를 파싱하여 보여줄 수 있는 방법중 가능성들을 보여주기 위하여 데모페이지를 만들었다..알파버전..
브라우저에서 구현 가능한 (무거운 라이브러리는 쓸수없으므로 제외) SVG와 HTML5의 Canvas를 가지고
DOM으로 애니메이션및 드래그, 선그리기를 표현했다. 이걸가지고 솔루션에 어떻게 도입하고 어떤걸 보강하고
플랫폼을 가려내고 등등 할것인지 논의할 량으로 만든 데모...
사족을 달자면 SVG와 관련된 기술이나 자료가 국내에는 정말정말 드물다 구글링+영어번역으로 5시간동안 헤메이기도...
만들면서 느낀거지만 역시 향상된 뛰어난 기술들은 아직도 많다.
소스코드를 보면 어렵지 않게 코딩해보았지만 데모 페이지다 보니 중복되는 코드나 짜깁기(좀 지저분)하다.
크롬에서 볼것 : serpiko.meximas.com/tistory/html5/demosvg/index.html (로딩이 있음)
코드:
HTML5 and SVG Demo.zip
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title>Example</title>
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
<style></style>
<script type="text/javascript" src="js/jquery-1.5.0.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.touch.js"></script>
<script type="text/javascript" src="js/jquery.svg.js"></script>
<script type="text/javascript" src="js/demo.js"></script>
<script type="text/javascript">
var myColor = "#FF9940";
var myGap = 0;
function drawShape(){
// get the canvas element using the DOM
var canvas = document.getElementById('mycanvas');
// Make sure we don't execute when canvas isn't supported
if (canvas.getContext){
// use getContext to use the canvas for drawing
var ctx = canvas.getContext('2d');
for (i=0;i<10;i++){
ctx.lineWidth = 1+i;
ctx.beginPath();
ctx.moveTo(5+i*14,5);
ctx.lineTo(5+i*14,140);
ctx.stroke();
}
} else {
alert('You need Safari or Firefox 1.5+ to see this demo.');
}
}
function drawLine(){
var canvas = document.getElementById("mycanvas2");
var context = canvas.getContext("2d");
context.shadowColor = "red";
context.shadowOffsetX = 2;
context.shadowOffsetY = 2;
context.shadowBlur = 2;
context.moveTo(30,50);
context.lineTo(300,50);
context.lineTo(30,100);
context.stroke();
}
function triangle(){
var canvas = document.getElementById("tri");
var context = canvas.getContext("2d");
context.shadowColor = "green";
context.shadowOffsetX = 2;
context.shadowOffsetY = 2;
context.shadowBlur = 2;
context.beginPath(); //패스 그리기 시작
context.moveTo(50,10); //패스 시작점 지정
context.lineTo(20 ,100); //패스 이동점 지정
context.lineTo(80 ,100);
context.lineTo(50 ,10);
context.stroke(); //윤관선 그리기
//context.fill(); //색 채우기
}
function gra(){
var c=document.getElementById("myCanvas4");
var ctx=c.getContext("2d");
var grd=ctx.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
ctx.fillStyle=grd;
ctx.fillRect(0,0,175,50);
}
//드래그관련
function drag(target, mySVG) { //드래그 시작시 호출 할 함수
mySVG.dataTransfer.setData('Text', target.id);
};
function drop(target, mySVG) { //드롭시 호출 할 함수
var id = mySVG.dataTransfer.getData('Text');
target.appendChild(document.getElementById(id));
mySVG.preventDefault();
}
//
function jqDrag(){
//그냥 드래그
$('#vServer').draggable( {
containment: '#protect',
cursor: 'move',
//snap: '#protect'
} );
$('#vLeaf').draggable( {
containment: '#protect',
cursor: 'move',
//snap: '#protect'
} );
//선긋기의 오브젝트
$('#tv0').draggable( {
containment: '#protectLine',
cursor: 'move',
drag: dragLine
//stop: dragLine
//snap: '#protect'
} );
$('#tv1').draggable( {
containment: '#protectLine',
cursor: 'move',
drag: dragLine
//snap: '#protect'
//stop: dragLine
} );
}
var prevTv0_y;
var prevTv1_y;
var gap = 185;
function inner_init(){
prevTv0_y = $("#tv0").offset().top;
prevTv1_y = $("#tv1").offset().top;
//console.log(prevTv0_y);
//console.log(prevTv1_y);
}
//
function dragLine(){
var tv0_x = $("#tv0").offset().left +18 + myGap;
var tv1_x = $("#tv1").offset().left-14;
var tv0_y = $("#tv0").offset().top;
var tv1_y = $("#tv1").offset().top;
var canvas = document.getElementById("dragCanvas");
var context = canvas.getContext("2d");
context.clearRect(0, 0, canvas.width, canvas.height);
context.beginPath();
context.shadowColor = "gray";
context.shadowOffsetX = 3;
context.shadowOffsetY = 3;
context.shadowBlur = 2;
context.lineCap = "round";
context.moveTo(tv0_x, tv0_y - prevTv0_y + gap);
context.lineWidth = 5;
context.lineTo(tv1_x, tv1_y - prevTv1_y + gap);
context.strokeStyle = myColor;
context.closePath();
context.stroke();
}
</script>
</head>
<body>
<h2>비트맵 이미지</h2>
<div id="oblock1">
<div class="dtable1">
<div id="row1" class="drow">
<div class="dcell">
<img src="images/bitmapImage.jpg" class="bit0"/>
<p>비트맵 이미지원본(100% 사이즈)</p>
</div>
<div class="dcell">
<p><B> VS </B></p>
</div>
<div class="dcell">
<img src="images/bitmapImage.jpg" class="bit1"/>
<p>비트맵 이미지확대</p>
</div>
</div>
</div>
</div>
<h2>HTML5 Canvas</h2>
<div id="oblock6">
<div class="dtable6">
<div id="row1" class="drow">
<div class="dcell">
<img src="images/hawai_0.png" />
<p>하와이지도 100%</p>
</div>
<div class="dcell">
<p><B> VS </B></p>
</div>
<div class="dcell">
<img src="images/hawai_1.png" />
<p>하와이지도 175%</p>
</div>
</div>
</div>
</div>
<h2>SVG</h2>
<div id="oblock2">
<div class="dtable2">
<div id="row1" class="drow">
<div class="dcell">
<img src="svg/building.svg" width="38px" height="46px" type="image/svg+xml" class="v0" />
</div>
<div class="dcell">
<img src="svg/building2.svg" width="77px" height="68px" type="image/svg+xml" class="v1" />
</div>
<div class="dcell">
<img src="svg/tv.svg" width="75px" height="83px" type="image/svg+xml" class="v2" />
</div>
<div class="dcell">
<img src="svg/tvon.svg" width="53px" height="42px" type="image/svg+xml" class="v3" />
</div>
<div class="dcell">
<p><B> VS </B></p>
</div>
<div class="dcell">
<img src="svg/building.svg" width="124px" height="120px" type="image/svg+xml" class="v4" />
</div>
<div class="dcell">
<img src="svg/building2.svg" width="139px" height="122px" type="image/svg+xml" class="v5" />
</div>
<div class="dcell">
<img src="svg/tv.svg" width="111px" height="123px" type="image/svg+xml" class="v6" />
</div>
<div class="dcell">
<img src="svg/tvon.svg" width="90px" height="100px" type="image/svg+xml" class="v7" />
</div>
</div>
</div>
</div>
<h2>애니메이션</h2>
<div id="oblock3">
<div class="dtable3">
<div id="row" class="drow">
<div class="dcell">
<img src="images/bitTV.jpg" class="bitTV"/>
<p>비트맵 </p>
</div>
<div class="dcell">
<img src="svg/tv.svg" width="180px" height="165px" type="image/svg+xml" class="vTV" />
<img src="svg/tvon.svg" width="88px" height="103px" type="image/svg+xml" class="vON" />
<p>SVG</p>
</div>
<div class="dcell">
<img src="svg/tv.svg" width="130px" height="115px" type="image/svg+xml" class="vTV2" />
<img src="svg/tvon.svg" width="60px" height="76px" type="image/svg+xml" class="vON2" />
<br><br><br>
<p style="padding-left:10px">SVG</p>
</div>
<div class="dcell">
<img src="svg/leaf.svg" width="145px" height="90px" type="image/svg+xml" class="aLeaf" />
<img src="svg/arrow.svg" width="40px" height="32px" type="image/svg+xml" class="aRot" />
<br><br><br>
<p style="padding-left:100px">SVG</p>
</div>
</div>
</div>
</div>
<h2>Line Draw</h2>
<div id="oblock4">
<div class="dtable4">
<div id="row" class="drow">
<div class="dcell">
<canvas id="mycanvas"></canvas>
</div>
<div class="dcell">
<canvas id="mycanvas2"></canvas>
</div>
<div class="dcell">
<canvas id="tri"></canvas>
</div>
<div class="dcell">
<canvas id="myCanvas4"></canvas>
</div>
</div>
</div>
</div>
<h2>Drag & Drop</h2>
<div id="oblock5">
<div class="dtable5">
<div id="row" class="drow">
<div class="dcell">
<div class="drag" ondrop="drop(this, event);" ondragenter="return false;" ondragover="return false;">
<p>Drag</p>
<img src="svg/server.svg" width="35px" height="95px" type="image/svg+xml" id="tv" draggable="true" ondragstart="drag(this, event)" oncontextmenu="return false" style="-webkit-touch-callout:none" />
</div>
<div class="target" ondrop="drop(this, event);" ondragenter="return false;" ondragover="return false;">
<p>Drop</p>
</div>
<p>HTML5 Drag & Drop</p>
</div>
<div class="dcell"><br>
<div id = "protect">
<div style="width:35px; height:95px;" id = "vServer" oncontextmenu="return false" style="-webkit-touch-callout:none">
<img src="svg/server.svg" width="35px" height="95px" type="image/svg+xml" id = "jqTV" oncontextmenu="return false" style="-webkit-touch-callout:none" />
<!-- <img src="svg/tvon.svg" width="25px" height="15px" type="image/svg+xml" class="aON" /> -->
<img src="images/greenOn.gif" class="aON" />
</div>
<div style="width:145px;height:90px;" id = "vLeaf" oncontextmenu="return false" style="-webkit-touch-callout:none">
<img src="svg/leaf.svg" width="145px" height="90px" type="image/svg+xml" />
<img src="svg/arrow.svg" width="40px" height="32px" type="image/svg+xml" class="aRot" />
</div>
</div>
<p>jQuery UI Drag & Drop</p>
</div>
</div>
</div>
</div>
<h2>direct line draw</h2>
<div id="oblock7">
<div class="dtable7">
<div id="row" class="drow">
<div class="dcell">
<div id = "protectLine">
<div id = "test">
<img src="svg/leaf.svg" width="145px" height="90px" type="image/svg+xml" id="tv0" style="position:absolute;left:200px;top:2300px;" />
</div>
<img src="svg/server.svg" width="35px" height="95px" type="image/svg+xml" id="tv1"style="position:absolute;left:400px;top:2300px;" />
<canvas id="dragCanvas" width="600" height="300"></canvas>
</div>
<p>라인</p>
</div>
<div class="dcell">
<p>수치입력(70미만): <input name="status" size="4" value="100" /><input type="button" value="확인" id="btn" /></p>
<p>서버종류:
<select id="select">
<option>새싹</option>
<option>일반</option>
</select>
</p>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
drawShape();
drawLine();
triangle();
gra();
jqDrag();
inner_init();
dragLine();
init();
$("#btn").click(function(){
status = parseInt($('input[name=status]').val());
status > 70 ? myColor = "#FF9940" : myColor = "#FF6699";
dragLine();
});
});
</script>
</body>
<html>
-----------------------------------------------------------------------------------------------------------------------
아이프레임으로 직접 구동되는것을 확인 그런데 사이즈때문에 오른쪽이 좀 잘리므로 제대로 된 확인은 새창에서 확인 추천
'■ 프론트엔드 ■ > HTML' 카테고리의 다른 글
| 어떤 엘리먼트를 사용해서 웹을 만들어야 하나 (0) | 2018.02.19 |
|---|---|
| 박스모델의 생성 : HTML에서 js까지 (0) | 2014.11.03 |
| 박스모델의 위치계산 (0) | 2014.01.22 |
| 테이블샘플 (0) | 2014.01.16 |
| 기본엘리먼트 작성하기 - nonCss (0) | 2013.11.26 |
댓글