翻书效果核心几何处理类

VUE翻书效果(vue+ turn.js 实现翻书效果) vue+ turn.js 实现翻书效果 单页/双页。 阅读详情
 制作翻书效果核心几何处理类
  1. package {
  2.   import flash.geom.Point;
  3.   public class Formula {
  4.     function Formula() {
  5.     }
  6.     //求已知线段的垂直平分线
  7.     public static function getVerticalLine(point1:Point, point2:Point):Object {
  8.       var point3:Point=new Point((point1.x+point2.x)/2,(point1.y+point2.y)/2);
  9.       var point4:Point=new Point(0,0);
  10.       var point5:Point=new Point(0,0);
  11.       if (point1.x<point2.x) {
  12.         point4=point1
  13.       } else {
  14.         point4=point2
  15.       }
  16.       point5.x=-(point4.y-point3.y)+point3.x;
  17.       point5.y=point4.x-point3.x+point3.y
  18.       var line:Object={pointA:point3,pointB:point5}
  19.       return line;
  20.     }
  21.     
  22.     //求通过一点且垂直于已知直线的两直线的交点
  23.     public static function getPlumbPoint(point1:Point, point2:Point, point3:Point):Point {
  24.       //ax+by+c=0直线的标准方程
  25.       var a:Number = point1.y-point2.y;
  26.       var b:Number = point2.x-point1.x;
  27.       var c:Number = point1.x*point2.y-point2.x*point1.y;
  28.       var point4:Point;
  29.       var point5:Point;
  30.       //排除a=0或者b=0的情况 
  31.       if (a == 0) {
  32.         point4 = new Point(point3.x,-2*c/b-point3.y);
  33.         point5 = new Point((point4.x+point3.x)/2,(point4.y+point3.y)/2);
  34.         return point5;
  35.       } else if (b == 0) {
  36.         point4 = new Point(-2*c/a-point3.x,point3.y);
  37.         point5 = new Point((point4.x+point3.x)/2,(point4.y+point3.y)/2);
  38.         return point5;
  39.       }
  40.       //直线的斜率
  41.       var k:Number=-a/b;
  42.       //垂直直线的斜率
  43.       var k1:Number = -1/k;
  44.       var u:Number = point3.y-point3.x*k1;
  45.       //直线L和L1的交点point4
  46.       point4=new Point((u+c/b)/(k-k1),k*(u+c/b)/(k-k1)-c/b);
  47.       return point4;
  48.     }
  49.     //已知两点求直线
  50.     public static function getLineExpress(point1:Point, point2:Point):String {
  51.       //ax+by+c=0直线的标准方程
  52.       var a:Number = point1.y-point2.y;
  53.       var b:Number = point2.x-point1.x;
  54.       var c:Number = point1.x*point2.y-point2.x*point1.y;
  55.       return a + "x+" + b + "y+" + c + "=0";
  56.     }
  57.     //求两任意直线的交点
  58.     public static function getNode(point1:Point, point2:Point,point3:Point, point4:Point):* {
  59.       //ax+by+c=0直线的标准方程
  60.       var a:Number = point1.y-point2.y;
  61.       var b:Number = point2.x-point1.x;
  62.       var c:Number = point1.x*point2.y-point2.x*point1.y;
  63.       var a1:Number = point3.y-point4.y;
  64.       var b1:Number = point4.x-point3.x;
  65.       var c1:Number = point3.x*point4.y-point4.x*point3.y;
  66.       var x:Number=0;
  67.       var y:Number=0;
  68.       var point:Point;
  69.       
  70.       //当两条直线平行
  71.       if ((a1==0&&a==0)||(b1==0&&b==0)) {
  72.         trace("平行啊"+a+b);
  73.         return null;
  74.       }
  75.       if (-a/b==-a1/b1&&b!=0&&b1!=0) {
  76.         trace("平行啊"+a+b);
  77.         return null;
  78.       }
  79.       //当两条直线斜率不存在或为零
  80.       if (a1==0&&b==0) {
  81.         y=-c1/b1;
  82.         x=-c/a;
  83.         point=new Point(x,y);
  84.         return point;
  85.       } else if (b1==0&&a==0) {
  86.         x=-c1/a1;
  87.         y=-c/b;
  88.         point=new Point(x,y);
  89.         return point;
  90.       }
  91.       
  92.       //但其中一条直线斜率为零或不存在的时候
  93.       if (a1==0&&a!=0) {
  94.         y=-c1/b1;
  95.         x=-(b*y+c)/a;
  96.         point=new Point(x,y);
  97.         return point;
  98.       } 
  99.       if (b1==0&&b!=0) {
  100.         x=-c1/a1;
  101.         y=-(a*x+c)/b;
  102.         point=new Point(x,y);
  103.         return point;
  104.       }
  105.       if (a==0&&a1!=0) {
  106.         y=-c/b;
  107.         x=-(b1*y+c1)/a1;
  108.         point=new Point(x,y);
  109.         return point;
  110.       } 
  111.       if (b==0&&b1!=0) {
  112.         x=-c/a;
  113.         y=-(a1*x+c1)/b1;
  114.         point=new Point(x,y);
  115.         return point;
  116.       }
  117.             //其他
  118.       y=(a*c1-a1*c)/(a1*b-a*b1);
  119.       x=-(b*y+c)/a;
  120.       point=new Point(x,y);
  121.       return point;
  122.     }
  123.     //保证角度在0——360之间
  124.     public static function fixAngle(angle:Number):Number {
  125.       angle %= 360;
  126.       return angle < 0?angle + 360:angle;
  127.     }
  128.     /*
  129.     求点A和点B相对于参考点C的夹角
  130.     origin:参考点C
  131.     point1:点A
  132.     point2:点B
  133.     返回角度
  134.     */
  135.     public static function getAngle(origin:Point,point1:Point, point2:Point):Number {
  136.       //将坐标中心移到场景的中心
  137.       var x = point1.x-origin.x;
  138.       var y = point1.y-origin.y;
  139.       //判断各种不同的情况,通过运算使r值在0-360之间 
  140.       var angle:Number = fixAngle(Math.atan2(y,x)*180/Math.PI);
  141.       //将坐标中心移到场景的中心
  142.       var x1 = point2.x-origin.x;
  143.       var y1 = point2.y-origin.y;
  144.       //判断各种不同的情况,通过运算使r值在0-360之间 
  145.       var angle1:Number = fixAngle(Math.atan2(y1,x1)*180/Math.PI);
  146.       
  147.       return fixAngle(angle - angle1);
  148.     }
  149.     /*
  150.     以知点O,求点P绕点O旋转30度的点M
  151.     origin:点O
  152.     intent:点P
  153.     ang:旋转角度
  154.     返回点M
  155.     */
  156.     public static function rotate(origin:Point,intent:Point,ang:Number):Point {
  157.       var ca:Number=Math.cos(ang*Math.PI/180);
  158.       var sa:Number=Math.sin(ang*Math.PI/180);
  159.       var cx:Number=(intent.x-origin.x)*ca-(intent.y-origin.y)*sa+origin.x;
  160.       var sy:Number=(intent.x-origin.x)*sa+(intent.y-origin.y)*ca+origin.y;
  161.       var point:Point=new Point(cx,sy);
  162.       return point;
  163.     }
  164.     
  165.     //求一点关于直线的对称点
  166.     public static function symmetry(point1:Point,point2:Point,intent:Point):Point {
  167.       var point3:Point=Formula.getPlumbPoint(point1, point2, intent);
  168.       var x:Number =2*point3.x-intent.x;
  169.       var y:Number=2*point3.y-intent.y;
  170.       var point:Point=new Point(x,y);
  171.       return point;
  172.     }
  173.   }
  174. }
Vue项目实战:用turn.js打造超真实翻书效果(附完整代码+避坑指南) 本文详细介绍了如何在Vue项目中集成turn.js库,实现逼真的翻书效果。从项目环境搭建、核心库引入,到翻书效果的具体实现与参数配置,提供了完整的代码示例。文章重点解析了在Vue CLI/Webpack环境中配置vue.config.js以全局引入jQuery和turn.js的关键步骤,并分享了动态内容加载、移动端适配、性能优化等高级技巧与实战避坑指南,帮助开发者打造流畅的沉浸式数字阅读体验。 阅读详情

相关推荐

Vue项目实战:5分钟搞定turn.js仿真翻书效果(附完整配置代码)

本文详细介绍了如何在Vue项目中快速集成turn.js实现仿真翻书效果,包括环境准备、webpack配置、核心实现步骤及性能优化技巧。通过实战案例和完整代码示例,帮助开发者轻松为电子杂志、产品画册等添加沉浸式翻书交互,提升用户体验。

yoga7的博客 877

Unity翻书效果Demo源码:实现真实感翻书效果

Unity翻书效果Demo源码:实现真实感翻书效果 去发现同类优质开源项目:https://gitcode.com/ 在游戏开发与虚拟现实项目中,模拟真实世界的交互体验是至关重要的。Unity翻书效果Demo源码提供了一种高效实现这一交互的途径,下面将详细介绍这个项目的核心功能、技术分析及应用场景。 项目介绍 Unity翻书效果Demo源码是一款专门为Unity开发者设计的开源项目,它提供了实现逼...

gitblog_06729的博客 404

用ABAQUS模拟‘翻书’效果:一个薄板大变形案例的完整建模与后处理

本文详细介绍了使用ABAQUS模拟薄板大变形(如‘翻书’效果)的完整流程,涵盖几何非线性分析、材料方向定义、位移约束施加及专业后处理技术。通过具体案例演示如何解决工程中的几何非线性问题,特别强调材料方向设置和局部坐标系应用,帮助用户提升ABAQUS在复杂变形分析中的实战能力。

weixin_30696427的博客 392

使用JQuery的turn.js库来实现翻书效果

一淘模板(56admin.com)本篇文章给大家介绍jQuery的turn.js库,聊聊使用turn.js库实现翻书效果,希望对大家有所帮助!今天来和大家分享下JQ的turn.js,下面我先来简单介绍下我们今天的主角turn.js。Turn.js是一个JavaScript库,它集合了HTML5的所有优点,可以使我们的内容看起来像一本书或杂志,有真实的翻阅的效果。

qq_29701691的博客 2166

基于单片机的无线遥控自动翻书机械臂设计

本设备的重点控制部件为单片机,充分实现了其自动化的目的。相关研究表明,它操作简单便捷,使残疾人在翻书时提供了较大的便利,使用价值性极高,具有很大的发展空间。

weixin_45905610的博客 1146

CSS3打造真实翻书动画效果

在Web前端设计中,transition属性是一个基本且强大的工具,它允许开发者定义元素状态变化时的动画效果,从而使得这些变化更加平滑。transition属性可以应用于几乎所有的HTML元素,并且它的支持范围覆盖了绝大多数现代浏览器。例如,当你希望当鼠标悬停在一个元素上时,元素的背景颜色能够平滑地过渡到一个新的颜色,你可以这样写:.element {/* 初始颜色 *//* 设置过渡效果 *//* 鼠标悬停时的颜色 */在这个简单的例子中,transition。

weixin_42524864的博客 794

纯CSS3实现逼真翻书动画效果项目实战

简介:CSS3翻书动画是一种利用HTML与CSS3 3D变换技术模拟真实书籍翻页的视觉效果,广泛应用于电子书、在线画册等场景以提升用户体验。本文详解如何通过CSS3的transform、transition、perspective和transform-origin等属性实现动态翻页,并使用伪元素增强立体感。尽管部分实现可能因浏览器兼容性或细节处理不足而显得“牵强”,但通过参数优化与JavaScript辅助交互,可显著提升动画的真实性和流畅度。

weixin_35761094的博客 1002

基于HTML5与Flash的精美翻书效果实现教程

在数字阅读和电子出版物日益普及的今天,用户对阅读体验的要求已不再局限于内容本身,更追求界面交互的真实感与沉浸感。翻书效果作为提升阅读交互体验的重要手段,通过模拟纸质书籍翻页的动态过程,增强了用户的代入感和操作趣味性。该效果广泛应用于电子书阅读器、在线杂志、教育课件、数字画册等多个领域。从技术角度看,翻书效果的实现涉及动画控制、用户交互、图形渲染等多个维度,是前端开发中一个兼具挑战性与实用价值的课题。理解其应用场景与用户需求,是深入掌握其实现原理与优化策略的基础。

weixin_42113456的博客 1426

Starling实现的硬皮翻书效果

原文:Starling实现的硬皮翻书效果 作者:郭少瑞 ———————————————————————————————————————– 更新(2012-12-31): 在今年的最后一天,这个效果终于更新为软纸翻页的版本(封面和封底仍然是硬纸),演示地址:http://www.todoair.com/demo/book/StarlingBook2.html 硬纸到...

优秀技术文章收录 666

实现JS翻书特效的终极指南

自定义事件允许我们创建自己的事件,并在特定的时机触发它们。这在复杂的交互设计中非常有用,例如在翻书特效中,我们可以定义一个自定义事件来表示翻书的动画完成。// 创建一个自定义事件});// 触发自定义事件// 监听自定义事件});自定义事件可以提高代码的模块化和可重用性,使得组件之间的通信更加清晰和解耦。在开发大型应用时,这种机制尤其重要。综上所述,第五章介绍了事件监听和处理技术的深层次理解及其在交互设计中的应用。

weixin_31974443的博客 1303

C#实现翻书效果的深度剖析 - TurnThePageDemo

本文还有配套的精品资源,点击获取 简介:本文深入探讨了如何使用C#编程语言实现“TurnThePageDemo”翻书效果,一种模拟传统纸质书籍的数字翻页动画技术。介绍了图形渲染、动画效果、交互设计、物理模拟、资源优化、代码组织及测试与调试等方面的关键技术点,以及如何调整翻页速度以适应用户偏好,为用户带来直观和沉浸感的阅读体验。 1. 翻书效果实现概述 翻书效...

weixin_42511373的博客 1649

Turn.js + Vue3实现前端翻书效果

全局依赖处理:对于未模块化的库,需手动绑定全局变量性能优化:移动端需特别注意 GPU 加速和动画参数调整事件处理:利用 Turn.js 的生命周期钩子实现动态内容加载兼容性测试:需在不同浏览器和设备上测试交互流畅度希望本文能帮助到同样在实现翻书效果的开发者,避免重复踩坑!如果有任何疑问,欢迎在评论区交流。

weixin_54984179的博客 2070

Unity中基于顶点操作的逼真翻书效果实现

在现代交互式应用与数字出版领域,逼真的翻书效果已成为提升用户体验的重要视觉表现手段。Unity3D凭借其强大的图形渲染能力与灵活的脚本系统,为实现基于顶点修改的动态翻书效果提供了理想平台。本章将从整体技术视角出发,深入剖析基于顶点变形的翻书实现原理,阐述其相较于传统动画或粒子模拟方式的优势——更高的真实感、更精细的几何控制以及更强的可扩展性。在Unity3D中实现高质量翻书效果的核心之一,是通过自定义着色器(Custom Shader)对纸张的几何形态和视觉表现进行精细控制。

weixin_33750664的博客 469

Android实现SDCard读取TXT文件并模拟翻书效果完整开发指南

为了提高代码的可扩展性和复用性,我们可以设计一个通用的文件过滤接口。FileFilter@NonNull@Override@Override@Override适配器功能说明:addData方法用于异步加载时逐行添加内容。通知列表更新,避免刷新整个列表。ViewHolder模式提升滚动性能。Android动画系统经过多年发展,形成了较为完整的体系结构。

weixin_35238815的博客 923

Unity3D电子翻书效果插件:Book Page Curl Pro深度解析

随着数字媒体的蓬勃发展,电子翻书因其独特的交互体验和视觉效果,成为了数字展示中的热门技术。本章将为您揭开Unity3D翻书效果插件的神秘面纱,从技术理念到实际应用,为您一一道来。Unity3D作为游戏开发和实时内容创建的强大平台,其插件生态系统为我们提供了丰富的工具和功能。翻书效果插件就是其中之一,它利用3D建模与动画技术,赋予了虚拟页面以逼真的翻页体验。开发者可以通过简单的配置和代码植入,将这一效果嵌入到各种应用中,如电子书、虚拟展览、教育培训等。

weixin_42584507的博客 984

Unity翻书插件:虚拟仿真中的真实交互体验

骨骼动画不同于传统的帧动画,它使用了一系列的骨骼和蒙皮技术,通过控制骨骼的运动来驱动模型的变化,达到动画的效果。骨骼动画的优点在于,它能够极大地减少动画师的工作量,同时制作出的动画更加真实和灵活。

weixin_33239721的博客 1401

支持400页的电子翻书模板设计与实现

为了实现物理文件与逻辑页码的解耦,推荐使用JSON格式的索引映射表。该文件显式声明每一页的显示顺序、标题、跳转锚点等元信息。"title": "封面",},"title": "目录",},"title": "第一章 引言",该结构支持复杂出版物需求,如插入广告页、隐藏版权页等。

weixin_35391606的博客 836

打造个性化的JS翻书体验

htmltable {th, td {th {pre {简介:JavaScript用于网页和网络应用开发,其翻书效果通过模拟真实书籍翻页为用户提供了更直观有趣的阅读体验。结合HTML5和CSS3技术,它可以通过定时器或用户交互实现自动翻页,并结合音频元素增加背景音乐,提升沉浸式体验。通过简单的图片资源替换,开发者可以轻松定制内容,而无需改变核心代码。

weixin_42300144的博客 723
上一篇: 3D模型贴图类
下一篇: Vertor3d类
g0c0
博客等级 码龄23年 4粉丝 39原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值