首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    移动端复杂运营页解决方案的探索和实践

    ROLE移动端酷炫运营页 2014年开始,我在我们部门负责移动端酷炫运营页面,也就是俗称的H5的研发工作。...对接数据 + 3D是3D 模型和动态数据整合展示的一类实现形式,通过将UE 设计好的3D 模型导入到页面并在3D 模型上用js代码控制动态数据的关联展现来实现。...这个过程相当于把工作外包给UE或者PM来实现然后把处理好的图层导入平台,同时还原每个元素的位置。第三个就是适配不同屏幕的分辨率。...PSD导入、自动切图 在我们平台上实现PSD导入和自动切图的逻辑。就是把一个PSD文件导入到平台里面,PSD文件在平台中被打成了单个独立的元素。可以对这些单个独立的元素添加动画、事件以及其它行为。...实现原理 通过imagemagik这个开源库将PSD文件分层打散成png文件,上传到服务器。然后通过psd.js获取树结构的PSD图层信息。

    1.5K70

    vue.js项目中用原生js实现移动端的轮播图

    Vue.js项目中封装轮播图组件 前言 一、了解原生js移动端的事件 二、轮播图实战 三、效果图 结束语 前言 今天我在vue.js项目实战开发过程中遇到了实现轮播图效果的问题,因为不想因为一个轮播图而引用整个...jquery,而且我还发现自己根本就不清楚移动端的一些事件,所以我就进行了一些资料查找,并最终解决了这个问题,接下来跟大家分享一下我的解决问题的过程....公众号:前端印象 不定时有送书活动,记得关注~ 关注后回复对应文字领取:【面试题】、【前端必看电子书】、【数据结构与算法完整代码】、【前端技术交流群】 一、了解原生js移动端的事件 原生js移动端的事件一共有四种...: 事件 作用 touchstart 手指放到屏幕上触发 touchmove 手指在屏幕上移动触发(高频触发) touchend 手指离开屏幕触发 touchcancel 系统取消touch事件时触发...因为vue.js项目中都是以组件的形式来开发的,所以我这里就以一个组件的形式来展示,有疑问的可以留言询问。

    9.1K20

    js实现键盘操作对div的移动或改变——-Day43

    言归正传,继续今天的记录,实际上在刚開始的时候,我以为能够非常快的实现这个功能,毕竟昨天记录了获取键盘按键的值的事件,有了值,无非就是针对不同值做不同的操作嘛,并且之前以前在写贪吃蛇时也用到过。...结果一捯饬,又是好久的一段时间,所以感觉有必要记录下的,一方面确有可取之处,还有一方面也对自己的提醒,刚刚实现过的功能转头又是陌生人了,总的来说,算是温故而知新吧。...这样我们先来分析,要实现键盘操作实现div的移动大概的原理吧: *—要实现div的移动,首先最关键的一点:获取div对象 *—postion:absolute将div全然从文档流中拖出啊,这个地方漏掉了... 然后记录下...div的上下左右移动了,接下来,再来记录下敏感地方吧。

    4.2K10

    【CSS】PhotoShop 切图 ① ( 常见的图片格式 - jpeg、gif、png、psd | PhotoShop 切片工具 )

    文章目录 一、常见的图片格式 - jpeg、gif、png、psd 二、PhotoShop 切片工具 1、导入素材 2、选择切片工具 3、选择切片工具样式 4、改变切片大小 5、改变切片位置 一、常见的图片格式...- jpeg、gif、png、psd ---- 常见的图片格式 : jpeg : 支持丰富的颜色 , 一般不透明的产品图片就是用该颜色 ; gif : 颜色只有 256 色 , 只能存储简单图片 ,...格式 , 可以用于 测量布局以及切图 ; 二、PhotoShop 切片工具 ---- 1、导入素材 将素材 拖动到 PhotoShop 中打开 , 2、选择切片工具 在 Photoshop 左侧的工具栏中...切片工具 框选一个矩形框后 , 可以拖动 矩形框 上下左右 中间位置的小方块 , 改变矩形框的尺寸 ; 5、改变切片位置 如果切片大小合适 , 但是切片位置不对 , 可以 使用 上下左右 箭头按键 , 移动整体切片位置..., 移动效果如下 ; 选择完切片后 , 选择 " 菜单栏 / 文件 / 导出 / 存储为 Web 所用格式 " 选项 ; 在弹出的 对话框 中 , 在右上角 选择 导出格式 JPEG 格式 , 然后

    77720

    开源分享 | 在线图片编辑器,支持PSD解析、AI抠图等,基于Puppeteer生成图片

    上传 PSD 模板 点击 “我的” - “资源管理”,上传PSD模板按钮,进入PSD解析上传界面界面。选择或拖入 PSD 文件,等待解析完成后开始编辑,调整好模板后点击右上角“上传模板”,等待完成。...也可对图像内容进行缩放裁剪,裁剪通常用于截取显示原图像的一部分: 图片 支持拖动图片放置到一个容器中显示: 图片 图层 图层面板中可随意拖动元素快速改变层级,图层锁定后将固定在画布中,此时元素变得不可移动...图片 技术栈概括 前端:Vue3 、Vite2 、Vuex 、ElementPlus 图片生成:Puppeteer、Express 服务端:Node.js 一些可独立的功能会逐渐抽取出来作为单独的库引入使用.../ 页面目录 ├── Draw.vue // 绘制页 ├── Index.vue // 编辑页(首页) ├── Psd.vue // PSD解析页 └── components...与大多数程序员一样,我开始写前端也是从一段段“胶水”代码开始的,遇到问题的第一反应就是打开浏览器搜索,然后从各种问答与笔记中抽丝剥茧式地尝试解决问题。

    67830

    Vue + Koa从零打造一个H5页面可视化编辑器——Quark-h5

    本文从零开始实现一个H5编辑器项目完整设计思路和主要实现步骤,并开源前后端代码。有需要的小伙伴可以按照该教程从零实现自己的H5编辑器。...每次修改编辑操作都把整个pageDataJson字段push到historyCache 点击redo/undo时根据index获取到pageDataJson重新渲染页面 psd设计图导入生成h5页面 将...psd每个设计图中的每个图层导出成图片保存到静态资源服务器中, 服务端安装psd依赖 cnpm install psd --save 加入psd.js依赖,并且提供接口来处理数据 var...跟编辑预览画板实现逻辑差不多。 然后使用vue-cli库打包命令将组件打包成engine.js库文件。ejs模板引入该页面组件配合json数据渲染出页面 ?...console.log('mongodb connect suucess'); }) } } 把mongodb配置信息放到config.json中统一管理 然后

    5.4K30

    psd 替换智能图层的的实现-个性化定制网站

    2.3d建模,然后再模型上应用贴图纹理,这种确实是能实现,因为是真实的3d渲染,前端有许多优秀的 3d展示库 如 three.js等,展示模型确实也比较简单,可是难点在于建模,我们只有平面设计师,每做一个产品都要建模渲染未免成本也太高了...,平面设计师现学也来不及,单独又要招聘人才,这种方案备选 3.直接解析PSD 文件中的智能图层,设计师制作好PSD模板后,解析PSD文件,替换智能图层,最终实现效果,这个方案是最符合现有的人员构成的了,...确定了最终方案后就开始搜索有哪些解析智能图层的库 找到了一个官方的库和第三方库 Adobe Photoshop File Formats Specification https://github.com/meltingice/psd.js...; }); psd.js 只能做解析无法做还原,我们的需求是不但要解析更重要是能还原psd,还原psd库有哪些难点呢,首先要清楚知道psd文件的组成部分,还要知道ps中各个模块的数学知识,手动解析然后还原成...psd是不可能的,要是实现了那还不得做成中国版的ps了 搜索了几天后来发现了这个网站 foxpsd-在线psd文件处理工具,替换图层智能对象api接口 FOXPSD https://foxpsd.com

    1.2K10

    图形编辑器基于Paper.js教程15:在Paper.js实现拖拽图片导入画布功能

    在这篇文章中,我们将探讨如何使用Paper.js和HTML5的拖放API,来实现将图片文件直接拖拽并导入到Paper.js的画布中。...paper.Raster类:一旦图片加载完成,我们使用Paper.js的Raster类将图片导入到画布中。...五、总结 通过上述步骤,我们实现了一个简单而直观的图片拖拽导入功能。...在此过程中,我们利用了HTML5的拖放API和FileReader接口,并结合Paper.js强大的图形处理能力,实现了一个用户友好的功能。...这个功能可以扩展到更多的文件类型和更多复杂的操作中,例如对导入的图像进行编辑或处理。 希望通过本文的讲解,您对如何在Web项目中实现类似功能有了更深入的理解。

    10610

    交互设计工具的选择心得

    加之之前看过一些关于QuartzComposer的介绍,总算找到一个机会好好花点时间来琢磨一下交互设计的实现部分。...首选当然是已经让我激动已久的QuartzComposer ,上手还真不轻松,在网上搜集了一些资料,然后一步步的安装和尝试。...{QC.jpg} 然而即使如此,也并没有帮助你解决代码实现这方面的问题,只是花了很多时间去设计了一个可以交互的好看一点交互效果。  ...最吸引我的点还是要数他的 PSD , Sketch 文件的导入功能,有一个需要注意的问题是,Framer的导入要求最小单位是 Group 也就是说无论你是个什么图形还是智能对象,想要被Framer导入进去...把PSD导入到Framer里面,最方便的地方在于我不需要去找元素的位置,程序默认会按照PSD的定位写好,这一点让我很愉快。  反过来,QC是需要每加一个模块都需要手动去调整数值,非常让人头大。

    48940

    前端工程师如何干掉设计

    Photoshop使用   大多数前端工程师都有过切图的经历,也就是将设计师制作的PSD等格式的图片按照需求切成项目需要的大小并实现页面的呈现,那么作为一名合格的前端工程师,我们有必要了解并熟练的掌握Photoshop...将刚刚下载的动作文件载入即可   (3)使用动作   载入完成后,打开任一psd文件,步骤如下:   a.首先我们选择“移动工具”,将“自动选择”勾选   b.点击我们要切的图标,在图层面板中我们可以看到对应的图层已经被定位到...(3)fontawesome图标库:http://fontawesome.io/   fontawesome是一个以导入CSS文件的形式加载的图标库,适合中后台项目的开发使用。...2.适合移动端   (1)Foundation:http://foundation.zurb.com/   Foundation是一款体积小并且提供响应式布局的移动端优先的UI工具库。   ...其以移动优先为理念,从小屏逐步扩展到大屏,最终实现所有屏幕适配,适应移动互联潮流。

    2.1K40

    Java——数据库编程JDBC之快速入门吐血总结及各关键对象详解(提供了JDBCUtils工具类)

    JDBC的本质是SUN公司定义的一套操作所有关系型数据库的规则,即接口,各数据库厂商实现这套接口,提供数据库驱动jar包,用户可以使用这套接口(JDBC)编程,真正执行的代码是驱动jar包中的实现类。...2 JDBC的快速入门 使用JDBC的步骤: 1)导入驱动jar包:mysql-connector-java-5.1.37-bin.jar;           -- 复制jar包到项目的libs目录下...3.4.2 ResultSet进阶练习(查询的数据封装为对象) 【要求】:查询emp表中的数据,将其封装为对象,然后装载集合返回。...【实现思路】: 1)定义Emp类; 2)定义方法public List findAll(){} 3)实现方法:select * from emp; 【源码】:其中,可以以findAll方法为模板...and psd = ?

    46920
    领券