canvas极速3D立体式图片相册切换效果

最新推荐文章于 2025-03-18 15:36:29 发布
最新推荐文章于 2025-03-18 15:36:29 发布
阅读量3.9k 收藏 6
点赞数 6
分类专栏： web前端
canvas极速3D立体式图片相册切换效果
 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>极速3D立体式图片相册切换效果</title> 
<style type="text/css">
html {
 overflow:hidden; 
 -ms-touch-action:none;
 -ms-content-zooming:none;
}
body {
 position:absolute;
 margin:0px;
 padding:0px;
 background:#fff;
 width:100%;
 height:100%;
}
#canvas {
 position:absolute;
 width:100%;
 height:100%;
 background:#fff;
}
</style>
<script type="text/javascript" src="js/ge1doot.js"></script>
<script type="text/javascript">
"use strict";
(function () {
  var diapo = [], layers = [], ctx, pointer, scr, camera, light, fps = 0, quality = [1,2],
 Poly = function (parent, face) {
  this.parent = parent;
  this.ctx    = ctx;
  this.color  = face.fill || false;
  this.points = [];
  if (!face.img) {
      for (var i = 0; i < 4; i++) {
    this.points[i] = new ge1doot.transform3D.Point(
     parent.pc.x + (face.x[i] * parent.normalZ) + (face.z[i] * parent.normalX),
     parent.pc.y +  face.y[i],
     parent.pc.z + (face.x[i] * parent.normalX) + (-face.z[i] * parent.normalZ)
    );
   }
   this.points[3].next = false;
  }
 },
  Diapo = function (path, img, structure) {
    this.img = new ge1doot.transform3D.Image(
   this, path + img.img, 1, {
    isLoaded: function(img) {
     img.parent.isLoaded = true;
     img.parent.loaded(img);
    }
   }
  );
  this.visible  = false;
  this.normalX  = img.nx;
  this.normalZ  = img.nz;
    this.pc = new ge1doot.transform3D.Point(img.x, img.y, img.z);
    this.tx = img.x + (img.nx * Math.sqrt(camera.focalLength) * 20);
  this.tz = img.z - (img.nz * Math.sqrt(camera.focalLength) * 20);
   this.poly = [];
  for (var i = -1, p; p = structure[++i];) {
   layers[i] = (p.img === true ? 1 : 2);
   this.poly.push(
    new Poly(this, p)
   );
  }
 },
  init = function (json) {
    Poly.prototype.drawPoly = ge1doot.transform3D.drawPoly;
    scr = new ge1doot.Screen({
   container: "canvas"
  });
  ctx = scr.ctx;
  scr.resize();
    pointer = new ge1doot.Pointer({
   tap: function () {
    if (camera.over) {
     if (camera.over === camera.target.elem) {
           camera.target.x = 0;
      camera.target.z = 0;
      camera.target.elem = false;
     } else {
      camera.target.elem = camera.over;
      camera.target.x = camera.over.tx;
      camera.target.z = camera.over.tz;
      for (var i = 0, d; d = diapo[i++];) {
       var dx = camera.target.x - d.pc.x;
       var dz = camera.target.z - d.pc.z;
       var dist = Math.sqrt(dx * dx + dz * dz);
       var lev = (dist > 1500) ? quality[0] : quality[1];
       d.img.setLevel(lev);
      }
     }
    }
   }
  });
   camera = new ge1doot.transform3D.Camera({
   focalLength: Math.sqrt(scr.width) * 10,
   easeTranslation: 0.025,
   easeRotation: 0.06,
   disableRz: true
  }, {
   move: function () {
    this.over = false;
    if (pointer.isDraging) {
     this.target.elem = false;
     this.target.ry = -pointer.Xi * 0.01;
     this.target.rx = (pointer.Y - scr.height * 0.5) / (scr.height * 0.5);
    } else {
     if (this.target.elem) {
      this.target.ry = Math.atan2(
       this.target.elem.pc.x - this.x,
       this.target.elem.pc.z - this.z
      );
     }
    }
    this.target.rx *= 0.9;
   }
  });
  camera.z  = -10000;
  camera.py = 0;
  for (var i = 0, img; img = json.imgdata[i++];) {
   diapo.push(
    new Diapo(
     json.options.imagesPath, 
     img, 
     json.structure
    )
   );
  } 
      setInterval(function() {
   quality = (fps > 50) ? [2,3] : [1,2];
   fps = 0;
  }, 1000);
  run();
 },
 run = function () {
  ctx.clearRect(0, 0, scr.width, scr.height);
  camera.move();
  for (var k = -1, l; l = layers[++k];) {
   light = false;
   for (var i = 0, d; d = diapo[i++];) {
    (l === 1 && d.draw()) || 
    (d.visible && d.poly[k].draw());
   }
  }
  if (camera.over && !pointer.isDraging) {
   scr.setCursor("pointer");
  } else {
   scr.setCursor("move");
  }
  fps++;
  requestAnimFrame(run);
 };
 Poly.prototype.draw = function () {
    var c = this.color;
  if (c.light || !light) {
   var s = c.light ? this.parent.light : 1;
      light = "rgba(" + 
    Math.round(c.r * s) + "," +
    Math.round(c.g * s) + "," + 
    Math.round(c.b * s) + "," + (c.a || 1) + ")";
   ctx.fillStyle = light;
  }
    if (!c.light || this.parent.light < 1) {
    for (
    var i = 0; 
    this.points[i++].projection();
   );
   this.drawPoly();
   ctx.fill();
  }
 }
  Diapo.prototype.loaded = function (img) {
  var d = [-1,1,1,-1,1,1,-1,-1];
  var w = img.texture.width  * 0.5;
  var h = img.texture.height * 0.5;
  for (var i = 0; i < 4; i++) {
   img.points[i] = new ge1doot.transform3D.Point(
    this.pc.x + (w * this.normalZ * d[i]),
    this.pc.y + (h * d[i + 4]),
    this.pc.z + (w * this.normalX * d[i])
   );
  }
 }
  Diapo.prototype.draw = function () {
   this.pc.projection();
  if (this.pc.Z > -(camera.focalLength >> 1) && this.img.transform3D(true)) {
   this.light = 0.5 + Math.abs(this.normalZ * camera.cosY - this.normalX * camera.sinY) * 0.6;
   this.visible = true;
   this.img.draw();
    if (pointer.hasMoved || pointer.isDown) {
    if (
     this.img.isPointerInside(
      pointer.X,
      pointer.Y
     )
    ) camera.over = this;
   }
  } else this.visible = false;
  return true;
 }
 return {
   load : function (data) {
   window.addEventListener('load', function () {
    ge1doot.loadJS(
     "js/imageTransform3D.js",
     init, data
    );
   }, false);
  }
 }
})().load({
 imgdata:[
  {img:'images/1.jpg', x:-1000, y:0, z:1500, nx:0, nz:1},
  {img:'images/2.jpg', x:0,     y:0, z:1500, nx:0, nz:1},
  {img:'images/3.jpg', x:1000,  y:0, z:1500, nx:0, nz:1},
  {img:'images/4.jpg', x:1500,  y:0, z:1000, nx:-1, nz:0},
  {img:'images/5.jpg', x:1500,  y:0, z:0, nx:-1, nz:0},
  {img:'images/6.jpg', x:1500,  y:0, z:-1000, nx:-1, nz:0},
  {img:'images/7.jpg', x:1000,  y:0, z:-1500, nx:0, nz:-1},
  {img:'images/8.jpg', x:0,     y:0, z:-1500, nx:0, nz:-1},
  {img:'images/9.jpg', x:-1000, y:0, z:-1500, nx:0, nz:-1},
  {img:'images/10.jpg', x:-1500, y:0, z:-1000, nx:1, nz:0},
  {img:'images/11.jpg', x:-1500, y:0, z:0, nx:1, nz:0},
  {img:'images/12.jpg', x:-1500, y:0, z:1000, nx:1, nz:0}
 ],
 structure:[
  {
   fill: {r:255, g:255, b:255, light:1},
   x: [-1001,-490,-490,-1001],
   z: [-500,-500,-500,-500],
   y: [500,500,-500,-500]
  },{
   fill: {r:255, g:255, b:255, light:1},
   x: [-501,2,2,-500],
   z: [-500,-500,-500,-500],
   y: [500,500,-500,-500]
  },{
   fill: {r:255, g:255, b:255, light:1},
   x: [0,502,502,0],
   z: [-500,-500,-500,-500],
   y: [500,500,-500,-500]
  },{
   fill: {r:255, g:255, b:255, light:1},
   x: [490,1002,1002,490],
   z: [-500,-500,-500,-500],
   y: [500,500,-500,-500]
  },{
   fill: {r:0, g:0, b:0, a:0.2},
   x: [-420,420,420,-420],
   z: [-500,-500,-500,-500],
   y: [150, 150,-320,-320]
  },{
   fill: {r:0, g:0, b:0, a:0.2},
   x: [-20,20,20,-20],
   z: [-500,-500,-500,-500],
   y: [250, 250,150,150]
  },{
   fill: {r:0, g:0, b:0, a:0.2},
   x: [-20,20,20,-20],
   z: [-500,-500,-500,-500],
   y: [-320, -320,-500,-500]
  },{
   fill: {r:0, g:0, b:0, a:0.2},
   x: [-20,20,10,-10],
   z: [-500,-500,-100,-100],
   y: [-500, -500,-500,-500]
  },{
   fill: {r:32, g:32, b:32},
   x: [-50,50,50,-50],
   z: [-150,-150,-50,-50],
   y: [-500,-500,-500,-500]
  },{
   fill: {r:16, g:16, b:16},
   x: [-10,10,10,-10],
   z: [-100,-100,-100,-100],
   y: [300,300,-500,-500]
  },{
   fill: {r:255, g:255, b:255},
   x: [-320,-320,-320,-320],
   z: [0,-20,-20,0],
   y: [-190,-190,190,190]
  },{
   fill: {r:255, g:255, b:255},
   x: [320,320,320,320],
   z: [0,-20,-20,0],
   y: [-190,-190,190,190]
  },
  {img:true},
  {
   fill: {r:255, g:128, b:0},
   x: [-50,50,50,-50],
   z: [450,450,550,550],
   y: [500,500,500,500]
  },{
   fill: {r:255, g:128, b:0},
   x: [-50,50,50,-50],
   z: [450,450,550,550],
   y: [-500,-500,-500,-500]
  }
 ],
 options:{
  imagesPath: ""
 }
});
</script>
</head> 
<body>
<canvas id="canvas">你的浏览器不支持HTML5画布技术，请使用谷歌浏览器。</canvas>
</body>
</html>

图片

图片

图片

图片

图片

图片

图片

图片
QML中【预计符号】和【Unknown Component M300】的红色警告解决方法
尔雅慕客的博客
04-24 3093
问题描述： QML的项目中带中文，每次打开项目都在问题栏显示【预计符号】的红色警告，还有一种是【Unknown Component M300】的警告，代码能正常编译和运行。像我这样对代码追求优雅的强迫症患者看着很不爽，查了很多网上的方法尝试也没有得到解决。
QT的QQmlComponent类的使用
希望我的博客，能帮上你解决学习中工作中所遇到的问题
12-20 1117
详细说明 QQmlComponent类封装了QML组件定义。 组件是具有良好定义的接口的可重用的，封装的QML类型。 可以从QML文件创建QQmlComponent实例。例如，如果有一个main.qml文件，如下所示： import QtQuick 2.0 Item { width: 200 height: 200 } 以下代码将此QML文件作为组件加载，使用create（）创建此组件的实例，然后查询Item的width值： QQmlEngine *engine =
Qt QML Component
QtCompany的博客
05-25 767
那么这两种方式分别适用于什么场景呢？这里有一个原则可以帮助我们去选择Component的定义方式：如果一个Component比较小且只在某个QML文件中使用，或者说一个Component从逻辑上来看属于某个QML文档，那么就可以采用嵌入的方式来定义该Component；在单独文件中定义Component，与嵌入式定义有明显的不同：Component对象不见了，是因为在单独文件中定义组件，不需要Component对象，只有在其他QML文件中嵌入式定义组件时才需要Component对象。
qml component is not ready
weixin_34417635的博客
06-13 2477
2019独角兽企业重金招聘Python工程师标准>>> ...
QQmlComponent加载component
LC900730的博客
09-13 3484
QQmlComponent创建//main.cpp QQmlEngine *engine=ne QQmlEngine(); QQmlComponent component(engine); component.loadUrl(QUrl("qrc:///main.qml"));if(component.isReady()){ QObject *myObject=component.create
QML QQmlComponent
baidu_41388533的博客
05-17 1071
QQmlComponent QmlComponent类封装了一个QML component定义 Header: #include <QQmlComponent> qmake: QT += qml Since: Qt 5.0 Instantiated By: Component Inherits: QObject Public Types enum CompilationMode{ PreferSynchronous, Asynchr..
qt之qml
Stay fool & simple
07-14 460
初入qml
QQmlComponent: Component is not ready 是什么原因？如何解决？
10-30
QQmlComponent: Component is not ready 是Qt Quick（一种用于构建用户界面的框架）中的一个常见错误，它表示你试图在组件（Component）还没有完全加载完成或者初始化完毕的时候就去使用它。这通常是由于以下几个...
Qt编译问题：自定义Qml模块插件运行时出现错误
弓人水的技术分享
06-17 2347
问题现象 /home/user/Qt/Qt5.6.3/5.6.3/gcc_64/bin/qmlplugindump -nonrelocatable Qt.Custom 0.1 > /home/user/Source/QtCustom/src/imports/custom/plugins.qmltypes QQmlComponent: Component is not ready QQmlApplicationEngine failed to load component qrc:/main.qml:
QtQuick QML教程(36)：qml property使用介绍
琅嬛福地
12-04 1510
QML 中的属性property是一个重要的概念，用于定义和访问QML对象的数据。在QML中，属性可以是各种类型，包括基本数据类型（如int, double, string）和复杂类型（如对象和列表）。属性在QML中可用于数据绑定、事件处理和界面更新。
QML与C++交互
最新发布
深之JohnChen的专栏
03-18 787
QML 与 C++ 的交互是 Qt Quick 开发的核心需求，常用于将界面逻辑与底层业务逻辑解耦。
安装VTK遇到的问题
qq_39174336的博客
01-09 783
编译VTK过程中报错。通过以下命令得到解决。
8.QML中的组件Component
热门推荐
不会飞的纸飞机的博客
07-14 2万+
本篇文章介绍一下QML中的组件，Component 1. 使用Component在QML中嵌入组件 2. 在文件中定义组件 3. 使用Loader加载/删除组件 4. 使用JavaScript中的语句加载/删除组件 1. 使用Component在QML中嵌入组件 Component是Qt框架或者开发者封装好的、只暴露必要接口的QML类型，可以重复使用。要再QML中嵌入Comp...
Component QML Type 译文
Simon的博客
03-16 379
封装一个QML组件定义。 import声明：import QtQml 2.15 实例化：QQmlComponet 属性 progress: real status: enumeration url: url 连接的信号 completed() destruction() 方法 object createObject(QtObject parent, object properties) string errorString() object incuba...
QML中动态创建组件(同步/异步)的方法
梦起丶的博客
08-11 7181
【写在前面】 在QML中想要动态创建组件，一般有两种方法： 1、使用Loader。 2、使用JavaScript：Qt.createComponent() / Qt.createQmlObject()。 当然，这里不仅会介绍他们的一般用法，还有如何使用它们来进行同步/异步的创建。 【正文开始】 首先介绍Loader： 很简单，我们可以先声明，然后通过动态设置它的source / s...
如何使用UserMetric发布消息到Welcome Screen
Elastic 中国社区官方博客
08-28 1365
我们可以通过UserMetric的API发布消息到我们手机的欢迎页面（手机的锁屏界面）。在锁屏界面中，我们可以双击中间的圆圈，来循环播放我们手机发布的消息。如下图所示， 我们发布了“Usermetric messages received: 4”个消息。
Qt常见错误
小识的博客
09-13 9342
no such slot的问题1、看类声明中有没有Q_OBJECT 2、看slot函数有没有声明 3、查看slot有没有出现拼写错误Will try to launch the process directly某个变量没有初始化no matching function for call to’QAction::QAction()’ : QMainWindow(parent)没有构造函数，原来是我
Qt qml在开发板上报错QQmlApplicationEngine failed to load component
-凌凌漆-的博客
09-02 4892
【代码】Qt qml在开发板上报错QQmlApplicationEngine failed to load component。
Uncaught TypeError: app.component is not a function
qq_45327886的博客
08-13 9365
Uncaught TypeError: app.component is not a function
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值