├── .gitignore
├── LICENSE
├── README.md
├── package-lock.json
├── package.json
└── src
    └── TagsBall.vue


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 yanthems
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # VueTagsBall
 2 | 
 3 | ## Description
 4 | create a 3d tags ball for vue2
 5 | 
 6 | ## Demo
 7 | 
 8 | [demo](https://test.yanthems.com/)
 9 | 
10 | ## Install
11 | ```
12 | npm install --save vue-tags-ball
13 | ```
14 | ## Usage
15 | ```javascript
16 | //Gobal method
17 | import TagsBall from 'vue-tags-ball'
18 | Vue.use(TagsBall)
19 | 
20 | //Component method
21 | import TagsBall from 'vue-tags-ball'
22 | //...
23 | components: {
24 |     "tags-ball":TagsBall
25 |   },
26 | ```
27 | ## Example
28 | ```html
29 | <tags-ball v-bind:style='{"border":"2px solid black"}' :width='200' :tags='tags'/>
30 | ```
31 | `tags` is a String[],like `{"tag1","tag2","tag3"}`.and you can bind your own style.
32 | 
33 | Warning: just watching the `tags` and `stop`,other props only init.
34 | 
35 | ## Props
36 | | Property | Type    | Description                    | Default       |
37 | | -------- | ------- | ------------------------------ | ------------- |
38 | | tags     | Array   | all the tag                    | []            |
39 | | stop     | Boolean | stop the animation             | false         |
40 | | width    | Number  | init the canvas widht          | 200           |
41 | | height   | Number  | init the canvas height         | 200           |
42 | | radius   | Number  | init the ball radius           | 100           |
43 | | font     | String  | init the tag's label font      | "24px monaco" |
44 | | fontMax  | Number  | init the tag's label max width | 60            |
45 | | color    | String  | init the label's color         | "#fc8457"     |
46 | 


--------------------------------------------------------------------------------
/package-lock.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-tags-ball",
 3 |   "version": "1.2.0",
 4 |   "lockfileVersion": 1,
 5 |   "requires": true,
 6 |   "dependencies": {
 7 |     "color": {
 8 |       "version": "3.0.0",
 9 |       "resolved": "https://registry.npmjs.org/color/-/color-3.0.0.tgz",
10 |       "integrity": "sha512-jCpd5+s0s0t7p3pHQKpnJ0TpQKKdleP71LWcA0aqiljpiuAkOSUFN/dyH8ZwF0hRmFlrIuRhufds1QyEP9EB+w==",
11 |       "requires": {
12 |         "color-convert": "1.9.2",
13 |         "color-string": "1.5.3"
14 |       }
15 |     },
16 |     "color-convert": {
17 |       "version": "1.9.2",
18 |       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.2.tgz",
19 |       "integrity": "sha512-3NUJZdhMhcdPn8vJ9v2UQJoH0qqoGUkYTgFEPZaPjEtwmmKUfNV46zZmgB2M5M4DCEQHMaCfWHCxiBflLm04Tg==",
20 |       "requires": {
21 |         "color-name": "1.1.1"
22 |       }
23 |     },
24 |     "color-name": {
25 |       "version": "1.1.1",
26 |       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.1.tgz",
27 |       "integrity": "sha1-SxQVMEz1ACjqgWQ2Q72C6gWANok="
28 |     },
29 |     "color-string": {
30 |       "version": "1.5.3",
31 |       "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.5.3.tgz",
32 |       "integrity": "sha512-dC2C5qeWoYkxki5UAXapdjqO672AM4vZuPGRQfO8b5HKuKGBbKWpITyDYN7TOFKvRW7kOgAn3746clDBMDJyQw==",
33 |       "requires": {
34 |         "color-name": "1.1.1",
35 |         "simple-swizzle": "0.2.2"
36 |       }
37 |     },
38 |     "is-arrayish": {
39 |       "version": "0.3.2",
40 |       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
41 |       "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
42 |     },
43 |     "simple-swizzle": {
44 |       "version": "0.2.2",
45 |       "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
46 |       "integrity": "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=",
47 |       "requires": {
48 |         "is-arrayish": "0.3.2"
49 |       }
50 |     }
51 |   }
52 | }
53 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-tags-ball",
 3 |   "version": "1.2.0",
 4 |   "description": "a 3d tags ball for vue2",
 5 |   "main": "src/TagsBall.vue",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" "
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/yanthems/vue-tags-ball.git"
12 |   },
13 |   "keywords": [
14 |     "vue",
15 |     "3d",
16 |     "tags"
17 |   ],
18 |   "author": "yanthems@gmail.com",
19 |   "license": "MIT",
20 |   "bugs": {
21 |     "url": "https://github.com/yanthems/vue-tags-ball/issues"
22 |   },
23 |   "homepage": "https://github.com/yanthems/vue-tags-ball#readme",
24 |   "dependencies": {
25 |     "color": "^3.0.0"
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/src/TagsBall.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <canvas :width="width" :height="height" id="tags_ball">
  3 |   您的浏览器暂时不支持canvas
  4 | </canvas>
  5 | </template>
  6 | 
  7 | <style scoped>
  8 | #tags_ball {
  9 |   border-radius: 20px;
 10 |   border: 2px solid #66ccff;
 11 | }
 12 | </style>
 13 | 
 14 | <script>
 15 | var Color = require('color');
 16 | let Animation = function() {
 17 |   this.running = true;
 18 | };
 19 | Animation.prototype = {
 20 |   stop: function() {},
 21 |   start: function() {}
 22 | };
 23 | export default {
 24 |   name: "tags-ball",
 25 |   install:function(vue){
 26 |     vue.component(this.name,this)
 27 |   },
 28 |   data() {
 29 |     return {
 30 |       animation: new Animation()
 31 |     };
 32 |   },
 33 |   props: {
 34 |     stop: {
 35 |       type: Boolean,
 36 |       default: false
 37 |     },
 38 |     tags: {
 39 |       type: Array,
 40 |       default: []
 41 |     },
 42 |     width: {
 43 |       type: Number,
 44 |       default: 200
 45 |     },
 46 |     height: {
 47 |       type: Number,
 48 |       default: 200
 49 |     },
 50 |     radius: {
 51 |       type: Number,
 52 |       default: 100
 53 |     },
 54 |     fontMax:{
 55 |       type:Number,
 56 |       default:60
 57 |     },
 58 |     font: {
 59 |       type: String,
 60 |       default: "24px monaco"
 61 |     },
 62 |     color:{
 63 |       tupe:String,
 64 |       default:"#fc8457"
 65 |     }
 66 |   },
 67 |   methods: {
 68 |     init_ball: function() {
 69 |       let canvas = this.$el;
 70 |       let tags = this.tags;
 71 |       let Radius = this.radius;
 72 |       let fontMax=this.fontMax
 73 |       let color=Color(this.color)
 74 |       let ctx = canvas.getContext("2d");
 75 |       ctx.font = this.font;
 76 | 
 77 |       let angleX = Math.PI / 100 / 2;
 78 |       let angleY = Math.PI / 100 / 2;
 79 | 
 80 |       const hx = canvas.width / 2;
 81 |       const hy = canvas.height / 2;
 82 | 
 83 |       let count = tags.length;
 84 |       if (count == 0) {
 85 |         return;
 86 |       }
 87 |       canvas.addEventListener("mousemove", function(event) {
 88 |         let x = event.layerX - hx;
 89 |         let y = event.layerY - hy;
 90 |         // console.log("x y =",x,y)
 91 |         angleY = -x * 0.0001;
 92 |         angleX = -y * 0.0001;
 93 |       });
 94 | 
 95 |       let points = [];
 96 |       let ve3 = function(x, y, z) {
 97 |         this.x = x;
 98 |         this.y = y;
 99 |         this.z = z;
100 |       };
101 |       ve3.prototype={
102 |          getm:function() {
103 |           return Math.sqrt(
104 |             Math.pow(this.x, 2) + Math.pow(this.y, 2) + Math.pow(this.z, 2)
105 |           );
106 |         },
107 |         resize:function(R){
108 |           let pm = this.getm();
109 |           this.x = this.x * (R / pm);
110 |           this.y = this.y * (R / pm);
111 |           this.z = this.z * (R / pm);
112 |           return this
113 |         }
114 |       }
115 |       function create() {
116 |         //golden cut 
117 |         //ref: https://zhuanlan.zhihu.com/p/25988652
118 |         //soucre: https://stackoverflow.com/questions/9600801/evenly-distributing-n-points-on-a-sphere/26127012#26127012
119 |         const gold=(Math.sqrt(5.0)-1)/2
120 |         for(let i=1;i<=count;i++){
121 |           let z=(2*i-1)/count-1
122 |           let x=Math.sqrt(1-Math.pow(z,2))*Math.cos(2*Math.PI*i*gold)
123 |           let y=Math.sqrt(1-Math.pow(z,2))*Math.sin(2*Math.PI*i*gold)
124 |           let p=new ve3(x,y,z)
125 |           points.push(p.resize(Radius))
126 |           // console.log(p.x,p.y,p.z)
127 |         }
128 |       }
129 |       create();
130 | 
131 |       let labels = [];
132 |       let label = function(x, y, z, str, width, max) {
133 |         this.x = x;
134 |         this.y = y;
135 |         this.z = z;
136 | 
137 |         this.str = str;
138 |         this.width = width;
139 |         this.max = max;
140 |       };
141 | 
142 |       label.prototype = {
143 |         paint: function() {
144 |           ctx.save();
145 |           let alpha = (this.z + Radius) / (2 * Radius);
146 |           // ctx.fillStyle = "rgba("+color+ (alpha + 0.5) + ")";
147 |           ctx.fillStyle=color.alpha(alpha+0.5).toString()
148 |           ctx.fillText(
149 |             this.str,
150 |             hx + this.x - Math.min(this.max, this.width) / 2,
151 |             hy + this.y,
152 |             this.max
153 |           );
154 |           ctx.restore();
155 |         }
156 |       };
157 |       function rotateX() {
158 |         let cos = Math.cos(angleX);
159 |         let sin = Math.sin(angleX);
160 |         for (let i = 0; i < labels.length; i++) {
161 |           let y1 = labels[i].y * cos - labels[i].z * sin;
162 |           let z1 = labels[i].z * cos + labels[i].y * sin;
163 |           labels[i].y = y1;
164 |           labels[i].z = z1;
165 |         }
166 |       }
167 | 
168 |       function rotateY() {
169 |         let cos = Math.cos(angleY);
170 |         let sin = Math.sin(angleY);
171 |         for (let i = 0; i < labels.length; i++) {
172 |           let x1 = labels[i].x * cos - labels[i].z * sin;
173 |           let z1 = labels[i].z * cos + labels[i].x * sin;
174 |           labels[i].x = x1;
175 |           labels[i].z = z1;
176 |         }
177 |       }
178 | 
179 |       function rotateZ() {
180 |         let cos = Math.cos(angleY);
181 |         let sin = Math.sin(angleY);
182 |         for (let i = 0; i < labels.length; i++) {
183 |           let x1 = labels[i].x * cos - labels[i].y * sin;
184 |           let y1 = labels[i].y * cos + labels[i].x * sin;
185 |           labels[i].x = x1;
186 |           labels[i].y = y1;
187 |         }
188 |       }
189 | 
190 |       let init = function() {
191 |         for (let i = 0; i < points.length; i++) {
192 |           let t = ctx.measureText(tags[i]);
193 |           labels.push(
194 |             new label(
195 |               points[i].x,
196 |               points[i].y,
197 |               points[i].z,
198 |               tags[i],
199 |               t.width,
200 |               fontMax
201 |             )
202 |           );
203 |         }
204 |       };
205 |       init();
206 | 
207 |       let animation = this.animation;
208 |       let animate = function animate() {
209 |         ctx.clearRect(0, 0, canvas.width, canvas.height);
210 |         rotateX();
211 |         rotateY();
212 |         rotateZ();
213 |         for (let i = 0; i < labels.length; i++) {
214 |           labels[i].paint();
215 |         }
216 |         if (animation.running) {
217 |           requestAnimationFrame(animate);
218 |         }
219 |       };
220 | 
221 |       this.animation.start = function() {
222 |         animation.running = true;
223 |         animate();
224 |       };
225 |       this.animation.stop = function() {
226 |         animation.running = false;
227 |       };
228 |       this.animation.start();
229 |     }
230 |   },
231 | 
232 |   mounted: function() {
233 |     this.init_ball();
234 |   },
235 |   computed: {
236 |     // tags:function(){
237 |     // }
238 |   },
239 |   watch: {
240 |     tags: function(t) {
241 |       this.init_ball();
242 |     },
243 |     stop: function(t) {
244 |       if (t) {
245 |         this.animation.stop();
246 |       } else {
247 |         this.animation.start();
248 |       }
249 |     }
250 |   }
251 | };
252 | </script>
253 | 


--------------------------------------------------------------------------------