TeraOmegaNetwork 2.1
<2020年9月>
303112345
6789101112
13141516171819
20212223242526
27282930123
45678910

jquery drag drop html5 ASP.NET json
SVGとVue.jsのお勉強 1
IEAuto 2018新機能の整理
IEAuto 2018 0.9.4_beta
IEAuto 2018 0.9.2_beta
IEAuto 2018 0.9.1_beta
Javascript querySelector
javascript querySelector
DELETE/INSERT 作成マクロ
IEAuto 2018 0.9.0_beta

プログラミング
・C#
・C/C++
・Objective-C
・Java
・Perl
・Visual Basic
・Visual Basic .NET
・色々な言語
・メモ
管理人の落書き
リンク
テンプレート作成支援言語
IEAuto
クラス設計
試験勉強
・応用情報技術者
・セキュリティスペシャリスト







  お勧め1「テンプレート作成支援言語(T言語)」ver 1.4.2    2012/04/15 更新
テンプレート作成支援言語について
Vectorでダウンロードする

お勧め2「ブラウザ自動操作ツール(IEAuto2013)」ver 1.0.2   2013/03/01 更新。
ブラウザ自動操作ツール(IEAuto 2009)について
Vectorでダウンロードする

お勧め3「ブラウザ自動操作ツール(IEAuto2018) 」ver 0.9.4   2018/09/07 更新。
ダウンロードする。  

旧Ver:ver 0.9.0_beta

お勧め4「データベース更新前更新後比較ツール(DBCMP) Oracle接続可」ver 1.4.0  2010/03/14 新規公開
ダウンロードする。

プログラミング - メモ
SVGとVue.jsのお勉強 1

SVGをvue.jsのデータを元に生成。
データは暗号ちっくな配列で管理(笑)

SVGとVue.jsのお勉強 1
  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
118
119
120
121
122
123
124
125
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>SVGとVue.jsのお勉強1</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>

    <style>
        circle{
          fill: skyblue;
          transition: all 0.2s cubic-bezier(.10,.02,.02,.10);
          stroke: rgb(200, 50, 200);
          stroke-width: 1px;
        }
        .active{
          fill: blue;
          stroke-width: 5px;
        }
    </style>
</head>
<body>
    <div id="app">
    
          <svg viewbox="0 0 600 650" width="600" height="650"
                   v-bind:style="{ 'transform': 'rotate('+rotate+'deg) scale('+scale+')', 'background-color': 'white' }">
            <template v-for="(obj,i) in circles">
                <template v-for="(row,idx) in obj[3]">
                    <text v-bind:x="850 - (obj[0] * 10 * 40 +40) + row[2]" v-bind:y="idx * 25 +21" 
                             font-size="20" stroke="black" text-anchor="start"  stroke-width="0.5" >{{idx+obj[1]}}</text>
                    <text v-bind:x="850 - (obj[0] * 10 * 40)     + row[2]" v-bind:y="idx * 25 +21" 
                             font-size="20" stroke="black" text-anchor="start"  stroke-width="0.5" >{{row[0]}}</text>
                    <template v-for="no in row[1] - row[0] + 1">
                        <circle r=10 v-bind:cx="550 - (obj[0] * no * 15) - row[2]"  v-bind:cy="idx * 25 + 15" 
                                    v-on:click="circleClick(i, idx, no)" 
                                   v-bind:class="{'active': circles[i][3][idx][3][no]}"></circle>
                    </template>
                    <text v-bind:x="550 - (1 * 30) + 25 - row[2]" v-bind:y="idx * 25 +21" 
                            font-size="20" stroke="black" text-anchor="start"  stroke-width="0.5" >{{row[1]}}</text>
                </template>
            </template>
        </svg>
        
        <div>
            <h3>回転</h3>
            <p>{{ rotate }}</p>
            <input type="range" max="360" step="90" v-model="rotate">
            <h3>拡大・縮小</h3>
            <p>{{ scale }}</p>
            <input type="range" min="0.5" max="1.5" step="0.1" v-model="scale">
        </div>
    </div>
    
    <script>
        new Vue({
            el: "#app",
        
            data: function(){
                /*
                 obj[0]     obj[1]      obj[2]     obj[3]      row[0]     row[1]    row[2]   row[3]
                [エリアNo, 開始行番号, 終了行番号, 
                                  列番号達[開始番号, 終了番号, X座標調整値, 各種席達[状態]]…
                ]
                */
                var circles = [
                    [ 2, 10,34,  [
                                     [101, 111, 4*15, []]
                                    ,[101, 111, 4*15, []]
                                    ,[101, 111, 4*15, []]

                                    ,[101, 112, 3*15, []]
                                    ,[101, 112, 3*15, []]
                                    ,[101, 112, 3*15, []]
                                    ,[101, 112, 3*15, []]
                                    ,[101, 112, 3*15, []]
                                    ,[101, 112, 3*15, []]

                                    ,[101, 113, 2*15, []]
                                    ,[101, 113, 2*15, []]
                                    ,[101, 113, 2*15, []]
                                    ,[101, 113, 2*15, []]
                                    ,[101, 113, 2*15, []]
                                    ,[101, 113, 2*15, []]

                                    ,[101, 114, 1*15, []]
                                    ,[101, 114, 1*15, []]
                                    ,[101, 114, 1*15, []]
                                    ,[101, 114, 1*15, []]
                                    ,[101, 114, 1*15, []]
                                    ,[101, 114, 1*15, []]

                                    ,[101, 115, 0,      []]
                                    ,[101, 115, 0,      []]
                                    ,[101, 115, 0,      []]
                                    ,[101, 115, 0,      []]
                                 ] 
                    ]
                ];

                // row[3]の配列を初期化 円に紐づく必要なデータを管理
                for(var i = 0; i < circles.length; i++) {
                    var obj = circles[i];
                    for(var idx = 0; idx < obj[3].length; idx++) {
                        for(var idx2 = 0; idx2 <= obj[3][idx][1] - obj[3][idx][0] + 1; idx2++) {
                            (obj[3][idx][3]).push(false);
                        }
                    }
                }

                return {
                    circles : circles,
                    rotate: 0,
                    scale: 1
                }
            }
            , methods : {
                circleClick : function (i, idx, no) {
                    console.log("circleClick");
                    //this.circles[i][3][idx][3][no] = !this.circles[i][3][idx][3][no];
                    this.$set(this.circles[i][3][idx][3], no, !this.circles[i][3][idx][3][no]);
                }
            }
        })
    </script>
</body>
</html>



・検索キーワード:  SVG, vue.js

戻る  マイリストへ追加