scanhand » svg.js

svj.js interaction sample

1월 11, 2018 svg.js 1 comment

svj.js를 활용한 interaction 예제 구현

1.초기 Frame영역 설정, rect형태로 Frame size 선언

var SVG = require('svg.js');
var svgdraw = SVG("drawing").size(300, 300);
var rectFrame = {
    left:   0,
    top:    0,
    right:  svgdraw.width(),
    bottom: svgdraw.height()
};

2.svg line 객체로 frame 그리기, 추후 line svg를 통해 intersecion 검사 수행

var frameLines = []
frameLines.push(svgdraw.line(rectFrame.left, rectFrame.top, rectFrame.left, rectFrame.bottom).attr({stroke:"black"}));
frameLines.push(svgdraw.line(rectFrame.left, rectFrame.bottom, rectFrame.right, rectFrame.bottom).attr({stroke:"black"}));
frameLines.push(svgdraw.line(rectFrame.right, rectFrame.bottom, rectFrame.right, rectFrame.top).attr({stroke:"black"}));
frameLines.push(svgdraw.line(rectFrame.right, rectFrame.top, rectFrame.left, rectFrame.top).attr({stroke:"black"}));

3. browser의 refresh에 맞춰 draw 추가

function OnDraw() {
    window.requestAnimationFrame(OnDraw);
    // svgdrawing code goes here
    frameCount++;
}
OnDraw();

4. 1초 단위로 frame rate 출력

///Frame Rate
var textFrameRate = svgdraw.text('Frame Rate: 0 f/s');
textFrameRate.move(svgdraw.width()-150, svgdraw.height()-25);

//Frame rate
setInterval(function(){ 
    frameRate = frameCount;
    frameCount = 0;
    textFrameRate.text("Frame Rate: " + frameRate + " f/s");
}, 1000);

5. Random하게 circle svg 객체 생성 하기

circleSize = 20;
circleCount = 6;
colors = ["red", "blue", "yellow", "black","#F80","#80F"]
for(var i=0; i<circleCount; i++)
{
    posX[i] = Math.floor((Math.random() * svgdraw.width()) - circleSize);
    posY[i] = Math.floor((Math.random() * svgdraw.height()) - circleSize);
    if(posX[i] < 0) posX[i]=0;
    if(posY[i] < 0) posY[i]=0;
    circles[i] = svgdraw.circle(circleSize).attr({fill: colors[i]}).move(posX[i], posY[i]);
}

6. source circle객체 마다 다른 cicle객체 충돌 검사, frame 외벽 검사 수행

for(var src=0; src<circles.length; src++)
{
    var isIntersect = false;
    var srcObj, destObj;
    srcObj = circles[src];

    ///Circle
    for(var dest=0; dest<circles.length; dest++)
    {
        if(src == dest) continue;
        if(intersectRect(circles[src], circles[dest]))
        {
            isIntersect = true;
            destObj = circles[dest];
            break;
        }
    }
    
    ///Frame
    if(!isIntersect)
    {
        for(var f=0; f<frameLines.length; f++)
        {
            if(intersectRect(circles[src], frameLines[f]))
            {
                isIntersect = true;
                destObj = frameLines[f];
                break;
            }
        }
    }
}

7. 충돌이라고 판단되면, 방향 전환
원래는 충돌 면에 따라 움직이는 방향을 정해야 하지만, 임시 테스트 이기에 충돌 없을때까지 무작위로 수행

if(isIntersect)
{   
    var tryCount = 0;
    while(intersectRect(srcObj, destObj))
    {
        if(tryCount++ > 10)
            break;
        changeDirection(src);
        moveCircle(src);
    }
}

8.초기 생성시에 random위치 생성시 서로 충돌 나는 예외처리 추가
반복적으로 생성 하면서 충돌시 재생성

for(var i=0; i<circleCount; i++)
{
    var cir = createCircle(i);
    for(var dest=0; dest<circles.length; dest++)
    {
        if(!intersectRect(cir.circle, circles[dest]))
            break;
        cir.circle.remove();
        dest--;
        cir = createCircle(i);
    }
    posX[i] = cir.posX;
    posY[i] = cir.posY;
    circles[i] = cir.circle;

    dirs[i] = Math.floor((Math.random() * 4));
    changeDelta(i, dirs[i]);
}

9.전체 source는 github에 (https://github.com/scanhand/test_svgjs)

10.결과 화면

svj.js draggable 사용

1월 10, 2018 svg.js No comments

svg.draggable1. svg.draggable.js 설치

$npm install -save svg.draggable.js

2.초기 간단한 frame border 그리기

var SVG = require('svg.js');
var draw = SVG('drawing').size(300, 300);
var frame = draw.rect(300, 300).attr({stroke: 'black', fill: 'none'});
var circle = draw.circle(100).attr({ fill: '#3B3'});

3. svg.draggable.js require() 추가 및 움직이고자 하는 object에 draggable 추가

var svgdrag = require('svg.draggable.js');
circle.draggable();

4.결과 화면

svj.js npm + webpack 사용

1월 9, 2018 svg.js No comments

npm + webpack을 이용한 svg.js 사용

1. npm init을 통해 초기화 수행

$ npm init

2. svg.js 설치

$ npm install -save svg.js

3. webpack 설치 / 추후 debugging을 위해 source-map-loader 설치

$ npm install -save webpack source-map-loader

4. webpack.config.js 파일 추가
entry file을 index.js로 설정

module.exports = {
    entry: './index.js',
    output: {
        path: __dirname,
        filename: 'bundle.js'
    },

    module: {
            loaders: [
                // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
                { enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
            ]
    },

    resolve: {
        extensions: ['.js']
    }
};

5. index.js 파일 작성

var SVG = require('svg.js');
var draw = SVG('drawing').size(300, 300);
var circle = draw.circle(100).attr({ fill: '#3B3'});

6. weppack 수행

$ webpack
Hash: f1b01a8441b3b6f4f17f
Version: webpack 3.10.0
Time: 290ms
    Asset    Size  Chunks             Chunk Names
bundle.js  150 kB       0  [emitted]  main
   [0] ./index.js 127 bytes {0} [built]
    + 1 hidden module

7.index.html파일에 bundle.js 파일 추가

    <body>
        <div id="drawing"></div>   
        <script type="text/javascript" src="bundle.js"></script>
    </body>

8.결과 화면

svg.js 시작 하기

1월 9, 2018 svg.js No comments

svj.js? svg javascript libarary

javascript을 이용한 svg.js 사용

1.index.html 파일 수정

<html>
    <head>
        <title>test svg.js</title>
    </head>
    <body>
    </body>
</html>

2. body아래에 svg.js cdn link 추가, 작업용 index.js 파일 추가

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.3/svg.js"></script> 
<script type="text/javascript" src="index.js">

3. index.js 간단한 sample용 code 추가
-간단한 예제로 div id darwing를 가지는 SVG instance를 생성
-그 이후 svg에 rect 객체 생성후 fill attribute 설정

var draw = SVG('drawing').size(300, 300);
var rect = draw.rect(100, 100).attr({ fill: '#f06' });

4. index.html에 drawing id를 가지는 div 추가

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.3/svg.js"></script> 
<script type="text/javascript" src="index.js">
<div id="drawing"></div>

5.nginx를 통해 실행시 아래와 같은 error발생

6.원인은 body아래 script가 load된 시점 이전에 div tag가 없기에 해당 node를 찾을 수 없다는 error가 발생
즉, div tag를 index.js 상단으로 위치 이동

<div id="drawing"></div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.3/svg.js"></script> 
<script type="text/javascript" src="index.js">

7.결과 화면

svg.js