元素数量多了,难免会产生重叠。又或者某些效果需要几个元素重叠起来。这些情况大概率需要控制元素的层级。
不知道你在使用 Fabric.js 时有没有发现,如果一个画布存在多个元素,而且它们之前是层叠的,当你选中底层的元素时,那个元素会跳到最顶层;当你释放该元素后,它又跑回原有层级。这是 Fabric.js 的默认状态。
其实 Fabric.js 已经提供了相应的 API 去完成上面的需求了。但直到今天, Fabric.js 官方文档还是那么晦涩难懂,于是就有了本文。
小程序分享到朋友圈只能使用小程序码海报来实现,生成小程序码的方式有两种,一种是使用后端方式,一种是使用小程序自带的canvas生成;后端的方式开发难度大,由于生成图片耗用内存比较大对服务端也是不小的压力;所以使用小程序的canvas是一个不错的选择,但由于canvas水比较深,坑比较多,还有不同海报需要重现写渲染流程,导致代码冗余难以维护,加上不同设备版本的情况不一样,因此小程序海报生成组件的需求十分迫切。
您正在阅读的手册文档包括了系统化的介绍 Cocos Creator 的编辑器界面、功能和工作流程,但如果您想快速上手体验使用 Cocos Creator 开发游戏的大体流程和方法,这一章将满足您的好奇心。完成本章教程之后,您应该能获得足够上手制作游戏的信息,不过我们还是推荐您继续阅读本手册来了解各个功能模块的细节和完整的工作流程。
mpvue 是兼容微信小程序的生命周期与 vue 的生命周期,vue 实例会接管小程序 Page 实例的生命钩子,因此需要使用到小程序的生命周期钩子时,可将相应的钩子方法定义在 vue 实例中 如定义当前Page的分享标题内容图片:
PixiJS 是一个使用便捷且高效的2D渲染引擎——没错,它不是大而全的游戏引擎,而是更轻量的渲染引擎。
最近自己开发了一个图片编辑器,把源码也放在了GitHub上,顺便也总结下使用fabric.js开发一个编辑器需要用到哪些知识点。
接下来,我会把纯前端实现生成带二维码的海报全流程给大家讲个明明白白,把我自己遇到的坑,给大家详细分享并讲解,防止大家遇到相似问题,即使遇到问题,也会有一个明确的方向,并且吐血建议大家收藏一波,以备不时之需。(你不能保证以后的需求,没有类似的吧,有的话,记得翻出来看看)
事情是这样的,在我看完w3c的介绍和很有说服力和教学力的demo后,本着实践出真知的思想决定上手一试,这一试不要紧~
如果你的项目使用到 fabric.js ,可以直接使用 fabric.js 提供的方法去遮盖画布,而且用法非常简单。
从2012年开始,微信那个时候用户的积累的量已经非常大了,推出公众号,当然大屏智能手机在那个时候也流行,传统的大众媒体逐步消亡,像微信公众号这样的新媒体盛行。企业的广告投入开始从电视等传统媒体向基于圈层文化的新媒体精准营销转移,甚至很多企业尤其互联网企业开始思考如何利用用户的自传播这种方式去宣传企业、实现商业目标。而用户的自传播很好的途径就是生产个性化的海报。举个最常见的例子,我第一次使用Keep是因为在朋友圈看到朋友分享她运动量的一个截图,当时在我看来非常酷,有心率脉搏呀、时速运动量啊、消耗的卡路里等,还有一个二维码,然后我就点了下载了Keep,这整个获客成本几乎为0,秒秒钟就多了一个用户。而实现这一过程的技术手段就可以用canvas。所以,canvas的盛行,与企业的精准营销和用户的自传播有很大的关系。 如极客时间的一些实现案例:
现在有很多在微信里流行的h5活动页。这些小h5大部分都是简单的交互然后得出一个abcd早就拟定好的结果,根据你的选项分几种情况,最终得到其中一个作为你测试的答案。比如这个就是最后那张结果图:
社区里有一群canvas爱好者,比jsh5css,安静的小智,jeffer等同学他们在canvas方面都有着自己的学习心得和见解。 但是极乐叔发现在小程序开发学习过程中还是有很多小伙伴折戟在canvas上,为此我们在社区首页教程内专门开了一个canvas学习栏目,但是觉得仍然不够,canvas在全网的知识还是太少,所以今天集中一下全网的资料,方便以后遇到问题的同学,能够从中找到可能的参考。 假如本文中有错误或者需要补充的部分,欢迎给同学提出或补充!你也可以在后台投稿发表自己canvas方面的心得或demo
我们从已经安装了CocosCreator 懂得建立HelloWorld项目 有前台与后台交互基本思想 但是完全不知道node.js是啥 的前提开始讲 提醒 : 如果在按照这个流程学习的过程中 有任何的bug 请在该帖子下回复 因为写帖子和敲代码还是两回事 可能有一些和描述上不一样的地方 首先下载并安装 node.js node.js MAC OS : (为什么放网盘里面呢 鬼知道你看到这篇帖子的时候 api都换了几代了)node.js_for_mac 双击安装 不断下一步就OK了 完成后安装目录如图
而会议中最令我眼前一新的当然是 轮子哥 Rich-Harris 带来的 Svelte Cubed 了。
cover-view需要多强调几句,uni-app的非h5端的video、map、canvas、textarea是原生组件,层级高于其他组件。如需覆盖原生组件,比如在map上加个遮罩,则需要使用cover-view组件
0x00 背景 撞库扫号攻击已经是Top 10 Security Risks for 2014之一,不管你的网站密码保存的额多好,但是面试已经泄露的账号密码,撞库扫号防御还是一个相当重要的环节。之前一篇普及了扫号的基本防止防范和危害。 本篇讲详细解决面对技术同步在进步的黑色产品如何更好地防止撞库扫号。由于涉及相关内部策略,也只是抛砖引玉。 撞库扫号,无非是自动化或者脚本化执行用户名密码来进行登陆,通过页面跳转302状态或者返回特征及包的大小,是否重新set-cookies来判断是否登陆成功。 那么可以通过哪
说到地图,大家一定很熟悉,平时应该都使用过百度地图、地图、腾讯地图等,如果涉及到地图相关的开发需求,也有很多选择,比如前面的几个地图都会提供一套js API,此外也有一些开源地图框架可以使用,比如OpenLayers、Leaflet等。
在很多项目中都会有在前端展现数据图表的需求,而在开发过程中,开发者往往会使用一些JavaScript库,从而更有效地达到想要的目标。最近,TechSlide上的一篇文章总结了50种用于展现图表的JavaScript库,并对每种库做了简要的说明。这对于想要选择合适JavaScript库的开发者很有参考意义。
为了解决部分历史渲染问题,实现移动端canvas渲染的新功能,以及支持后续功能扩展,对腾讯文档Doc Canvas渲染引擎的流程进行了改造,本文对改造进行介绍和小结。
随着时间的发展,前端开发的范围越来越广,能够实现的功能也越来越多,要实现的功能也五花八门,今天就给大家介绍一个web截图库,让前端也能实现截图功能—— js-web-screen-shot
CocosCreator 的节点上的颜色属性对 3D 模型是不起作用的,要想修改模型颜色就要对材质操作,而材质是基于 effect 渲染的。那么怎么改变模型颜色呢?
1.app.js 里面调用微信登录异步,这样导致首页onload 提前加载,那么写在onload 里面的 接口拿不到请求参数,解决办法:设置一个请求开关,写一个页面回调函数。 2. 小程调用canvas 的层级较高,使用普通的标签 设置z-index 不生效。 解决办法:使用cover-view 代替 view, cover-image 代替 image 3. image 设置图片src 不显示图片问题。 解决办法: 坚持请求是不是https ,检查nginx 的配置等。 4. 在button 上设置o
前段时间一直在更 vue2的源码系列,最近换了换口味,学了一下 cocos ,照猫画虎的写了一个「挑战1024」小游戏。
Flutter Web 稳定版本发布至今也有一年多了,经过这一年多的发展,今天就让我们来看看作为大前端时代的乱流,Flutter Web 究竟有什么不同之处,「本篇分享主要内容是目前 Flutter 下少有较为全面的 Web 内容」。
作者:louiszhai,腾讯增值服务项目管理员工 背景 为了满足日益复杂的小程序活动需求,腾讯增值服务项目组开发了一款Ulink活动小程序,该小程序以游戏社交圈为依托,提供游戏玩家基本的社交功能,如发帖、评论、点赞、分享等。 为了支持这些功能,进行了一系列的性能优化改进。Ulink活动小程序共有5个tab,分别提供关注人的feeds信息、所有用户的精品分享,图文发布入口、消息及个人页,如下所示。 开发过程中折腾了各种各样的挑战和难题。其中以性能问题最为棘手,主要有体现在以下几个方面: 小程序首次访问
使用一个简单的游戏开发示例,由浅入深,介绍了如何用Laya引擎开发微信小游戏。
声网Agora跨平台开发工程师卢旭辉带来了《Flutter2 渲染原理和如何实现视频渲染》的主题分享,本文是对演讲内容的整理。
简要介绍今天的分享大纲,罗马不是一天建成的,小程序也不是一天发明的;小程序这种介于H5和Native App之间的特殊应用形态,从探索到成熟,经历了哪些过程,我们首先带大家回顾梳理一下,然后从现有技术架构出发,分析小程序当下几个主要性能坑点,各家小程序引擎为解决这些坑点,做了哪些完善工作;比如大家知道小程序是以web渲染为主、原生渲染为辅,那引入原生渲染后,引发了哪些新的问题?为解决这些,微信提出了同层渲染的方案,同层渲染在技术层面上又是如何实现的?最后从当前已知问题出发,对于小程序未来的技术更迭,抛出一些我们认为的可能方向,供大家参考。
Canvas 状态保存机制 中 , 存在两个栈结构 , 分别是 状态栈 和 图层栈 ;
本文介绍了一种基于HTML5 Canvas的弹幕绘制方法,该方法利用Canvas特性实现文字和图像的混合显示,并采用数学方法对弹幕进行精确控制。同时,该方法还可以实现弹幕的半透明效果和多层弹幕的叠加显示。
在现在每一个软件应用中,用户界面(UI)都是核心的特征。游戏也没有抛弃这一规则。有非常多的游戏都使用 UI 来显示一些信息,比如生命值,技能,地图,武器的弹药,等等。 Unity 3D 提供了许多 UI 组件,你都可以在你的游戏中使用它们。在这篇文章中,我会指导你在 unity 的菜单中如何创建一个简单的暂停菜单。这个暂停菜单将显示一个内容为『Paused』的 text 组件和三个按钮组件:分别是复位按钮『Resume』,重新开始按钮『Restart』,退出按钮『Quit』,并且还是显示游戏从场景加载到现在的时间。在这篇文章的最后,你应该创建出了类似下面的界面:
本文是可视化拖拽系列的第四篇,比起之前的三篇文章,这篇功能点要稍微少一点,总共有五点:
年终了,听说你也在开发年终盘点?也许你可以看看这篇腾讯 ABCmouse 圣诞年终盘点活动页的踩坑实战记录。 圣诞节的时候 ABCmouse 为用户精心准备了一份圣诞礼物,你也想看下吗?快来扫下这个神奇的二维码... 好吧,知道你可能不想扫码 '__' ,直接看下图吧(截取了其中一段) 当然了,这篇文章不是介绍整个开发过程(实际上本身开发周期很短,开发才三天,另外两天bugfix和视觉还原,时间非常赶)。这篇文章主要记录我在开发的过程的过程的一些经验总结和遇到的坑。 坑一:视频坑 这次的年终盘点在前
UGUI是新版Unity自带的原生UI系统,组件也在不断的增加扩展,基本的贴图,文本,按钮等还是可以用的。接下来的几篇内容会以UGUI展开分享。
用户鼠标移入时,有弹出框出现,这样的需求很常见。这在处理HTML元素实现时简单,但是如果是对HTML5 Canvas 构成的图形进行处理,这种方法不再适用,因为Canvas使用的是另外一套机制,无
Bilibili 官网冬季的 banner 图吸引了我,一开始是中午图,鼠标左移浮现早上图,右移浮现晚上图,挺有意思
用PS打开图片,点击点击“文件”——“存储为Web所用格式”将图片存储为Web所用格式,点击“存储”。
在使用 canvas 编辑图片,使用添加弹框来自定义添加文字,在微信开发工具上是正常弹窗不会被挡到,到手机上测试,发现弹框一直会在 canvas 组件后面
内容来源:2018 年 3 月 11 日,CODING 资深前端工程师杨臻在“【上海站】CODING 技术小馆-前端工程师的自我修养”进行《那些年我们一起踩过的坑——WebIDE 前端札记》演讲分享。
本人一直使用的是微信开发者工具,当然Sublime和Atom这些都是可以的,看个人习惯。微信开发者工具主要是API有自动提示方便些,不过后期熟悉了,都还Ok。不过9月1号更新的那个版本真的好卡!! 虽然增加了关联腾讯云及测试,然这些对绝大部分开发者并没什么卵用~~
将网页保存为图片(以下简称为快照),是用户记录和分享页面信息的有效手段,在各种兴趣测试和营销推广等形式的活动页面中尤为常见。
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
小程序是一种不用下载就能使用的应用,也是一项门槛非常高的创新,经过将近两年的发展,已经构造了新的小程序开发环境和开发者生态。小程序越来越火爆,基于微信的各类小程序优秀项目真实层出不穷,小程序商城更是成为了企业商家的标配,
按需加载 合并压缩文件 将小图标合并成雪碧图 字体图标 dataURL 内置图片
将自己经历的一些问题记录在案,方便后续类似相同需求直接使用“CV 大法”,节省部分开发成本。当然,如果此文某一条正好对屏幕前的你有所帮助,点个小赞赞,我会贼老开心的~欢迎大家提供更好的解决方案,我比较是搞 Android 的,这方面还真不熟练。
Tarsier是优锘科技推出的一款可视化+大数据的IT运维管理产品,针对当前业务环境和技术环境下企业IT运维面临的结构复杂、数据碎片、变化常态、机制板结等问题,Tarsier提供以可视化、场景化为核心理念的系列产品助力企业解决问题
腾讯文档目前有 1.6 亿月活, 日活用户峰值超过了 1600 万, 它需要支撑起千人同时编辑, 极限情况下,需要支撑数十万行的数据渲染交互不卡顿.
领取专属 10元无门槛券
手把手带您无忧上云