最近项目有一个绘制的功能,搜了一圈发现fabric.js口碑不错,但是文档稀缺,于是东看看西搜搜的把项目的需求都给实现了,想分享一下. 篇幅有点长,但看完后可以轻松驾驭fabric.我的项目是基于VUE+webpack的. 先来看一下整体效果 1.安装fabric 在node环境下安装fabric.js需要先安装 jsdom 和canvas ①安装jsdom依赖 npm install jsdom --save-dev ②安装canvas依赖 npm install canvas --save-

在做移动端开发的时候大家应该都遇到过这么一个问题:如何在手机上打印调试信息? 在pc端我们通常会用console.log 或者 alert,但大家知道console.log在手机上是看不到打印信息的:而用alert话,alert后还要点击确定,如果循环alert,那就悲剧了,一直点确定吧,可能手机还因此搞死机了. 那么有没有一种显得更加优雅的方式去输出调试信息呢? 有的.使用debug.js就好了. 快速上手 引入debug.js后,你会得到debug这个方法,是用方法如下: debug.suc

vue.js学习之 如何在手机上查看vue-cli构建的项目 一:找到config文件夹下的index.js文件,打开后,将host的值改为你本地的ip,保存后重启项目 二:输入ip和端口号打开项目 三:将地址复制,使用二维码转换工具(草料二维码)生成二维码后,使用手机扫描,就可以查看了. 注意:扫描后浏览器会有一个提示信息,点击访问原网页就行了 后续更新: 2017/12/20更新,新版vue-cli,部分手机浏览器访问白屏: 将config/index.js  的devtool: 'eval

之前翻译过一篇关于fastclick的快速点击文章http://www.cnblogs.com/lilyimage/p/3568773.html,fastclick可以解决在手机上点击事件的300ms延迟:另外我们也知道zepto的touch模块,帮助我们实现了很多手机上的事件,比如tap等,tap事件也是为了解决在click的延迟问题.那么他们有什么区别呢? 先看zepto的touch模块实现: $(document) .on('touchstart ...',function(e){ ...

SlidesJS 3.0.4 http://slidesjs.com 在手机上遇到的一些问题及解决办法 1.手机上打开有sliderjs的页面后, 切换到别的页面再回来时, sliderjs部分不能滑动了2.手机上打开有sliderjs的页面后, 在sliderjs部分不断的进行上下滑动时, 会出现空白的情况 html: <div class="m-banner"> <p class="prev"><span class="s

由于有时候谷歌手机调试与真是的手机环境还是有一定的差距,所以需要在手机上测试项目. 手机上测试vue-cli构建项目方法: 打开项目config/index.js文件,找到module.exports配置里面的dev配置,修改host值: 方法一: 修改host值为0.0.0.0(推荐) 这样就可以通过ip和localhost两种方式访问项目:http://localhost:8080 或者 http://10.177.16.31:8080 方法二: 修改host值为自己的ip 这样只能通过ip

用vue-cli构建的项目有时候有些功能需要在手机上测试,比如上传图片的时候调用手机拍照功能或者查看相册的功能,这个时候就要用到手机测试了,那么如何在手机上查看测试vue-cli构建的项目?今天就写一写具体步骤. 1:打开cmd,命令行运行 ipconfig,得到本机的ip地址: 2:得到ipv4值, 用该值替换localhost 例如 localhost:8080 替换成 192.168.1.101:8080 3:找到config文件夹下的index.js文件,打开后,将host的值改为我本地

如果你是一名nodejs开发者,是否想过以下问题:在手机上运行nodejs程序?用手机当nodejs服务器?在手机上做nodejs编程?YES!使用Termux,以上都可以做到! 下面展示如何实现这个黑魔法.1.Termux是一款linux模拟器.开源,且运行时不需要root,工作于Android终端,支持apt管理软件包,完美支持nodejs.OK,有这些先决条件,手机上做nodejs开发的条件齐了. 2.首先是在手机下载安装termux,它的官网是:https://termux.com/ 3

viewport是专为手机浏览器设计的一个meta标签: 有些屏幕很小有智能手机,但分辩率却可以做得很大,比如小米4的默认分辨率为:1920*1080,比许多电脑桌面的都还大,传统桌面网站直接放到手机上阅读时,界面就会显得非常小,阅读体验就很差,就样就需要一种将原始视图在手机上放大的机制,使用viewport标签可以解决这个问题,如 <meta name="viewport" content="width=device-width, initial-scale=1&qu

最近在做一个微信端的项目,快到接近尾声的时候,发现还没放入音频,于是乎,放入音频,在电脑端测试一切正常,无阻碍. 后来在手机上测试,发现背景音乐不能播放,于是开始找错,刚开始以为是IIS服务器出错,结果经过各种测试,发现不是IIS的问题,继续找错,又以为是标签使用不当,然后当时利用html4的object 和embd标签代替,embd标签能播放声音,但是却有许多bug,总之各种舒服. 于是,经过多方询问,以及百度,最后才知道,原来是手机上的浏览器对音频.视频的自动播放功能在去年的九月底就已经屏蔽

Logs Viewer 功能描述 Using this tool you can easily check your editor console logs inside the game itself! No need to go back to the project and do any tests to track the problems! 使用此工具,不管在手机或者Unity Editor中,你都可以很容易地检查/查看游戏输出的日志,而不需要回到项目和做任何测试跟踪问题!(开源免费)

transform:rotate 属于简单好用的效果,但在手机上显示时,会有比较明显锯齿. 解决方案也很简单, 利用外层容器的overflow:hidden 加上图片margin:-1px 就可以解决. 原理没去深究,理论上是矢量跟位图的处理不一样,这个方案也有个小问题 就是图片变小了 ^_^ 可以用手机看看demo http://labs.aoao.org.cn/demo/transform-rotate/ update: 大家反应这方案在电脑上反而会出问题. 我测试了个新的方案rotate3

bootstrap导航条在手机上默认展开二级目录,必须用setTimeout才能实现 $(document).ready(function() { $('.dropdown').hover(function(){ $('.dropdown').removeClass('open'); $(this).addClass('open'); }); $('.dropdown-toggle').click(function(){ location.href= $(this).attr('href');

首先,表明我的态度:采用 Flash 才是最优方案,不建议使用 HTML 5 的 Canvas 做一些生产/工业级的网页应用. Flash的优势一是浏览器支持好,二是代码成熟稳定.而HTML5 的 Canvas 不利用网络上开源的 JS 绘图库,你是不可能做出复制的 Canvas 应用的.而网络中的 JS 绘图库目前杂且乱,部分库没更新几个月项目就被废弃了,现在还没有像 JQuery 之于 JS一样那么流行的 Canvas 绘图库.我看好的就是 Createjs   和 Fabric.js. 其

引言 用Qt程序在手机上显示一幅图片对编程人员来说是再基础不过的一件事情了.那么先让大家看两段代码: //dangerous should not be used, cannot display earth.png, //but if we change earth.png to a smaller image e.g. apple.png, apple.png can be displayed QPixmap pixmap; pixmap.load( ":/pics/earth.png&quo

小编今天给大家推荐一款强大的远程控制软件——TeamViewer,可以让你的手机连接你自己的电脑,不管你身处何处,只要电脑和手机都能联网,那么你就可以在手机上控制你的电脑了.以下介绍下如何安装和使用方法. TeamViewer安装使用教程 一.电脑和手机的安装 1.电脑端安装,下载TeamViewer,选择安装,相对比较简单. 建议个人模式安装因为这个可以免费使用 2.手机端安装,也非常简单,这里也不详细说明,只要在手机助手之类的APP里面下载安装即可. 二.临时性远程登陆. 1.电脑端首次使用

1.打开控制面板 2.打开程序和功能 3.打开或关闭功能 4.internet信息服务展开后里面所有的都要选中 5.回到桌面,然后右键计算机,选择'管理' 6.先在E盘或者D盘创建一个文件夹,自己随意命名. 7.把你的html,css,image都拷贝到你刚刚创建的文件夹中去 8.右键网站,点击添加网站 9.网站名称随意命名,物理路径就是你刚才创建的文件夹所在的位置 10.端口可以填8000,8011等等 11.填好后,点击确定按钮就行了. 12.打开浏览器输入localhost:8000 13

本文介绍fabric.js框架使用,以及使用fabricjs打造一个高级画板程序. 高级画板功能介绍 全局绘制颜色选择 护眼模式.网格模式切换 自由绘制 画箭头 画直线 画虚线 画圆/椭圆/矩形/直角三角形/普通三角形/等边三角形 文字输入 图片展示及相关移动.缩放等操作 删除功能 (文末附:画板GitHub地址&fabric.js使用秘籍) 功能截图如下: 动态效果图: fabric.js介绍 fabric.js是什么fabric.js是可以简化canvas编写的js库,提供canvas缺少的

在微信小程序开发中,可以非常方便的集成客服功能,只需要一行代码便可以将用户引导至客服会话界面.这行代码就是: <button open-type="contact" bindcontact="handleContact">联系我们</button>    当用户点击这个[联系我们]的按钮时,便会进入微信自带的小程序客服会话界面.如下图: 虽然只能发送表情和照片,但是对于小程序来讲,已经是非常不错的功能了. 但是,虽然可以一行代码让我们的小程序

记:今天调试时出现的一个PC端调试运行正常,但打包apk文件后在手机上点击闪退的问题. 可能在不同的情况条件下,会有不同的原因导致apk安装后闪退问题.拿android studio等软件来说,开发安卓程序时会有日志log文件包含生成错误信息等,但是cocos2dx开发在命令行里编译apk,意外的错误缘由难以直面地展现给我们. 闪退的大致问题都殊途同归:资源的加载出现问题. 我今天出现这个问题之后,进行了一些尝试,在解决问题的过程当中,大致操作如下: 1.将Resources资源文件夹下的全部目

篡改请求 可以测试各种异常 原理:clint->server正常是客户端发送请求到服务端,charles相当于一个拦截器,拦住客户端的请求,并进行修改,修改后再发送到server端 Server->clint正常是服务端响应客户端请求,结果服务端发送响应后charles拦住了响应信息,并进行修改信息,之后再发送给客户端 https是经过证书加密过的请求,所以不可以解析 1.窜改请求 打开charles,打开浏览器,输入网址,在charles中找到要拦截的请求的信息,选中请求,并点击鼠标右键,选