MATLAB竟也能制作3D相册?教你用MATLAB制作立体动态相册

效果

在这里插入图片描述
在这里插入图片描述

教程部分

1 图片导入与大小重设

需要有一个名为album的文件夹和当前m文件在同一文件夹,另外ablum文件夹内至少要有一张jpg格式图片

path='.\album\';%文件夹名称
files=dir(fullfile(path,'*.jpg')); 
picNum=size(files,1);

%遍历路径下每一幅图像
for i=1:picNum
   fileName=strcat(path,files(i).name); 
   img=imread(fileName);
   img=imresize(img,[120,120]);
   imgSet{i}=img;
end

我们注意到,这里用了一次imresize将图片变为120x120大小,这里重设大小有三个作用:

  • 将不是方形的图片变为方形
  • 将图像设置固定大小,方便构造网格放置图片
  • 120x120的大小大约是能让图片表示清晰为前提下最小的大小,图片太大的话运行会卡,太小的话不清晰

2 fig axes设置

% fig axes设置
fig=figure('units','pixels','position',[50 50 600 600],...
                       'Numbertitle','off','resize','off',...
                       'name','album3d','menubar','none');
ax=axes('parent',fig,'position',[-0.5 -0.5 2 2],...
   'XLim', [-6 6],...
   'YLim', [-6 6],...
   'ZLim', [-6 6],...
   'Visible','on',...
   'XTick',[], ...
   'YTick',[],...
   'Color',[0 0 0],...
   'DataAspectRatioMode','manual',...
   'CameraPositionMode','manual');
hold(ax,'on')
ax.CameraPosition=[5 5 5];

大部分设置大家都能看懂,这里讲解一下一些比较少见的设置:

2.1 为什么 axes的’position’属性不设置[0 0 1 1]?

因为是3D坐标轴,设置为[0 0 1 1]后旋转起来效果是这样的,所以我们axes要设置的比figure大一圈:

在这里插入图片描述

2.2 为什么要设置CameraPositionMode这一奇怪的属性?

因为我们后期要频繁改变CameraPosition这一属性,而CameraPositionMode设置为manual可以让视角完全按照CameraPosition的数值来调整,至于为什么要调整视角呢?
,
当然是因为如果对图像位置数据进行处理数据量会贼大,因此我们不妨直接转动axes视角而非转动图片。

3 绘制图形句柄

就是绘制小型立方体,中型立方体和大型立方体,其中鼠标移动到中型立方体中心时中型立方体变成大型立方体,这个可以靠设置图形对象的XData,YData,ZData数值来改变

3.1 构造网格

由于surf曲面图可以将图像贴在上面,还可以设置透明度,我们决定用surf函数来绘制,要贴图首先要将曲面绘制出来,就要先构造曲面网格:

% 用于绘制图片的网格
[XMesh,YMesh]=meshgrid(linspace(-1,1,120),linspace(-1,1,120));
ZMesh=ones(120,120);
3.2 绘制小型立方体
% 绘制图片立方体
surfPic(1)=surf(XMesh,YMesh,ZMesh,'CData',imgSet{mod(0,picNum)+1},'EdgeColor','none','FaceColor','interp');
surfPic(2)=surf(XMesh,YMesh(end:-1:1,:),-ZMesh,'CData',imgSet{mod(1,picNum)+1},'EdgeColor','none','FaceColor','interp');
surfPic(3)=surf(ZMesh,XMesh,YMesh(end:-1:1,:),'CData',imgSet{mod(2,picNum)+1},'EdgeColor','none','FaceColor','interp');
surfPic(4)=surf(XMesh,ZMesh,YMesh(end:-1:1,:),'CData',imgSet{mod(3,picNum)+1},'EdgeColor','none','FaceColor','interp');
surfPic(5)=surf(-ZMesh,XMesh,YMesh(end:-1:1,:),'CData',imgSet{mod(4,picNum)+1},'EdgeColor','none','FaceColor','interp');
surfPic(6)=surf(XMesh,-ZMesh,YMesh(end:-1:1,:),'CData',imgSet{mod(5,picNum)+1},'EdgeColor','none','FaceColor','interp');

在这里插入图片描述

3.3 绘制中型立方体

有了小型立方体,中型的绘制起来就简单了起来,甚至可以用一个for循环解决,只需要循环提取小型立方体的XData,YData,ZData数据后乘以1.5绘制图像,并设置透明度即可:

% 依靠小立方体数据绘制中等立方体
for i=1:6
    surfPicA(i)=surf(surfPic(i).XData.*1.5,surfPic(i).YData.*1.5,surfPic(i).ZData.*1.5,...
        'CData',surfPic(i).CData,'EdgeColor','none','FaceColor','interp','FaceAlpha',0.7);  
end

在这里插入图片描述

3.4 大型立方体参数设置

大型立方体参数设置时就没那么简单,如果直接乘以2.5,图片与图片之间会没有缝隙,因此我们XData,YData,ZData数据虽然都要变大,但是要乘以不一样的数值,而且各个方向上乘的数值不同,因此我们可以事先设立一个矩阵,用来存储其参数:

% 用来调整放大比例的矩阵
resizeMat=[2 2 2.5;2 2 2.5;2.5 2 2;
           2 2.5 2;2.5 2 2;2 2.5 2];

想直接画大型正方形可以试试如下代码:

% 最大图片绘制       
% for i=1:6
%     surfPicB(i)=surf(surfPic(i).XData.*resizeMat(i,1),...
%                      surfPic(i).YData.*resizeMat(i,2),...
%                      surfPic(i).ZData.*resizeMat(i,3),...
%                      'CData',surfPic(i).CData,'EdgeColor',...
%                      'none','FaceColor','interp','FaceAlpha',0.7);  
% end    

4 立方体旋转

我们只需要设置一个timer函数不断调整CameraPosition即可:

fps=40;theta=0;
rotateTimer=timer('ExecutionMode', 'FixedRate', 'Period',1/fps, 'TimerFcn', @rotateCube);
start(rotateTimer)

    function rotateCube(~,~)
        theta=theta+0.02;
        ax.CameraPosition=[cos(theta)*5*sqrt(2),sin(theta)*5*sqrt(2),5];
    end

在这里插入图片描述

5 获取鼠标与中心点的距离

本来想直接在timer调用的函数里写get(fig,‘CurrentPoint’);来获得鼠标当前位置的,但发现这样写只有鼠标点击窗口才会有反应,并不是鼠标移动就会有反应,因此我们再构造一个WindowButtonMotionFcn回调,!!!这一部分代码要写在上一步代码的前面!!!

lastDis=300;
preDis=300;
set(fig,'WindowButtonMotionFcn',@move2center)    
    function move2center(~,~)
        xy=get(fig,'CurrentPoint');
        preDis=sqrt(sum((xy-[300,300]).^2));
    end

preDis就是鼠标到图片中心的位置,我为什么要设置一个lastDis呢,因为每次移动鼠标都更新图像实在太卡了,因此我们要加一个判定,当且仅当以下两种情况更新图片大小

  • 之前鼠标距离中心>=150,现在<150
  • 之前鼠标距离中心<150,现在>=150

6 鼠标移动到fig中心时更新图片

将之前的rotateCube函数改成这样:

function rotateCube(~,~)
        theta=theta+0.02;
        ax.CameraPosition=[cos(theta)*5*sqrt(2),sin(theta)*5*sqrt(2),5];
        if (~all([preDis lastDis]<150))&&any([preDis lastDis]<150)
            for ii=1:6
                if preDis<150
                    surfPicA(ii).XData=surfPic(ii).XData.*resizeMat(ii,1);
                    surfPicA(ii).YData=surfPic(ii).YData.*resizeMat(ii,2);
                    surfPicA(ii).ZData=surfPic(ii).ZData.*resizeMat(ii,3);
                else
                    surfPicA(ii).XData=surfPic(ii).XData.*1.5;
                    surfPicA(ii).YData=surfPic(ii).YData.*1.5;
                    surfPicA(ii).ZData=surfPic(ii).ZData.*1.5;
                end
            end
        end
        lastDis=preDis;
    end

其中:

(~all([preDis lastDis]<150))&&any([preDis lastDis]<150)

是用来判断上一次鼠标位置和当前鼠标位置是否只有一个距离中心<150

另:

for 循环中使用else来判断应该绘制大图片还是中等图片

完整代码

function album3d
path='.\album\';%文件夹名称
files=dir(fullfile(path,'*.jpg')); 
picNum=size(files,1);

%遍历路径下每一幅图像
for i=1:picNum
   fileName=strcat(path,files(i).name); 
   img=imread(fileName);
   img=imresize(img,[120,120]);
   imgSet{i}=img;
end

% fig axes设置
fig=figure('units','pixels','position',[50 50 600 600],...
                       'Numbertitle','off','resize','off',...
                       'name','album3d','menubar','none');
ax=axes('parent',fig,'position',[-0.5 -0.5 2 2],...
   'XLim', [-6 6],...
   'YLim', [-6 6],...
   'ZLim', [-6 6],...
   'Visible','on',...
   'XTick',[], ...
   'YTick',[],...
   'Color',[0 0 0],...
   'DataAspectRatioMode','manual',...
   'CameraPositionMode','manual');
hold(ax,'on')
ax.CameraPosition=[5 5 5];

% 用于绘制图片的网格
[XMesh,YMesh]=meshgrid(linspace(-1,1,120),linspace(-1,1,120));
ZMesh=ones(120,120);

% 绘制图片立方体
surfPic(1)=surf(XMesh,YMesh,ZMesh,'CData',imgSet{mod(0,picNum)+1},'EdgeColor','none','FaceColor','interp');
surfPic(2)=surf(XMesh,YMesh(end:-1:1,:),-ZMesh,'CData',imgSet{mod(1,picNum)+1},'EdgeColor','none','FaceColor','interp');
surfPic(3)=surf(ZMesh,XMesh,YMesh(end:-1:1,:),'CData',imgSet{mod(2,picNum)+1},'EdgeColor','none','FaceColor','interp');
surfPic(4)=surf(XMesh,ZMesh,YMesh(end:-1:1,:),'CData',imgSet{mod(3,picNum)+1},'EdgeColor','none','FaceColor','interp');
surfPic(5)=surf(-ZMesh,XMesh,YMesh(end:-1:1,:),'CData',imgSet{mod(4,picNum)+1},'EdgeColor','none','FaceColor','interp');
surfPic(6)=surf(XMesh,-ZMesh,YMesh(end:-1:1,:),'CData',imgSet{mod(5,picNum)+1},'EdgeColor','none','FaceColor','interp');

% 依靠小立方体数据绘制中等立方体
for i=1:6
    surfPicA(i)=surf(surfPic(i).XData.*1.5,surfPic(i).YData.*1.5,surfPic(i).ZData.*1.5,...
        'CData',surfPic(i).CData,'EdgeColor','none','FaceColor','interp','FaceAlpha',0.7);  
end

% 用来调整放大比例的矩阵
resizeMat=[2 2 2.5;2 2 2.5;2.5 2 2;
           2 2.5 2;2.5 2 2;2 2.5 2];

% 最大图片绘制       
% for i=1:6
%     surfPicB(i)=surf(surfPic(i).XData.*resizeMat(i,1),...
%                      surfPic(i).YData.*resizeMat(i,2),...
%                      surfPic(i).ZData.*resizeMat(i,3),...
%                      'CData',surfPic(i).CData,'EdgeColor',...
%                      'none','FaceColor','interp','FaceAlpha',0.7);  
% end     


lastDis=300;
preDis=300;
set(fig,'WindowButtonMotionFcn',@move2center)    
    function move2center(~,~)
        xy=get(fig,'CurrentPoint');
        preDis=sqrt(sum((xy-[300,300]).^2));
    end



fps=40;theta=0;
rotateTimer=timer('ExecutionMode', 'FixedRate', 'Period',1/fps, 'TimerFcn', @rotateCube);
start(rotateTimer)



    function rotateCube(~,~)
        theta=theta+0.02;
        ax.CameraPosition=[cos(theta)*5*sqrt(2),sin(theta)*5*sqrt(2),5];
        if (~all([preDis lastDis]<150))&&any([preDis lastDis]<150)
            for ii=1:6
                if preDis<150
                    surfPicA(ii).XData=surfPic(ii).XData.*resizeMat(ii,1);
                    surfPicA(ii).YData=surfPic(ii).YData.*resizeMat(ii,2);
                    surfPicA(ii).ZData=surfPic(ii).ZData.*resizeMat(ii,3);
                else
                    surfPicA(ii).XData=surfPic(ii).XData.*1.5;
                    surfPicA(ii).YData=surfPic(ii).YData.*1.5;
                    surfPicA(ii).ZData=surfPic(ii).ZData.*1.5;
                end
            end
        end
        lastDis=preDis;
    end




% 弃用方案:太卡
% set(fig,'WindowButtonMotionFcn',@move2center)    
%     function move2center(~,~)
%         xy=get(fig,'CurrentPoint');
%         dis=sum((xy-[300,300]).^2);
%         for ii=1:6
%             if dis<200
%                 surfPicA(ii).XData=surfPic(ii).XData.*resizeMat(ii,1);
%                 surfPicA(ii).YData=surfPic(ii).YData.*resizeMat(ii,2);
%                 surfPicA(ii).ZData=surfPic(ii).ZData.*resizeMat(ii,3);
%             else
%                 surfPicA(ii).XData=surfPic(ii).XData;
%                 surfPicA(ii).YData=surfPic(ii).YData;
%                 surfPicA(ii).ZData=surfPic(ii).ZData;
%             end    
%         end
%         
%         
%         
%     end

end
  • 155
    点赞
  • 528
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 46
    评论
纯CSS实现鼠标经过3D立体动态展示图片特效代码 @charset "utf-8"; *{ margin:0; padding:0; } body{ max-width: 100%; min-width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; background-size:100% 100%; position: absolute; margin-left: auto; margin-right: auto; } li{ list-style: none; } .box{ width:200px; height:200px; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; background-size:100% 100%; position: absolute; margin-left: 42%; margin-top: 22%; -webkit-transform-style:preserve-3d; -webkit-transform:rotateX(13deg); -webkit-animation:move 5s linear infinite; } .minbox{ width:100px; height:100px; position: absolute; left:50px; top:30px; -webkit-transform-style:preserve-3d; } .minbox li{ width:100px; height:100px; position: absolute; left:0; top:0; } .minbox li:nth-child(1){ background: url(img/01.png) no-repeat 0 0; -webkit-transform:translateZ(50px); } .minbox li:nth-child(2){ background: url(img/02.png) no-repeat 0 0; -webkit-transform:rotateX(180deg) translateZ(50px); } .minbox li:nth-child(3){ background: url(img/03.png) no-repeat 0 0; -webkit-transform:rotateX(-90deg) translateZ(50px); } .minbox li:nth-child(4){ background: url(img/04.png) no-repeat 0 0; -webkit-transform:rotateX(90deg) translateZ(50px); } .minbox li:nth-child(5){ background: url(img/05.png) no-repeat 0 0; -webkit-transform:rotateY(-90deg) translateZ(50px); } .minbox li:nth-child(6){ background: url(img/06.png) no-repeat 0 0; -webkit-transform:rotateY(90deg) translateZ(50px); } .maxbox li:nth-child(1){ background: url(img/1.png) no-repeat 0 0; -webkit-transform:translateZ(50px); } .maxbox li:nth-child(2){ background: url(img/2.png) no-repeat 0 0; -webkit-transform:translateZ(50px); } .maxbox li:nth-child(3){ background: url(img/3.png) no-repeat 0 0; -webkit-transform:rotateX(-90deg) translateZ(50px); } .maxbox li:nth-child(4){ background: url(img/4.png) no-repeat 0 0; -webkit-transform:rotateX(90deg) translateZ(50px); } .maxbox li:nth-child(5){ background: url(img/5.png) no-repeat 0 0; -webkit-transform:rotateY(-90deg) translateZ(50px); } .maxbox li:nth-child(6){ background: url(img/6.png) no-repeat 0 0; -webkit-transform:rotateY(90deg) translateZ(50px); } .maxbox{ width: 800px; height: 400px; position: absolute; left: 0; top: -20px; -webkit-transform-style: preserve-3d; } .maxbox li{ width: 200px; height: 200px; background: #fff; border:1px solid #ccc; position: absolute; left: 0; top: 0; opacity: 0.2; -webkit-transition:all 1s ease; } .maxbox li:nth-child(1){ -webkit-transform:translateZ(100px); } .maxbox li:nth-child(2){ -webkit-transform:rotateX(180deg) translateZ(100px); } .maxbox li:nth-child(3){ -webkit-transform:rotateX(-90deg) translateZ(100px); } .maxbox li:nth-child(4){ -webkit-transform:rotateX(90deg) translateZ(100px); } .maxbox li:nth-child(5){ -webkit-transform:rotateY(-90deg) translateZ(100px); } .maxbox li:nth-child(6){ -webkit-transform:rotateY(90deg) translateZ(100px); } .box:hover ol li:nth-child(1){ -webkit-transform:translateZ(300px); width: 400px; height: 400px; opacity: 0.8; left: -100px; top: -100px; } .box:hover ol li:nth-child(2){ -webkit-transform:rotateX(180deg) translateZ(300px); width: 400px; height: 400px; opacity: 0.8; left: -100px; top: -100px; } .box:hover ol li:nth-child(3){ -webkit-transform:rotateX(-90deg) translateZ(300px); width: 400px; height: 400px; opacity: 0.8; left: -100px; top: -100px; } .box:hover ol li:nth-child(4){ -webkit-transform:rotateX(90deg) translateZ(300px); width: 400px; height: 400px; opacity: 0.8; left: -100px; top: -100px; } .box:hover ol li:nth-child(5){ -webkit-transform:rotateY(-90deg) translateZ(300px); width: 400px; height: 400px; opacity: 0
MATLAB车牌识别GUI制作教程 MATLAB是一种功能强大的数学软件,用于科学、工程和技术计算。在MATLAB中,可以通过编写代码来实现许多复杂的计算任务。车牌识别是一个应用广泛的领域,MATLAB也可以用来实现车牌识别。 MATLAB GUI可以实现图形用户界面,使用户在不需要编写代码的情况下使用MATLAB进行计算和分析。以下是MATLAB车牌识别GUI制作的步骤: 1. 准备数据:需要一些车牌图像和相应的标记文件。 2. 导入数据:在MATLAB中导入车牌图像和标记文件,可以使用“imread”和“imwrite”命令来读取和写入图像文件。 3. 视频预处理:对车牌图像进行预处理,包括调整图像大小、灰度化、二值化、去除噪声等操作。可以使用“imresize”、“rgb2gray”、“imbinarize”、“medfilt2”等命令来实现。 4. 特征提取:提取车牌图像的特征,可选特征包括形状、颜色、纹理等。可以使用MATLAB自带的图像处理工具箱中的命令来实现特征提取。 5. 车牌识别:利用分类器对车牌进行识别,目前常用的分类器有SVM、BP神经网络等。可以使用MATLAB自带的分类器工具箱中的命令来实现车牌识别。 6. GUI制作:使用MATLAB GUI制作工具箱中的命令,设计一个GUI界面,让用户上传车牌图像,然后通过按钮触发车牌识别功能并显示识别结果。 综上所述,MATLAB车牌识别GUI制作需要对数据进行预处理、特征提取和分类器识别,然后通过GUI界面将识别结果展示给用户。使用MATLAB可以轻松实现车牌识别功能,并且通过GUI界面,使用户可以直观地使用该功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 46
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

slandarer

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值