3D标签

动态实现3D标签,

主要代码:

//
//  XLMatrix.h
//  XLSphereView
//
//  Created by 史晶晶 on 16/4/4.
//  Copyright © 2016年 xiaolong. All rights reserved.
//

#ifndef XLMatrix_h
#define XLMatrix_h

#import "XLPoint.h"

struct XLMatrix {
    NSInteger column;
    NSInteger row;
    CGFloat matrix[4][4];
};

typedef struct XLMatrix XLMatrix;

static XLMatrix XLMatrixMake(NSInteger column, NSInteger row) {
    XLMatrix matrix;
    matrix.column = column;
    matrix.row = row;
    for(NSInteger i = 0; i < column; i++){
        for(NSInteger j = 0; j < row; j++){
            matrix.matrix[i][j] = 0;
        }
    }

    return matrix;
}

static XLMatrix XLMatrixMakeFromArray(NSInteger column, NSInteger row, CGFloat *data) {
    XLMatrix matrix = XLMatrixMake(column, row);
    for (int i = 0; i < column; i ++) {
        CGFloat *t = data + (i * row);
        for (int j = 0; j < row; j++) {
            matrix.matrix[i][j] = *(t + j);
        }
    }
    return matrix;
}

static XLMatrix XLMatrixMutiply(XLMatrix a, XLMatrix b) {
    XLMatrix result = XLMatrixMake(a.column, b.row);
    for(NSInteger i = 0; i < a.column; i ++){
        for(NSInteger j = 0; j < b.row; j ++){
            for(NSInteger k = 0; k < a.row; k++){
                result.matrix[i][j] += a.matrix[i][k] * b.matrix[k][j];
            }
        }
    }
    return result;
}

static XLPoint XLPointMakeRotation(XLPoint point, XLPoint direction, CGFloat angle) {
    //    CGFloat temp1[4] = {direction.x, direction.y, direction.z, 1};
    //    XLMatrix directionM = XLMatrixMakeFromArray(1, 4, temp1);
    if (angle == 0) {
        return point;
    }

    CGFloat temp2[1][4] = {point.x, point.y, point.z, 1};
    //    XLMatrix pointM = XLMatrixMakeFromArray(1, 4, *temp2);

    XLMatrix result = XLMatrixMakeFromArray(1, 4, *temp2);

    if (direction.z * direction.z + direction.y * direction.y != 0) {
        CGFloat cos1 = direction.z / sqrt(direction.z * direction.z + direction.y * direction.y);
        CGFloat sin1 = direction.y / sqrt(direction.z * direction.z + direction.y * direction.y);
        CGFloat t1[4][4] = {{1, 0, 0, 0}, {0, cos1, sin1, 0}, {0, -sin1, cos1, 0}, {0, 0, 0, 1}};
        XLMatrix m1 = XLMatrixMakeFromArray(4, 4, *t1);
        result = XLMatrixMutiply(result, m1);
    }

    if (direction.x * direction.x + direction.y * direction.y + direction.z * direction.z != 0) {
        CGFloat cos2 = sqrt(direction.y * direction.y + direction.z * direction.z) / sqrt(direction.x * direction.x + direction.y * direction.y + direction.z * direction.z);
        CGFloat sin2 = -direction.x / sqrt(direction.x * direction.x + direction.y * direction.y + direction.z * direction.z);
        CGFloat t2[4][4] = {{cos2, 0, -sin2, 0}, {0, 1, 0, 0}, {sin2, 0, cos2, 0}, {0, 0, 0, 1}};
        XLMatrix m2 = XLMatrixMakeFromArray(4, 4, *t2);
        result = XLMatrixMutiply(result, m2);
    }

    CGFloat cos3 = cos(angle);
    CGFloat sin3 = sin(angle);
    CGFloat t3[4][4] = {{cos3, sin3, 0, 0}, {-sin3, cos3, 0, 0}, {0, 0, 1, 0}, {0, 0, 0, 1}};
    XLMatrix m3 = XLMatrixMakeFromArray(4, 4, *t3);
    result = XLMatrixMutiply(result, m3);

    if (direction.x * direction.x + direction.y * direction.y + direction.z * direction.z != 0) {
        CGFloat cos2 = sqrt(direction.y * direction.y + direction.z * direction.z) / sqrt(direction.x * direction.x + direction.y * direction.y + direction.z * direction.z);
        CGFloat sin2 = -direction.x / sqrt(direction.x * direction.x + direction.y * direction.y + direction.z * direction.z);
        CGFloat t2_[4][4] = {{cos2, 0, sin2, 0}, {0, 1, 0, 0}, {-sin2, 0, cos2, 0}, {0, 0, 0, 1}};
        XLMatrix m2_ = XLMatrixMakeFromArray(4, 4, *t2_);
        result = XLMatrixMutiply(result, m2_);
    }

    if (direction.z * direction.z + direction.y * direction.y != 0) {
        CGFloat cos1 = direction.z / sqrt(direction.z * direction.z + direction.y * direction.y);
        CGFloat sin1 = direction.y / sqrt(direction.z * direction.z + direction.y * direction.y);
        CGFloat t1_[4][4] = {{1, 0, 0, 0}, {0, cos1, -sin1, 0}, {0, sin1, cos1, 0}, {0, 0, 0, 1}};
        XLMatrix m1_ = XLMatrixMakeFromArray(4, 4, *t1_);
        result = XLMatrixMutiply(result, m1_);
    }

    XLPoint resultPoint = XLPointMake(result.matrix[0][0], result.matrix[0][1], result.matrix[0][2]);

    return resultPoint;
}

#endif /* XLMatrix_h */
 1 //
 2 //  ViewController.m
 3 //  XLSphereView
 4 //
 5 //  Created by 史晶晶 on 16/4/4.
 6 //  Copyright © 2016年 xiaolong. All rights reserved.
 7 //
 8
 9 #import "ViewController.h"
10 #import "XLSphereView.h"
11
12 @interface ViewController ()
13
14 @property (nonatomic,strong) XLSphereView *sphereView;
15
16 @end
17
18 @implementation ViewController
19
20 - (void)viewDidLoad {
21     [super viewDidLoad];
22
23     self.view.backgroundColor = [UIColor blackColor];
24     CGFloat sphereViewW = self.view.frame.size.width - 30 * 2;
25     CGFloat sphereViewH = sphereViewW;
26     _sphereView = [[XLSphereView alloc] initWithFrame:CGRectMake(30, 100, sphereViewW, sphereViewH)];
27     NSMutableArray *array = [[NSMutableArray alloc] initWithCapacity:0];
28     for (NSInteger i = 0; i < 40; i ++) {
29         UIButton *btn = [UIButton buttonWithType:UIButtonTypeSystem];
30         [btn setTitle:[NSString stringWithFormat:@"晶%ld", i] forState:UIControlStateNormal];
31         btn.titleLabel.font = [UIFont systemFontOfSize: 7.0];
32         btn.backgroundColor = [UIColor colorWithRed:arc4random_uniform(255)/255. green:arc4random_uniform(255)/255. blue:arc4random_uniform(255)/255. alpha:1.];
33         [btn setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
34         btn.titleLabel.font = [UIFont systemFontOfSize:24.];
35         btn.frame = CGRectMake(0, 0, 60, 30);
36         btn.layer.cornerRadius = 3;
37         btn.clipsToBounds = YES;
38         [btn addTarget:self action:@selector(buttonPressed:) forControlEvents:UIControlEventTouchUpInside];
39         [array addObject:btn];
40         [_sphereView addSubview:btn];
41     }
42     [_sphereView setItems:array];
43     [self.view addSubview:_sphereView];
44
45 }
46
47 - (void)buttonPressed:(UIButton *)btn
48 {
49     [_sphereView timerStop];
50
51     [UIView animateWithDuration:0.3 animations:^{
52         btn.transform = CGAffineTransformMakeScale(2., 2.);
53     } completion:^(BOOL finished) {
54         [UIView animateWithDuration:0.3 animations:^{
55             btn.transform = CGAffineTransformMakeScale(1., 1.);
56         } completion:^(BOOL finished) {
57             [_sphereView timerStart];
58         }];
59     }];
60 }
61
62 - (void)didReceiveMemoryWarning {
63     [super didReceiveMemoryWarning];
64     // Dispose of any resources that can be recreated.
65 }
66
67 @end

demo截图

下载地址:

https://github.com/henusjj/Label-effect

时间: 2024-08-06 19:29:22

3D标签的相关文章

怎样在自己的Blog中展现3D标签云效果

在用Wordpress创建自己的Blog后,怎样在自己的Blog中安装绚丽的标签3D云呢?本文将带怎样用插件来实现这个3D标签云的效果. 我用的插件为:3D TagCloud 步骤一:打开Wordpress的编辑页面,选择插件,如下图所示:(http://localhost/wpc/wp-admin/) 步骤二:安装完成之后,启动这个插件. 步骤三:设置配置参数(3D Tag Cloud),详细参数如下图所示: 步骤四:进入Blog文章页面,看实际效果如下图所示:(http://localhos

[HTML5]3D标签云

index.html <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>3D标签云</title> <link rel="stylesheet" type="text/css" href="http://webapplee-

css3实践之摩天轮式图片轮播+3D正方体+3D标签云(perspective、transform-style、perspective-origin)

本文主要通过摩天轮式图片轮播的例子来讲解与css3 3D有关的一些属性. demo预览: 摩天轮式图片轮播(貌似没兼容360 最好用chrome) 3D正方体(chrome only) 3D标签云(css3版 chrome only) 3D标签云(js版 chrome only) 前文回顾 在前面的文章css3实践之图片轮播(Transform,Transition和Animation)中我们简单地了解了css3旗下的transform.transition以及animation.回顾一下,tr

纯JS实现的3D标签云,不依赖任何第三方库,支持移动页面

<span style="font-family: Arial, Helvetica, sans-serif;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></span> <html xmlns="

SP2010 3D标签云Web部件--酷炫效果,极力推荐!!

SP2010 3D标签云Web部件--酷炫效果,极力推荐!! 项目描述 一个简单的基于Flash的3D标签云Web部件,SP Server 2010使用.建立在内置标签云Web部件和WordPress的Cumulus插件基础上. 它和标准标签云有相同的设置,但是以美妙的3D云效果呈现. 请注意,这个Web部件依靠SP标签功能,只能在SP Server 2010上可用,所以在SP Foundation 2010上是不可用的. wsp下载地址 http://download.csdn.net/det

解析3D标签云,其实很简单

声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢! 最近开始用canvas搞3D了,搞得也是简单的东西,就是球体转圈.做出来后,突然想起以前看过的3D标签云,在以前觉得真心狂拽酷炫叼啊,当时也确实不知道怎么在平面上模拟3D,所以也就没去搞了.现在刚好用了canvas搞3D,也发现,好像3D标签云也差不多,然后就写了一下. 具体怎么做呢,先说一下原理,3D标签云就是做一个球面,然后再球面上取均匀分布的点,把点坐标赋给标签,再根据抽象出来的Z轴大小来改变标签的字体大小,透明度,做出立体感觉

jquery 3D 标签云

http://www.gbin1.com/technology/jquerynews/20111205tagcloudbyjquery/index.html 相关选项     zoom: 90 初始的缩放度     min_zoom: 25     max_zoom: 120     zoom_factor: 2 - 鼠标滚轮的缩放速度     rotate_factor: -0.45 - 鼠标移动时球体旋转的数量.正数将反向旋转     fps: 10 - 定义每秒动画更新的次数     ce

让octopress支持标签(tag)

安装插件 octopress-tag-cloud 在侧边栏显示标签云 使用 参考 安装插件 目前有多个插件实现标签功能.其中一个是octopress官方推荐版本,据说不支持多标签.还有些人用的是"3D"标签云,风格上我不是太喜欢.最终选用的是robbyedwards的一组插件.这组插件有两个,一个是octopress-tag-pages,用于生成标签页面,另一个是octopress-tag-cloud,用于显示实现标签云功能. ### octopress-tag-pages 首先安装o

rotate 3d II

第二篇来学习如何用canvas打造3d标签云. demo -> 3d标签云 参考资料: 解析3D标签云,其实很简单 rotate 3d I 前面我们已经构造了一个三维空间旋转的模板(其实Ball类初始化时有bug...),如何构造一个标签云?思考ing... 其实就是构造一个球体,标签放在球体上,然后每个标签旋转即可.也就是说,我们可以把每个粒子当做是一个标签. 怎样构造球体?前面一篇中我用确定z参数,然后枚举x获取y的方法获得球面坐标,其实有更好的方法: 不懂数学,试了下觉得角度的取值有两种方