canvas를 이용한 점선을 이어주는 선을 그리고싶습니다..
본문
현재 사용하는것은
linedraw.js 라는 회사에 있엇던 js 였는데요
//////
var _dlines = [], cvs;
$(document).ready(function() {
cvs=$('#cvs01')[0];
$(cvs).attr('width',$(cvs).width()*window.scale);
$(cvs).attr('height',$(cvs).height()*window.scale);
if(cvs != null) {
cvs.ctx = cvs.getContext('2d');
cvs.cvs2 = $('#cvs02')[0];
cvs.ctx2 = cvs.cvs2.getContext('2d');
initStructure();
cvs.points = _points;
cvs.clines = _clines;
}
bindEvents();
});
function bindEvents() {
$(window).on('load resize', function() {
});
$('#answer').click(function() {
clearCanvas(cvs.ctx);
var isCorrect = false;
//정답체크
var matches = [];
for(var i=0;i<_clines.length;i++) {
var cl=_clines[i];
for(var j=0;j<_dlines.length;j++) {
var dl=_dlines[j];
if((cl[0]==dl[0] && cl[1]==dl[1]) || (cl[0]==dl[1] && cl[1]==dl[0])) {
matches.push(cl);
_dlines.splice(j,1);
break;
}
}
}
if(matches.length == _clines.length && _dlines.length == 0) {
try{adoCorrect.currentTime=0;}
catch(err){}
adoCorrect.play();
} else {
try{adoWrong.currentTime=0;}
catch(err){}
adoWrong.play();
}
drawLines(cvs.ctx,_clines,'#f77');
_dlines=[];
});
$('#retry').click(function() {
clearCanvas(cvs.ctx);
_dlines = [];
});
var sPt=null, pPt=null;
$('#cvs01').on('mousedown touchstart', function(event) {
event.preventDefault(); event.stopPropagation();
var t = getCanvasTouch(this,event);
this.sPt = findPoint(t,this.points);
console.log(this.sPt);
});
$('#cvs01').on('mousemove touchmove', function(event) {
event.preventDefault(); event.stopPropagation();
var t = getCanvasTouch(this,event);
console.log(t);
if(this.sPt==null) return;
this.pPt = t;
var sc = 1;//window.scale;
this.ctx.save();
clearCanvas(this.ctx2);
drawLine(this.ctx2, {x:this.sPt.x/sc,y:this.sPt.y/sc}, {x:t.x/sc,y:t.y/sc},'#77f');
this.ctx.restore();
});
$('#cvs01').on('mouseup touchend touchcancel', function(event) {
event.preventDefault(); event.stopPropagation();
if(this.sPt==null) return;
var t = this.pPt; //getCanvasTouch(this,event);
this.pPt = findPoint(t,this.points);
console.log(t);
clearCanvas(this.ctx2);
if(this.pPt != null && this.sPt != this.pPt) {
var nl = [this.pPt,this.sPt];
if(this.sPt.x < this.pPt.x)
nl = [this.sPt, this.pPt];
var isExist = false;
for(var i=0; i<_dlines.length; i++) {
var tl = _dlines[i];
if(tl[0].x==nl[0].x && tl[0].y==nl[0].y && tl[1].x==nl[1].x && tl[1].y==nl[1].y) {
isExist = true;
break;
}
}
if(this.id == 'cvs01') {
if(!isExist) {
_dlines.push(nl);
}
drawLines(this.ctx,_dlines);
}
try{adoTick.currentTime=0;}
catch(err){}
adoTick.play();
}
this.sPt = null;
this.pPt = null;
});
}
function initStructure() {
var tmp=_points,i,tmp2;
_points = [];
for(i=0; i<tmp.length; i++) {
_points.push({x:tmp[i][0],y:tmp[i][1]});
}
tmp = _clines;
_clines=[];
for(i=0; i<tmp.length; i++) {
tmp2 = tmp[i];
if(tmp[i]<0)
continue;
_clines.push([_points[i],_points[tmp[i]]]);
}
}
function drawLines(ctx, lines,color) {
if(!color)
color = '#77f';
//var keys = Object.keys(_dlines);
for(var i=0; i<lines.length; i++) {
var line=lines[i];
drawLine(ctx,line[0], line[1],color);
}
}
function clearCanvas(c) {
c.clearRect(0,0,cvs.width/window.scale,cvs.height/window.scale);
c.clearRect(0,0,cvs.width,cvs.height);
}
function drawLine(ct,s,e,color) {
var sc = window.scale;
ct.beginPath();
ct.moveTo((s.x-65)*sc,(s.y-45)*sc);
ct.lineTo((e.x-65)*sc,(e.y-45)*sc);
ct.lineWidth=8*sc;//window.scale;
ct.lineCap='round';
ct.strokeStyle=color;
ct.stroke();
// console.log('drawLine'+s+e);
}
function findPoint(pt, points) {
var gap=30;
for(var i=0; i<points.length; i++) {
var p = points[i];
if(Math.abs(pt.x-p.x)<=gap && Math.abs(pt.y-p.y)<=gap) {
return p;
}
}
}
function getCanvasTouch(cvs,evt) {
evt = getTouch(evt);
// return {x:(evt.pageX-$(cvs).position().left)/window.scale, y:(evt.pageY-$(cvs).position().top)/window.scale};
return {x:(evt.pageX-$(cvs).position().left), y:(evt.pageY-$(cvs).position().top)};
}
function getTouch(event) {
// var scale=window.scale;
if(event.touches!=null && event.touches.length>0)
return {pageX:event.touches[0].pageX, pageY:event.touches[0].pageY};
if(event.originalEvent!=null &&
event.originalEvent.touches!=null &&
event.originalEvent.touches.length>0)
return {pageX:event.originalEvent.touches[0].pageX, pageY:event.originalEvent.touches[0].pageY};
//console.log(event.originalEvent.pageX);
return {pageX:event.originalEvent.pageX, pageY:event.originalEvent.pageY};
}
위의 js와 아래의 xml로
아래의 스크립트를 이용해서 선을 그리는거같은데요 도저히 어떻게 해야될지를 모르겠어서
여쭤봅니다 ㅠㅠ
<script type="text/javascript">
//<![CDATA[
var _points = [[327,133],[698,133],[1067,133],
[327,283],[698,283],[1067,283]];
var _clines = [ 4, 3, 5,
-1,-1,-1];
//]]>
</script>
<!-- 팝업 컨텐츠 -->
<div id="content">
<p class="title"><span class="purple">B </span><span class="bold">Listen and Match</span> <span class="audio" data-audio="27_6">Match what you hear with the correct pictures.</span></p>
<ul class="box_number">
<li>
<span>1</span>
</li>
<li>
<span>2</span>
</li>
<li>
<span>3</span>
</li>
</ul>
<ul class="box_number_img">
<li><img alt="" src="images/p027_02.jpg" /></li>
<li><img alt="" src="images/p027_03.jpg" /></li>
<li><img alt="" src="images/p027_04.jpg" /></li>
</ul>
<ul class="dot">
<li>
<span>●</span>
<span>●</span>
<span>●</span>
</li>
<li>
<span>●</span>
<span>●</span>
<span>●</span>
</li>
</ul>
<canvas id='cvs02' width='1278' height='300'>
Canvas를 지원하는 브라우저에서 열기 바랍니다.
</canvas>
<canvas id='cvs01' width='1278' height='300'>
Canvas를 지원하는 브라우저에서 열기 바랍니다.
</canvas>
<!-- 버튼 그룹 -->
<ul class="btngroup">
<li id="answer"><img alt="" src="images/common/btn_answer.png" /></li>
<li id="retry"><img alt="" src="images/common/btn_retry.png" /></li>
</ul>
<ul class="btn_LAS">
<li id="listen" class="audio" data-audioList="num1,174_90,174_91,174_92,174_93,174_94,num2,174_95,174_96,174_97,174_98,num3,174_99,174_100,174_101,174_102"><img alt="" src="images/common/btn_listen.png" /></li>
</ul>
<!-- //버튼 그룹 -->
</div>
<!-- //팝업 컨텐츠 -->
xml 은 위의 내용이고요
body {
font-family: 'hevelR', 'DXsansL';
font-size: 30px;
line-height: 38px;
}
/***** A Get Ready 008_01 *****/
.posi {
background: url(../images/p027_01.jpg) no-repeat;
background-size: 100% 100%;
width: 820px;
height: 319px;
position: absolute;
left: 80px;
top: 130px;
}
/** 말풍선 입력창 **/
.posi>p:nth-child(1) {
position: absolute;
top: 62px;
left: 15px;
width: 360px;
font-family: 'DXharu';
font-size: 30px;
line-height: 30px;
}
/** 말풍선 텍스트 **/
.posi>p:nth-child(2) {
position: absolute;
top: 55px;
left: 510px;
width: 150px;
}
.R {
top: 220px;
width: 420px;
}
.que>li {
text-indent:0;
}
/***** B Listen and Match *****/
.box_number {
width: 1100px;
height: 50px;
position: absolute;
top: 130px;
left: 0;
bottom: auto;
right: 0;
}
/** 넘버링 말풍선 배경 **/
.box_number li span {
display: inline-block;
background: url(../images/common/123.png) no-repeat;
background-size: 95% 100%;
width: 50px;
height: 50px;
font-family: 'HelveR';
font-size: 30px;
line-height: 50px;
color: #fff;
}
.box_number li {
display: inline-block;
width: 350px;
height: 50px;
margin-right: 10px;
text-align: center;
}
.box_number_img {
width: 1100px;
height: 268px;
position: absolute;
top: 350px;
right: 0;
bottom: auto;
left: 0;
}
.box_number_img>li {
display: inline-block;
width: 350px;
height: 268px;
margin-right: 10px;
}
.box_number_img>li>img {
width: 350px;
height: 268px;
}
.box_number li:last-child, .box_number_img li:last-child {
margin-right: 0;
}
.dot {
position:absolute;
width: 800px;
left:0;
right:0;
top:185px;
}
.dot>li{
font-size:10px;
line-height:10px;
}
.dot>li>span {
width:10px;
height:10px;
line-height:10px;
text-align:center;
display:inline-block;
}
.dot>li:nth-child(1) {
poisition:absolute;
top:0;
}
.dot>li:nth-child(2) {
position:absolute;
top:150px;
}
.dot>li>span:nth-child(1) {
position:absolute;
left:18px;
}
.dot>li>span:nth-child(2) {
position:absolute;
left:388px;
}
.dot>li>span:nth-child(3) {
position:absolute;
left:758px;
}
/***** C Choose and Talk *****/
.CAT {
width: 1100px;
height: 330px;
background: url(../images/p027_05.png) no-repeat;
background-size: 100% 100%;
margin-bottom: 30px;
}
/** 텍스트 위치 **/
.CAT>li {
position: absolute;
top: 390px;
}
/* 간격 */
.CAT>li:nth-child(1) ul {
float: left;
}
.CAT>li:nth-child(1) ul li {
font-family: 'HelveC';
font-size: 30px;
line-height: 30px;
text-align: center;
vertical-align: middle;
letter-spacing: -1px;
}
/* 첫번째 */
.CAT>li:nth-child(1) ul:nth-child(1) {
width: 226px;
padding: 0 16px;
margin: 20px 2px 0 2px;
}
/* 두번째 */
.CAT>li:nth-child(1) ul:nth-child(2) {
width: 220px;
padding: 0 18px;
margin: 8px 2px 0 2px;
}
/* 세번째 */
.CAT>li:nth-child(1) ul:nth-child(3) {
width: 220px;
padding: 0 18px;
margin: 8px 2px 0 2px;
}
/* 네번째 */
.CAT>li:nth-child(1) ul:nth-child(4) {
width: 223px;
padding: 0 15px;
margin: 0 2px;
}
.CAT>li:nth-child(1) ul:nth-child(4)>li>textarea {
width: 220px;
margin-top: 8px;
height: 55px;
border: 1px solid #ccc;
background:none !important;
text-align:center;
}
.CAT>li:nth-child(1) ul:nth-child(4)>li>span {
width:0;
height:0;
font-size:0;
display: none;
}
#cvs01,#cvs02 {
position: absolute;
top:100px; left:0px;
width:1278px; height:300px;
border:1px solid transparent;
}
css는 여기까지입니다
그런데 이걸 다른 쪽으로 가져와서 합치려하다보니 뭔가 작동이안되서요
