关键词:
<template> <div> <div id="slide_unloack_wraper"> <canvas width="310" height="155" id="slide_unloack_wraper1"></canvas> <div id="slide_unloack_inner"> <canvas width="310" height="155" id="slide_unloack_inner1"></canvas> </div> </div> </div> </template> <script> export default data() return isSuccess:false,//是否滑动成功 , created() , mounted() // 将两张图片渲染在cavas上 var canvas = document.getElementById(‘slide_unloack_wraper1‘); var block = document.getElementById(‘slide_unloack_inner1‘); var canvas_ctx = canvas.getContext(‘2d‘); var block_ctx = block.getContext(‘2d‘); var img = document.createElement(‘img‘); img.onload = function() canvas_ctx.drawImage(img, 0, 0, 310, 155); block_ctx.drawImage(img, 0, 0, 310, 155); var blockWidth = w + r * 2;//滑块实际宽度 var _y = y - r * 2 + 2 // 滑块实际的y坐标 var ImageData = block_ctx.getImageData(x, _y, blockWidth, blockWidth);//拿到滑块的像素数据 block.width = blockWidth;//将滑块dom元素的宽度设置成滑块的掉 block_ctx.putImageData(ImageData, 0, _y) ; img.crossOrigin = ‘Anonymous‘;//防止图片报跨域的错 img.src = ‘http://kexiepingtaieposter.hoohui.cn//registFile/fa5df7c9-445d-4b58-97c4-ad8b86a92241/Z0134_20200224232124.png?time=‘+ new Date();//加事件戳 防止图片报跨域的错 // 先利用clip()方法裁剪出个方块儿,让大家认识裁剪 var x = 150, y = 40, w = 42, r = 10, PI = Math.PI;//x坐标、y坐标、正方形的宽、圆的半径、圆周率(3.14...) function draw(ctx, operation) ctx.beginPath();//拿笔 ctx.moveTo(x,y);//把笔尖点到这个点 ctx.lineTo(x+w/2,y);//笔尖画到 正方形上边线中间 ctx.arc(x+w/2,y-r+2, r,0,2*PI); //在坐标点(x+w/2,y-r+2)画一个r为半径的圆,角度开始为0,结束角度为2π,顺时针画个圆 ctx.lineTo(x+w/2,y);//笔尖移动到 正方形上边线中间 ctx.lineTo(x+w,y);//笔尖画到 正方形的上边线的右侧 ctx.lineTo(x+w,y+w/2);//笔尖再画到正方形的右边线中间点 ctx.arc(x+w+r-2,y+w/2,r,0,2*PI) //在合适的位置画个圆 ctx.lineTo(x+w,y+w/2);//笔尖画到正方形的 右边线中间点 ctx.lineTo(x+w,y+w);//笔尖画到正方形右边线的底部 ctx.lineTo(x,y+w);//再画到正方形的下边线的左侧 ctx.lineTo(x,y);//再画到正方形的起始点 形成闭环 // ctx.clip();//用剪刀裁剪 ctx.fillStyle = ‘#fff‘;//填充背景 ctx[operation](); ctx.beginPath();//重新开始画 ctx.arc(x,y+w/2, r,1.5*PI,0.5*PI) // 只需要画正方形内的半圆就行,方便背景图片的裁剪 ctx.globalCompositeOperation = "xor";//将原图遮盖出一个缺口 ctx.fill();//填充颜色 前面没加fillStyle就是白色 draw(canvas_ctx,"fill"); draw(block_ctx,"clip"); // 绘图结束 // 添加事件 var self=this; self.$nextTick(()=> //一、定义了一个获取元素的方法 function getEle(selector) return document.querySelector(selector); //二、获取到需要用到的DOM元素 var box = getEle("#slide_unloack_wraper"),//容器 slider = getEle("#slide_unloack_inner"),//滑块 maxMoveX = box.offsetWidth- 64,//解锁可以滑动的距离 64是写死的 downX,//用于存放鼠标按下时的位置 successUnlockX=[130,170];//成功解锁活动距离 //三、给滑块添加鼠标按下事件 slider.onmousedown = mousedownHandler; slider.ontouchstart = mousedownHandler;//移动端加touchstart事件 //3.1鼠标按下事件的方法实现 function mousedownHandler(e) slider.style.transition = ""; var e = e || window.event || e.which; downX = e.clientX ? e.clientX : e.changedTouches[0].clientX; if(!self.isSuccess) //在鼠标按下时,分别给鼠标添加移动和松开事件 document.onmousemove = mousemoveHandler; document.onmouseup = mouseupHandler; //添加移动端对应事件 document.ontouchmove = mousemoveHandler; document.ontouchend = mouseupHandler; ; //四、定义一个获取鼠标当前需要移动多少距离的方法 function getOffsetX(offset,min,max) if(offset < min) offset = min; else if(offset > max) offset = max; return offset; //3.1.1鼠标移动事件的方法实现 function mousemoveHandler(e) var e = e || window.event || e.which; var moveX = e.clientX?e.clientX:e.changedTouches[0].clientX; var offsetX = getOffsetX(moveX - downX,0,maxMoveX); slider.style.left = offsetX + "px"; e.preventDefault(); ; //3.1.2鼠标松开事件的方法实现 function mouseupHandler(e) var moveX = e.clientX?e.clientX:e.changedTouches[0].clientX; var endX = getOffsetX(moveX - downX,0,maxMoveX); if(endX <= successUnlockX[1] && endX >= successUnlockX[0]) slider.style.left = endX + "px"; success(); if(!self.isSuccess) slider.style.left = 0 + "px"; slider.style.transition = "left 0.5s linear"; document.onmousemove = null; document.onmouseup = null; //移除移动端事件 document.ontouchmove = null; document.ontouchend = null; ; //五、定义一个滑块解锁成功的方法 function success() self.isSuccess = true; //滑动成功时,移除鼠标按下事件和鼠标移动事件 slider.onmousedown = null; document.onmousemove = null; //移除移动端事件 document.ontouchstart = null; document.ontouchmove = null; self.$emit("successUnlock"); ; ) , methods: , </script> <style scoped> #slide_unloack_wraper position: relative; #slide_unloack_inner position: absolute; left:0; top:0;
touch-action: none;
</style>
使用:
import SlideToUnlock from ‘@/components/slideToUnlock‘;
components:SlideToUnlock,
<SlideToUnlock @successUnlock="unlockSuccess()" />
效果:
手机端:
睡觉。。。
。
一uniapp项目(封装异步请求moment.js时间处理封装手势滑动组件下载图片到本地)(代码片段)
一、封装异步请求:1.为什么要封装?2.封装的思路exportdefault(params)=> //显示加载中 uni.showLoading( title:"加载中" ) returnnewPromise((resolve,reject)=> wx.request( ...params, succ 查看详情
typescript滑动手势-相册组件中的照片滑动(代码片段)
typescript滑动手势-将滑动手势添加到相册组件(代码片段)
typescript照片滑动动画-专辑组件(代码片段)
android自定义滑动解锁view(代码片段)
✏️丨自定义滑动解锁View1.需求如下:近期需要做一个类似屏幕滑动解锁的功能,右划开始,左划暂停。2.需求效果图如下3.实现效果展示4.自定义view如下/***Desc自定义滑动解锁View*AuthorZY*Mailsunnyfor98@gmail.com*Date2021/5/... 查看详情
selenium模拟jquery滑动解锁(代码片段)
滑动解锁一直做UI自动化的难点之一,我补一篇滑动解锁的例子,希望能给初做WebUI自动化测试的同学一些思路。 首先先看个例子。https://www.helloweba.com/demo/2017/unlock/ 当我手动点击滑块时,改变的只是样式:1、slide-to-unlock... 查看详情
selenium模拟jquery滑动解锁(代码片段)
滑动解锁一直做UI自动化的难点之一,我补一篇滑动解锁的例子,希望能给初做WebUI自动化测试的同学一些思路。 首先先看个例子。https://www.helloweba.com/demo/2017/unlock/ 当我手动点击滑块时,改变的只是样式:1、slide-to-unlock... 查看详情
单张滑动tab组件
/*CSS重置**/body,ul,ol{margin:0px;padding:0px;}.flash{width:300px;height:420px;position:relative;overflow:hidden;}/*图片css*/ul{width:300%;position:absolute;left:0px;top:0px;transition:0.5s;}ul,ol{list-st 查看详情
鸿蒙开源第三方组件——自定义图片缩放组件pinchimageview-ohos
...过识别单指双击、双指捏合、单指滑动等手势指令,实现图片的放大、缩小、滑动等效果。该组件功能丰富且使用简单,被广泛应用于各类图片预览类应用。组件效果展示1、双指相向或相对捏合,实现图片的缩放变化。 2、单... 查看详情
自己开发的vue滑动按钮组件vue-better-slider(代码片段)
...组件实现了类似ios手机淘宝客户端->消息界面中消息的滑动删除功能等,如下为该组件的文档。一个Vue的滑动按钮组件,有关滑动方面的处理借鉴better-scroll的实现。在线例子起步安装npmi--savevue-sliding-button引入importVuefrom‘vue‘i... 查看详情
uni-app图片懒加载
参考技术A实现图片懒加载,并且显示数组中,始终只有3张图片,上下滑动增加的同时,删除最开始的那一张。可以指定从总图片的第几张开始加载。要实现上下滑动时的动画效果,我这里用到是uni-app自带swiper组件。同时为了解... 查看详情
android自定义滑动解锁view(代码片段)
✏️丨自定义滑动解锁View1.需求如下:近期需要做一个类似屏幕滑动解锁的功能,右划开始,左划暂停。2.需求效果图如下3.实现效果展示4.自定义view如下/***Desc自定义滑动解锁View*AuthorZY*Mailsunnyfor98@gmail.com*Date2021/5/... 查看详情
android自定义滑动解锁view(代码片段)
✏️丨自定义滑动解锁View1.需求如下:近期需要做一个类似屏幕滑动解锁的功能,右划开始,左划暂停。2.需求效果图如下3.实现效果展示4.自定义view如下/***Desc自定义滑动解锁View*AuthorZY*Mailsunnyfor98@gmail.com*Date2021/5/... 查看详情
功能源码
...ssHUD的组合封装iOS手势解锁高仿‘微博‘&&‘微信‘图片浏览器App组件化之控制器之间的跳转 仿钉钉报销+cell+textview+自适应自定义cell多个滑动编辑按钮shoppingCartswift的购物 查看详情
vue父页面中含子页面滑动,滑动结束,底部组件进行滑动(代码片段)
...://pan.baidu.com/s/1Yin2q0Fh_6AQJTlbie7QMw 使用1.v-touch实现滑动效果,父级页面滑动,当父级含有子页面需要滑动功能hasClass("sm_img"),需要判断是否继续父级滑动,有的话子页面先滑动,通过upB去判断if($(imgShowChild[that.childNum]).chi... 查看详情
我看到朋友圈里很多创意海报,还可以滑动翻页的,请问这类创意海报是怎么做的,有教程吗?
一、首先,这种可以翻页并可以合成图片的链接是H5,当然你看到的也可能是一张图片上放了一张二维码,本质上是一些网页,用代码完成了一些合成海报的功能交互。这种H5常见的就是网易出品的一些H5,可以在微信朋友圈搜索... 查看详情
appium九宫格滑动解锁
1、适配各种机型,首先获取整个解锁元素的坐标2、代码实现WebElementlockPattern=driver.findElement(By.id("com.android.settings:id/lockPattern"));intx=lockPattern.getLocation().getX();inty=lockPattern.getLocation().getY();intw=lock 查看详情
自定义滑动解锁
】自定义滑动解锁【英文标题】:CustomSlidetounlock【发布时间】:2013-11-0801:33:45【问题描述】:您好,我正在尝试开发一个自定义锁定屏幕,我想用ImageView替换幻灯片以解锁,如图所示。这是我迄今为止尝试过的。我已经在屏幕... 查看详情