- 2024-06-20H5移动端加载预览pdf文件——demo
前言：正常情况下需要在HTML中嵌入本地docx或pdf文件时，我们会有以下解决办法：1.使用<iframe>标签2.使用<embed>标签3.使用<object>标签4.使用第三方库（如PDF.js）当实际操作时，会发现前三种方式在pc端支持，但在移动端不支持，因为这些标签在移动端浏览器中的支持并不统一。为了兼容移
- 2024-06-06个人向 godot 源码阅读 - 3 - MainLoop 以及 2D 视口
3-MainLoop以及2D视口godot默认的主循环类型为SceneTree,在之上则承载了godot中的重要概念之一节点树.SceneTree的源文件位于scene/main/scene_tree.cpp,SceneTree默认将会在Main::start()函数中被创建,然后被设置到OS的mainloop上,现在让我们来看看Scen
- 2024-05-25深入浅出Viewport设计原理2
逻辑像素、逻辑分辨率对于同一个元素，DPR越大，渲染时需要的物理像素就越多。这是我们上面得出的结论。那么，在软件开发中，元素的大小到底应该写成多少px？为了解决这个问题，我们引入“逻辑像素”的概念。平时我们在css中写的px指的就是逻辑像素，而不是物理像素，一个逻辑像素可以
- 2024-05-19cs04 CSS Measurement Units
Valuesandunits,inCSS,aresignificantastheydeterminethesize,proportions,andpositioningofelementsonawebpage.Units,definethemeasurementsystemusedtospecifythevalues.CSSoffersanumberofdifferentunitsforexpressinglengthand
- 2024-05-19ray tracing in one weekend - 5
dielectric水、玻璃、钻石等透明材料都是电介质。当光线照射到它们身上时，它会分裂成反射光线和折射(透射)光线。我们将通过在反射和折射之间随机选择来处理这个问题，每次相互作用只产生一个散射射线。折射程度：是根据两个介质折射率的差值决定的。RefractionSnell'sLaw$$\e
- 2024-05-03HTML页面关于高分屏的设置
记录一个HTML页面关于高分屏的踩到的坑。所谓高分屏，就是在同样大小的屏幕面积上显示更多的像素点，这样可以呈现更好的可视效果的屏幕。例如，我的笔记本是15.6寸，理论上它的屏幕分辨率应该是1920x1080像素，但实际上我的笔记本屏幕分辨率确实2560x1440像素，也就是俗称的2K屏。这样的
- 2024-04-07TypeScript: pdf.js v4.0.379
<!doctypehtml><html><head><metacharset="utf-8"> <metahttp-equiv="X-UA-Compatible"content="chrome=1"><metaname="viewport"content="width=device-width,initial-sc
- 2024-04-06移动端适配方案总结之vw
1、vw/vh是什么？vw是：viewportwidth视口宽度单位vh是：viewportheight视口高度单位实际开发中我们基本用vw；2.相对视口的尺寸计算结果1vw=1/100视口宽度1vh=1/100视口高度例如：当前屏幕视口是375像素，则1vw就是3.75像素，如果当前屏幕视口为414，则1vw就是4.
- 2024-03-19使用vw进行移动端适配（nuxt项目）
基于nuxt 2.0.0 安装postcss-px-to-viewportnpm安装npminstallpostcss-px-to-viewport--save-dev或yarn安装yarnadd-Dpostcss-px-to-viewport 在nuxt中配置postcss-px-to-viewport在nuxt.config.js中配置exportdefault{........./*
- 2024-03-05vue中PDF文件转图片方式
1、在vue中安装依赖 pdfjs-dist 2、在需要引用的文件中添加import*aspdfjsfrom'pdfjs-dist'import*aspdfjsWorkerfrom'pdfjs-dist/build/pdf.worker.entry'pdfjs.GlobalWorkerOptions.workerSrc=pdfjsWorker3、编写需要转换的方法<divv-for="(i
- 2024-02-223D小算法
向量投影///<summary>///计算空间向量在平面上的投影///</summary>///<paramname="o">原点</param>///<paramname="end">终点</param>///<paramname="unit">投影平面的法向量</param>///<returns>&l
- 2023-11-17移动端踩坑
1、窗口等比例缩放constdesignWidth=375constscale=document.documentElement.clientWidth/designWidthletviewport=document.querySelector('meta[name='viewport']')letcontent='width=device-width'+',initial-scale='
- 2023-10-19react项目中预览pdf文件
最近需求，要在b端展示上传的pdf文件。实现方式有很多，记录一下我们最常用的pdf.js//安装"pdfjs-dist":"2.0.402"//引入import*aspdfjsfrom'pdfjs-dist'import*aspdfjsWorkerfrom'pdfjs-dist/build/pdf.worker.entry'//定义初始值letpdfDoc=null;
- 2023-10-09使用postcss-px-to-viewport实现兼容
为提高页面的兼容性，可使用postcss-px-to-viewport。1.安装依赖"postcss-px-to-viewport":"^1.1.1"2.在vite.config.js导入importpostcssPxToViewportfrom'postcss-px-to-viewport';3.增加css配置，示例如下returndefineConfig({plugins:[vue(),buildTi
- 2023-09-24实现不同屏幕自适应【postcss-px-to-viewport】
效果图未转换前：转换后：背景平常开发的时候使用px作为样式单位，但是在不同的屏幕尺寸下不能自适应，我们希望项目中所有使用到的px单位都转换成vw单位使用步骤安装npmipostcss-px-to-viewport-D在项目根目录下创建postcss.config.jsmodule.exports={plugins:{
- 2023-09-15HTML5教程之移动端Web页面布局
一、什么是移动端项目顾名思义，运行在移动端的项目就称为移动端项目。那什么是移动端呢，主要是指我们的一些手持设备，最具有代表性的就是我们日常使用的手机和平板，当然还包括一些其他便携设备，如智能手表，掌上游戏机，等流动装置。二、为什么要学移动端布局随着科技的进步
- 2023-08-20H5移动端禁止页面缩放(使用Android和IOS)
<metaname="viewport"content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>标签说明：width:设置viewport的宽度，正整数/字符串device-widthheight:设置viewport的高度，正整数/字符串device-heightinitia
- 2023-08-14postcss px转vw
为什么要使用Postcss(px-to-viewport)在移动端开发中，我们通常采用rem或者vw&vh这两种方式来适配不同设备的屏幕大小。rem的缺点是需要进行频繁的计算和换算，而vw&vh的缺点则是部分设备支持不尽如人意。而使用Postcss(px-to-viewport)可以自动将px转换为vw或者vh，省去了繁琐的转换计
- 2023-07-25使用750设计稿，px转vw，同时兼容vant
vant官网上推荐使用postcss-px-to-viewport进行转换。postcss-px-to-viewport是一款PostCSS插件，用于将px单位转化为vw/vh单位。因为vant自身使用的是375大小，网上其他的资料也都用375，可是自己使用的是750设计稿，所以想用750的执念就起来了，研究了一番配置如下。npminstal
- 2023-07-17postcss-px-to-viewport 插件移动端适配
1.简介：postcss-px-to-viewport是一个将px单位转换为视口单位的(vw,vh,vmin,vmax)的PostCSS插件。将CSS中的px单位转化为vw，来进行移动端适配，1vw等于1/100视口宽度。2.地址：postcss-px-to-viewportGitHub地址3.安装：npmnpminstallpostcss-px-to-viewport--save-
- 2023-06-20记录--前端实现文件预览（pdf、excel、word、图片）
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助前端实现文件预览功能需求：实现一个在线预览pdf、excel、word、图片等文件的功能。介绍：支持pdf、xlsx、docx、jpg、png、jpeg。以下使用Vue3代码实现所有功能，建议以下的预览文件标签可以在外层包裹一层弹窗。
- 2023-05-24用触摸屏辅助3D建模
现在在触摸屏上进行3D建模的软件很多，这里说的是另一个概念。我的设想是将触摸屏当做一个带有ViewPort的输入设备。比如Blender在建模时，我们可以通过一个外接的触摸屏从另一个角度观察模型，同时也具备多指缩放旋转平移等等调节视野的功能。一般触摸板已经具备缩放平移旋转等
- 2023-05-11OpenSeadragon 实战系列其他属性的使用
viewport的使用我们打开openseadragn的官网，可以找到下图所示的viewport点开viewport，你可以看到很多viewport的方法那么如何使用viewport呢?在基础篇中的示例代码中，我们定义了viewer1varviewer=OpenSeadragon({2id:"openseadragon1",3
- 2023-04-16viewport 虚拟窗口
viewport语法介绍：<metaname="viewport"content="height=[pixel_value|device-height],width=[pixel_value|device-width],initial-scale=float_value,minimum-scale=float_value,maximum-sca
- 2023-04-03移动端适配
原文链接：https://blog.csdn.net/weixin_39602178/article/details/1260340591.rem方案安装插件npminstallamfe-flexible--savenpminstallpostcss-pxtorem--save-dev在main.js中引入amfe-flexibleimport'amfe-flexible';在postcss.config.js文件中配置postcss-px