NDK JNI이용하여 C/C++ 라이브러리 호출하기

- gradle 설정 : http://ghj1001020.tistory.com/761  참고

- calculator 라는 C파일(라이브러리)을 만들어서 JNI를 통한 호출



MainActivity.java : Jni 로드및 호출

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
package com.ghj.jnitwo;
 
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.widget.TextView;
 
public class MainActivity extends AppCompatActivity {
 
    TextView txtResult;
 
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        int add = getCalculator(123'+');
        int minus = getCalculator(123'-');
        int multiply = getCalculator(123'*');
        int divide = getCalculator(123'/');
 
        txtResult.append("덧셈 : "+add+"\n");
        txtResult.append("뺄셈 : "+minus+"\n");
        txtResult.append("곱셈 : "+multiply+"\n");
        txtResult.append("나눗셈 : "+divide+"\n");
    }
 
 
    static {
        //JNI 로드
        System.loadLibrary("jni-calculator");
    }
 
    public native int getCalculator(int a, int b, char type);
}
 
cs


jni-calculator.c : Jni 파일

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#include <jni.h>
#include "calculator.h"
 
 
/**
 * @desc : JNI 를 이용하여 c/c++ 로 된 라이브러리를 호출할 수 있다
 */
JNIEXPORT jint JNICALL
Java_com_ghj_jnitwo_MainActivity_getCalculator(JNIEnv *env, jobject instance, jint a, jint b, jchar type) {
 
    if(type == '+'){
        add(a, b);
    }else if(type == '-'){
        minus(a, b);
    }else if(type == '*'){
        multiply(a, b);
    }else if(type == '/'){
        divide(a, b);
    }
}
cs


calculator.h : 임의의 라이브러리 헤더파일

1
2
3
4
5
6
7
8
9
10
#ifndef JNITWO_CALCULATOR_H
#define JNITWO_CALCULATOR_H
 
extern int add(int a, int b);
extern int minus(int a, int b);
extern int multiply(int a, int b);
extern int divide(int a, int b);
 
#endif //JNITWO_CALCULATOR_H
 
cs


calculator.c : 임의의 라이브러리 소스파일

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#include "calculator.h"
 
//덧셈
int add(int a, int b){
    return a + b;
}
 
//뺄셈
int minus(int a, int b){
    return a - b;
}
 
//곱셈
int multiply(int a, int b){
    return a * b;
}
 
//나눗셈
int divide(int a, int b){
    return a / b;
}
cs


main_activity.xml : 화면

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.ghj.jnitwo.MainActivity">
 
    <TextView
        android:id="@+id/txtResult"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</LinearLayout>
 
cs


build.gradle

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
//apply plugin: 'com.android.application'
apply plugin: 'com.android.model.application'
 
model {
    android {
        compileSdkVersion 25
        buildToolsVersion "25.0.3"
        defaultConfig {
            applicationId "com.ghj.jnitwo"
            minSdkVersion.apiLevel 19
            targetSdkVersion.apiLevel 25
            versionCode 1
            versionName "1.0"
            testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
        }
        buildTypes {
            release {
                minifyEnabled false
//                proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
                proguardFiles.add(file('proguard-android.txt'))
            }
        }
 
        ndk {
            moduleName 'jni-calculator'
 
        }
    }
}
...
cs



결과

c라이브러리를 이용하여 사칙연산을 실행


NDK HelloWorld

- 사이트 : https://codelabs.developers.google.com/codelabs/android-studio-jni/index.html?#0


1) gradle wrapper 사용

Preferences (Settings) -> Build, Execution, Deployment -> Build Tools -> Gradle -> Use Default Gradle wrapper (recommended) 


2) NDK 다운로드

Tools -> Android -> SDK Manager -> SDK Tools -> NDK (Android NDK) 선택 -> Apply


3) gradle 설정

3-1) build.gradle (Project:)

- classpath 'com.android.tools.build:gradle-experimental:0.9.3' 로 교체

   (http://jcenter.bintray.com/com/android/tools/build/gradle-experimental 에서 최신버전 확인)

1
2
3
4
5
6
7
8
9
10
buildscript {
    repositories {
        jcenter()
    }
    dependencies {
//        classpath 'com.android.tools.build:gradle:2.3.2'
 
        classpath 'com.android.tools.build:gradle-experimental:0.9.3'
    }
}
cs


3-2) gradle-wrapper.properties

- distributionUrl 최신버전으로 설정

1
distributionUrl=https\://services.gradle.org/distributions/gradle-3.3-all.zip
cs


3-3) build.gradle (Module:)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//apply plugin: 'com.android.application'
apply plugin: 'com.android.model.application'
 
model {
    android {
        compileSdkVersion 25
        buildToolsVersion "25.0.3"
 
        defaultConfig {
            applicationId "com.ghj.ndkhelloworld"
            minSdkVersion.apiLevel 19
            targetSdkVersion.apiLevel 25
            versionCode 1
            versionName "1.0"
            testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
        }
 
        buildTypes {
            release {
                minifyEnabled false
//                proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
                proguardFiles.add(file('proguard-android.txt'))
            }
        }
    }
}
...
cs


4) 소스코딩

4-1) build.gradle 에 ndk moduleName 추가 -> Syn Now 클릭

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
//apply plugin: 'com.android.application'
apply plugin: 'com.android.model.application'
 
model {
    android {
        compileSdkVersion 25
        buildToolsVersion "25.0.3"
 
        defaultConfig {
            applicationId "com.ghj.ndkhelloworld"
            minSdkVersion.apiLevel 19
            targetSdkVersion.apiLevel 25
            versionCode 1
            versionName "1.0"
            testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
        }
 
        buildTypes {
            release {
                minifyEnabled false
//                proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
                proguardFiles.add(file('proguard-android.txt'))
            }
        }
 
        ndk {
            moduleName "hello-world"
        }
    }
}
cs


4-2) MainActivity.java
- System.loadLibrary의 라이브러리 이름과 build.gradle의 moduleName 이 같아야 한다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
package com.ghj.ndkhelloworld;
 
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
 
public class MainActivity extends AppCompatActivity {
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
 
    static {
        System.loadLibrary("hello-world");
    }
 
    public native String getHelloWorld();
}
 
cs


4-3) jni 파일 생성

- getHelloWorld를 길게 누른후 전구를 눌러 팝업메뉴에서 jni 파일생성 클릭


4-4) hello-world.c

1
2
3
4
5
6
#include <jni.h>
 
JNIEXPORT jstring JNICALL
Java_com_ghj_ndkhelloworld_MainActivity_getHelloWorld(JNIEnv *env, jobject instance) {
    return (*env)->NewStringUTF(env, "Hello World! From NDK");
}
cs


4-5) activity_main.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.ghj.ndkhelloworld.MainActivity">
 
    <TextView
        android:id="@+id/txtNDK"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
 
</LinearLayout>
 
cs


4-6) MainActivity.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
package com.ghj.ndkhelloworld;
 
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.TextView;
 
public class MainActivity extends AppCompatActivity {
 
    TextView txtNDK;
 
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        txtNDK = (TextView)findViewById(R.id.txtNDK);
 
        //Hello World 출력
        txtNDK.setText(getHelloWorld());
    }
 
    static {
        System.loadLibrary("hello-world");
    }
 
    public native String getHelloWorld();
}
 
cs



결과


SMS 수신하기 (브로드캐스트 사용)



java)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
package ghj.com.recvsms;
 
import android.content.BroadcastReceiver;
import android.content.Context;
import android.content.Intent;
import android.os.Build;
import android.os.Bundle;
import android.telephony.SmsMessage;
import android.widget.Toast;
 
/**
 * Created by gwonhyeogjun on 2017. 6. 6..
 */
 
public class ReceiveSMS extends BroadcastReceiver {
 
    @Override
    public void onReceive(Context context, Intent intent) {
        Bundle bundle = intent.getExtras();
        SmsMessage[] msg;
        String receive = "";
 
        if(bundle!=null){
            //pdu 얻기
            Object[] pdus = (Object[])bundle.get("pdus");
            msg = new SmsMessage[pdus.length];
            for(int i=0; i<msg.length; i++){
                //PDU로부터 SmsMessage 객체로 변환
                if(Build.VERSION.SDK_INT>=23){
                    msg[i] = SmsMessage.createFromPdu((byte[])pdus[i], "3gpp");
                }else{
                    msg[i] = SmsMessage.createFromPdu((byte[])pdus[i]);
                }
 
                //PDU로부터 전환번호 , 메시지를 반환
                receive += msg[i].getOriginatingAddress()+" : "+msg[i].getMessageBody().toString();
            }
            Toast.makeText(context, receive, Toast.LENGTH_SHORT).show();
        }
    }
}
cs



AndroidManifest.xml)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
    <application>
        ...
        <receiver android:name=".ReceiveSMS">
            <intent-filter>
                <action android:name="android.provider.Telephony.SMS_RECEIVED" />
                <action android:name="android.provider.Telephony.WAP_PUSH_RECEIVED" />
            </intent-filter>
        </receiver>
    </application>
 
 
    <uses-permission android:name="android.permission.SEND_SMS" />
    <uses-permission android:name="android.permission.RECEIVE_SMS" />
 

cs



결과

Api로 SMS 보내기



java)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
package ghj.com.sendsms;
 
import android.app.PendingIntent;
import android.content.BroadcastReceiver;
import android.content.Context;
import android.content.Intent;
import android.content.IntentFilter;
import android.os.Build;
import android.provider.Telephony;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.telephony.SmsManager;
import android.telephony.SmsMessage;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;
 
import java.util.ArrayList;
 
public class MainActivity extends AppCompatActivity {
 
    SmsManager mSMSManager;
    EditText editBody;
 
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        mSMSManager = SmsManager.getDefault();
        editBody = (EditText)findViewById(R.id.editBody);
 
        Button btnSend = (Button)findViewById(R.id.btnSend);
        btnSend.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                sendSms();
            }
        });
    }
 
 
    public void sendSms(){
        //메시지
        String body = editBody.getText().toString();
        //160자 이하의 메시지 리스트로 만든다
        ArrayList<String> bodyList = mSMSManager.divideMessage(body);
 
        //송신 인텐트
        PendingIntent sentPI = PendingIntent.getBroadcast(this0new Intent("SMS_SENT"), 0);
        //수신 인텐트
        PendingIntent recvPI = PendingIntent.getBroadcast(this0new Intent("SMS_DELIVERED"), 0);
 
        registerReceiver(mSentReceiver, new IntentFilter("SMS_SENT"));
        registerReceiver(mRecvReceiver, new IntentFilter("SMS_DELIVERED"));
 
        //여러개의 SMS 메시지를 전송
        if(bodyList.size() > 1){
            ArrayList<PendingIntent> sentPIList = new ArrayList<>();
            ArrayList<PendingIntent> recvPIList = new ArrayList<>();
            for(int i=0; i<bodyList.size(); i++){
                sentPIList.add(sentPI);
                recvPIList.add(recvPI);
            }
            mSMSManager.sendMultipartTextMessage("010-1234-5678"null, bodyList, sentPIList, recvPIList);
        }
        //1개의 SMS 메시지를 전송
        else{
            mSMSManager.sendTextMessage("010-1234-5678"null, body, sentPI, recvPI);
        }
    }
 
    BroadcastReceiver mSentReceiver = new BroadcastReceiver() {
        @Override
        public void onReceive(Context context, Intent intent) {
             switch (getResultCode()){
                case RESULT_OK:
                    Toast.makeText(MainActivity.this"SMS Send", Toast.LENGTH_SHORT).show();
                    break;
                 case SmsManager.RESULT_ERROR_GENERIC_FAILURE:
                     Toast.makeText(MainActivity.this"ERROR_GENERIC_FAILURE", Toast.LENGTH_SHORT).show();
                     break;
                 case SmsManager.RESULT_ERROR_NO_SERVICE:
                     Toast.makeText(MainActivity.this"ERROR_NO_SERVICE", Toast.LENGTH_SHORT).show();
                     break;
                 case SmsManager.RESULT_ERROR_NULL_PDU:
                     Toast.makeText(MainActivity.this"ERROR_NULL_PDU", Toast.LENGTH_SHORT).show();
                     break;
                 case SmsManager.RESULT_ERROR_RADIO_OFF:
                     Toast.makeText(MainActivity.this"ERROR_RADIO_OFF", Toast.LENGTH_SHORT).show();
                     break;
            }
        }
    };
 
    BroadcastReceiver mRecvReceiver = new BroadcastReceiver() {
        @Override
        public void onReceive(Context context, Intent intent) {
            switch (getResultCode()){
                case RESULT_OK:
                    Toast.makeText(MainActivity.this"SMS Delivered", Toast.LENGTH_SHORT).show();
                    break;
                case RESULT_CANCELED:
                    Toast.makeText(MainActivity.this"SMS Delivered Fail", Toast.LENGTH_SHORT).show();
                    break;
            }
        }
    };
}
 
cs



xml)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="ghj.com.sendsms.MainActivity">
 
    <EditText
        android:id="@+id/editBody"
        android:layout_width="match_parent"
        android:layout_height="50dp" />
 
    <Button
        android:id="@+id/btnSend"
        android:text="SMS 보내기"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>
 
cs



AndroidManifest.xml

1
2
3
4
5
6
7
    <application>
       ...
    </application>
 
 
    <uses-permission android:name="android.permission.SEND_SMS" />
    <uses-permission android:name="android.permission.RECEIVE_SMS" />
cs



결과

Intent로 SMS, MMS, Mail 보내기



java)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
package ghj.com.messageintent;
 
import android.content.Intent;
import android.net.Uri;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
 
public class MainActivity extends AppCompatActivity {
 
    EditText editBody;
 
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
 
        editBody = (EditText)findViewById(R.id.editBody);
        Button btnSms = (Button)findViewById(R.id.btnSms);
        btnSms.setOnClickListener(new View.OnClickListener(){
            @Override
            public void onClick(View v) {
                sendSmsIntent("010-1234-1234");
            }
        });
 
        Button btnMms = (Button)findViewById(R.id.btnMms);
        btnMms.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                getImage();
            }
        });
 
        Button btnEmail = (Button)findViewById(R.id.btnEmail);
        btnEmail.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                sendEmail("ghj@naver.com");
            }
        });
    }
 
 
    public void sendSmsIntent(String number){
        try{
            Uri smsUri = Uri.parse("sms:"+number);
            Intent sendIntent = new Intent(Intent.ACTION_SENDTO, smsUri);
            sendIntent.putExtra("sms_body", editBody.getText().toString());
            startActivity(sendIntent);
 
//        Intent sendIntent = new Intent(Intent.ACTION_VIEW);
//        sendIntent.putExtra("address", number);
//        sendIntent.putExtra("sms_body", editBody.getText().toString());
//        sendIntent.setType("vnd.android-dir/mms-sms");
//        startActivity(sendIntent);
        }catch (Exception e){
            e.printStackTrace();
        }
    }
 
    public void sendMmsIntent(String number, Uri imgUri){
        try{
            Intent sendIntent = new Intent(Intent.ACTION_SEND);
            sendIntent.putExtra("address", number);
            sendIntent.putExtra("subject""MMS Test");
            sendIntent.putExtra("sms_body", editBody.getText().toString());
            sendIntent.setType("image/*");
            sendIntent.putExtra(Intent.EXTRA_STREAM, imgUri);
            startActivity(Intent.createChooser(sendIntent, getResources().getString(R.string.app_name)));
        }catch (Exception e){
            e.printStackTrace();
        }
    }
 
    public void getImage(){
        try{
            Intent intent = new Intent(Intent.ACTION_GET_CONTENT);
            intent.addCategory(Intent.CATEGORY_OPENABLE);
            intent.setType("image/*");
            startActivityForResult(Intent.createChooser(intent, "Image Choose"), 1);
        }catch (Exception e){
            e.printStackTrace();
        }
    }
 
    public void sendEmail(String email){
        try{
            Intent emailIntent = new Intent(Intent.ACTION_SEND);
            emailIntent.putExtra(Intent.EXTRA_EMAIL, new String[]{email});
            emailIntent.putExtra(Intent.EXTRA_CC, new String[]{email});
            emailIntent.putExtra(Intent.EXTRA_BCC, new String[]{email});
            emailIntent.putExtra(Intent.EXTRA_SUBJECT, "Email Test");
            emailIntent.putExtra(Intent.EXTRA_TEXT, editBody.getText().toString());
            emailIntent.setType("message/rfc822");
            startActivity(Intent.createChooser(emailIntent, "Email Choose"));
        }catch (Exception e){
            e.printStackTrace();
        }
    }
 
    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        if(requestCode == 1){
            if(resultCode==RESULT_OK){
                Uri imgUri = data.getData();
 
                sendMmsIntent("010-1234-1234", imgUri);
            }
        }
    }
}
 
cs



xml)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="ghj.com.messageintent.MainActivity">
 
    <EditText
        android:id="@+id/editBody"
        android:layout_width="match_parent"
        android:layout_height="50dp" />
 
 
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <Button
            android:id="@+id/btnSms"
            android:text="SMS 인텐트"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
 
        <Button
            android:id="@+id/btnMms"
            android:text="MMS 인텐트"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
 
        <Button
            android:id="@+id/btnEmail"
            android:text="Email"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>
 
 
</LinearLayout>
 
cs



결과

svg 의 텍스트에 링크걸기



html)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, height=device-height, 
                     minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0">
    <title>Insert title here</title>
</head>
 
<body>
    <?xml version="1.0" ?>
    <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="400px" version="1.1">
        <!-- 
        a : 외부링크 연결하기
            xlink:href=사이트주소
            target="_blank" : 새창에서 열기
         -->
        <a xlink:href="http://www.naver.com" target="_blank">
            <text x="50" y="50" font-size="30px" font-weight="bold" style="fill:green;">
            NAVER
            </text>
        </a>
        <a xlink:href="http://www.google.com" target="_blank">
            <text x="50" y="100" font-size="30px" font-weight="bold" style="fill:blue;">
            GOOGLE
            </text>
        </a>
    </svg>
</body>
</html>
cs



결과

svg 의 path 따라서 텍스트 나타내기



html)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, height=device-height, 
                     minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0">
    <title>Insert title here</title>
</head>
 
<body>
    <?xml version="1.0" ?>
    <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="400px" version="1.1">
        <!-- path 를 미리 정의합니다. -->
        <defs>
            <path id="path" d="M50,100 C100,0 150,200 200,100" />
        </defs>
 
        <!-- textPath : 텍스트가 그려질 path 를 지정합니다. -->    
        <text font-size="15px" font-weight="bold" style="fill:green;">
            <textPath xlink:href="#path">선따라 텍스트를 그립니다...</textPath>
        </text>
    </svg>
</body>
</html>
cs



결과

svg의 defs 요소 : 참조를 위한 컨테이너



html)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, height=device-height, 
                     minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0">
    <title>Insert title here</title>
</head>
 
<body>
    <?xml version="1.0" ?>
    <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="400px" version="1.1">
        <!-- defs : 내용을 미리 정의해 놓는다 -->
        <defs>
            <rect id="test" x="50" y="50" rx="10" ry="10" width="100" height="100" /
        </defs>
        
        <!-- 일치하는 id 값의 내용을 보여준다 -->
        <use xlink:href="#test" />
    </svg>
</body>
</html>
cs



결과

svg 로 글자쓰기



html)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, height=device-height, 
                     minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0">
    <title>Insert title here</title>
</head>
 
<body>
    <?xml version="1.0" ?>
    <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="400px" version="1.1">
        <!-- 
        x : 텍스트가 쓰여질 x좌표
        y : 텍스트가 쓰여질 y좌표
        font-family : 폰트종료
        font-size : 폰트크기
        font-weight : 폰트스타일
        fill : 글자색
         -->
        <text x="50" y="50" font-family="sans-serif" font-size="30px" font-weight="bold"
              style="fill:green;opacity:0.5;">Hello World!</text>
    </svg>
</body>
</html>
cs



결과

svg 로 path 요소로 선긋기



대문자는 절대좌표, 소문자는 상대좌표

M, m

시작점 지정

L, l 

직선 그리기 

Z, z

시작점까지 연결하기 

H, h 

수평선 긋기 

V, v

수직선 긋기

C, c 

곡선 긋기 

S, s

곡선 이어긋기 

Q, q 

2차원 베지어 곡선 긋기

T, t 

2차원 베지어 곡선 이어긋기 

A, a 

타원이나 호 그리기 



html)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, height=device-height, 
                     minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0">
    <title>Insert title here</title>
</head>
 
<body>
    <?xml version="1.0" ?>
    <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="400px" version="1.1">
        <!-- 직선 그리기 -->
        <!-- Lx좌표,y좌표 -->
        <path d="M50,50 L200,50 200,100Z" 
              stroke="green" stroke-width="5" fill="none" />
              
        <!-- 수평선 긋기 -->
        <!-- Hx좌표 -->
        <path d="M50,150 H200"
              stroke="green" stroke-width="5" />
              
        <!-- 수직선 긋기 -->
        <!-- Vy좌표 -->
        <path d="M250,50 V150"
              stroke="green" stroke-width="5" />
 
        <!-- 곡선 긋기 -->
        <!-- C조절점1x,조절점1y 조절점2x,조절점2y 끝점x,끝점y -->
        <path d="M50,200 C100,250 150,150 200,200" 
              stroke="green" stroke-width="5" fill="none" />
              
        <!-- 곡선 이어긋기 -->
        <!-- S조절점x,조절점y 끝점x,끝점y -->
        <!-- 시작지점은 이전 곡선의 마지막 조절점의 반태편 또는 곡선이 없을 경우 마지막 지점이다 -->
        <path d="M50,250 C100,300 150,200 200,250 S250,200 300,250"
              stroke="green" stroke-width="5" fill="none" />
              
        <!-- 2차원 베지어 곡선 그리기 -->
        <!-- Q조절점x,조절점y 끝점x,끝점y -->
        <path d="M50,300 Q125,350 200,300" 
              stroke="green" stroke-width="5" fill="none" />
            
        <!-- 베지어 곡선 이어긋기 -->
        <!-- T끝점x,끝점y -->
          <!-- 시작지점은 이전 곡선의 마지막 조절점의 반태편 또는 곡선이 없을 경우 마지막 지점이다 -->
        <path d="M50,350 Q125,400 200,350 T300,350"
              stroke="green" stroke-width="5" fill="none" />
    </svg>
</body>
</html>
cs



결과

+ Recent posts