canvas를 이용한 점선을 이어주는 선을 그리고싶습니다..

canvas를 이용한 점선을 이어주는 선을 그리고싶습니다..

QA

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는 여기까지입니다

 

그런데 이걸 다른 쪽으로 가져와서 합치려하다보니 뭔가 작동이안되서요

 

 

이 질문에 댓글 쓰기 :

답변 1

답변을 작성하시기 전에 로그인 해주세요.
전체 14
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT