多功能React影像组件设计(拖拽、水印、缩放、切换、旋转)

2018-12-07 admin

序:

整理了一下开发的一个React影像组件

由于一些(乱七八糟)的需求,导致之前的组件影像代码冗余,不可维护

看不下去了,是时候出来拯救世界了

于是我上场了

我做的事,就是将各类功能函数抽离,同时代码尽可能的少

这个组件的主要功能有:拖拽、水印、缩放、切换、旋转(更新中)

以及一些小的功能点比如:键盘左右切换、移动时增加透明度等一些细节的优化

不多bb了吧,直接上demo, 自己上来动 传送门

下面我会写一下一些功能的实现


拖拽:

鼠标移动的时候改变modal的位置就可以了

并且要设置一下透明度

let nx = e.clientX;
    let ny = e.clientY;
    // 计算移动后的左偏移量和顶部的偏移量
    let nl = nx - (x - l);
    let nt = ny - (y - t);

    dv.style.left = nl + 'px';
    dv.style.top = nt + 'px';

    // 设置移动时透明
    dv.querySelector('.image-content').style.opacity = .3;

关于这个移动,有个地方要注意

比如我们页面上有两个modal,要保证最后点击的modal要覆盖之前点击的modal

也就是zIndex要控制好,这里用localStorage来保存这个最大的zIndex

imageModalMaxzIndex = localStorage.getItem('imageModalMaxzIndex');
    if (dv.style.zIndex != imageModalMaxzIndex) {
      dv.style.zIndex = +imageModalMaxzIndex + 1;
      localStorage.setItem('imageModalMaxzIndex', dv.style.zIndex);
    }

水印

前端实现水印,避免私密图片泄露

其实水印有好几种解决方案 dom、canvas、svg等

这里用canvas实现

思路就是将文本用canvas生成图片,然后将该图片作为背景repeat

    const canvas = document.createElement('canvas');
    canvas.setAttribute('width', width);
    canvas.setAttribute('height', height);
    canvas.setAttribute('opacity', opacity);
    const ctx = canvas.getContext('2d');

    ctx.textAlign = textAlign;
    ctx.textBaseline = textBaseline;
    ctx.font = font;
    ctx.fillStyle = fillStyle;
    ctx.rotate(Math.PI / 180 * 30);
    ctx.fillText(fillText, 80, 10);

    var base64Url = canvas.toDataURL();
    const watermarkDiv = document.createElement('div');
    watermarkDiv.setAttribute('style', `
          position:absolute;
          top:0;
          left:0;
          width:100%;
          height:${scrollHeight || '100%'};
          z-index:1000;
          pointer-events:none;
          background-repeat:repeat;
          background-image:url('${base64Url}')
    `);

这里有一篇文章总结了几种前端水印的方案,推荐给大家 文章


缩放

缩放的话,监听鼠标滚动事件

向上滚动放大,向下滚动缩小这样

这里要注意控制最小缩放值,不然会比原子还小,很危险的

还要注意的是图片在边界的缩放,会突然迷失在宇宙中(移除屏幕,这是可能的)

这里要做的处理是判断左边界跟图片的宽度

// 不让modal由于缩小消失在视野中
  if (modalLeft + calcWidth < 50) {
    return;
  }

切换

切换其实就是改变imageModal的src

  prev() {
    const { currentImageIndex } = this.state;
    if (currentImageIndex > 0) {
      this.setState({ currentImageIndex: currentImageIndex - 1 });
    }
  }

  next() {
    const { currentImageIndex, imageList } = this.state;
    if (currentImageIndex < imageList.length - 1) {
      this.setState({ currentImageIndex: currentImageIndex + 1 });
    }
  }

关于组件的使用

如果你看得起这个组件,刚好你又有这中神奇的需求,需要这么个影像组件,那以下:

主要的东西就四个,一个common文件夹,一个imageModal.js、一个Container.js、一个index.css

将这四个文件拿出来,自己根据自己的需求改就行

调用方法:

<ImageModal 
    visible={modalVisible}
    src={imageList[currentImageIndex]}
    next={() => this.next()}
    prev={() => this.prev()}
    closeModal={() => this.closeImg()}
    userId="多功能图片组件"
/>

github地址

原文链接:https://segmentfault.com/a/1190000017290976

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-47484.html

文章标题:多功能React影像组件设计(拖拽、水印、缩放、切换、旋转)

相关文章
移动端网页设计经验与心得
智能手机发展确实很迅速,像今年,我的大部分工作就都在移动端网页上。 再往前些年,看到的手机版/移动版网页,限制于浏览器与手机性能,2g网络速度等 网页设计无非是蓝、黑、白,界面单调,并且要尽可能的设计简单。 现在情况就大不相同了,软件上we...
2015-12-23
详解angular2封装material2对话框组件
1. 说明 angular-material2自身文档不详,控件不齐,使用上造成了很大的障碍。这里提供一个方案用于封装我们最常用的alert和confirm组件。 2. 官方使用方法之alert ①编写alert内容组件 @Componen...
2017-03-13
js实现的tab标签切换效果代码分享
这是一款基于js实现的tab标签切换效果,是一款无需jQuery,原生javascript制作的tab切换效果源码。点击上面的标题即可实现对应页面的切换功能,非常具有实用价值。 为大家分享的js实现的tab标签切换效果代码如下 &lt;!...
2017-03-31
响应式Web设计的9项基本原则
响应式web设计对于解决多类型屏幕问题来说是个不错方案,但从印刷的角度来看,其却存在着很多的困难。没有固定的页面尺寸、没有毫米或英寸,没有任何物理限制,让人感到无从下手。随着建立网站可用的各种小工具越来越多,像素设计局限于桌面和移动端也已经...
2015-11-12
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
按照正常的产品逻辑,我们在进行页面切换时滚动条应该是在页面顶部的,可是。。。在使用vue-router进行页面切换时,发现滚动条所处的位置被自动记录了下来,且在另一个组件内定义的滚动监听事件仍会运行,着实吃了一大惊。。。 说说我的破解方法:...
2017-03-13
Vue 短信验证码组件开发详解
Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此...
2017-03-17
[翻译]基于Webpack4使用懒加载分离打包React代码
原文地址:https://engineering.innovid.com/code-splitting-using-lazy-loading-with-react-redux-typescript-and-webpack-4-3ec601...
2018-03-11
12个Web设计师必备的Bootstrap工具
作为一位设计师,会经常追寻新鲜有趣的设计工具,这些工具会提高工作的效率,使得工作更有效, 最重要的是使工作变得更方便。非常肯定的说,随着日益增长的工具和应用的数量,设计和开发变得越来越简单了。其中最普遍使用的最终框架 之一是 Bootstr...
2015-12-24
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
如果我有几个页面都需要有分页效果,不可能每个页面都去复制一下这段代码吧,意思是封装一下,变成通用的组件。 首先使用基础 Vue 构造器,创建一个“子类”,Vue.extend( options ) var barHtml = &#x27;&...
2017-03-15
Javascript实现可旋转的圆圈实例代码
本文实例讲述了Javascript实现可旋转的圆圈。分享给大家供大家参考。具体如下: 这里基于Javascript实现会旋转的圆圈,有点三维变幻的效果,立体感很强,代码主要是基于JS,学习Js脚本编程来说,是个学习JS生成动画的好范例。 运...
2017-03-29
回到顶部