在react项目中实现此功能可借助 react-rnd 库,文档地址:https://github.com/bokuweb/react-rnd#Screenshot 。下面是实例运用:

  

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import assign from 'object-assign'
import classNames from 'classnames'
import _ from 'lodash'
import { Rnd } from 'react-rnd' import './index.less' class ScreenShareCapture extends Component {
static propTypes = {
style: PropTypes.object,
} static defaultProps = {
style: {},
} state = {
x: 0,
y: 0,
width: 500,
height: 281.25,
} componentDidMount() {
} componentWillUnmount() {
} updateRndElemLastSizePos = () => {
this.rndElemLastSizePos = {
x: this.state.x,
y: this.state.y,
width: this.state.width,
height: this.state.height,
}
} calculateRndElemSizePos = (dir, ref, sizeDelta, position) => {
const sizePos = _.clone(this.rndElemLastSizePos)
const heightWidthRatio = 0.5625
sizePos.x = position.x
sizePos.y = position.y
sizePos.width = ref.offsetWidth
sizePos.height = ref.offsetWidth * heightWidthRatio this.setState(sizePos)
return sizePos
} handleDragStart = () => {
this.updateRndElemLastSizePos()
} handleDrag = (e, data) => {
this.setState({
x: data.x,
y: data.y,
})
} handleDragStop = (e, data) => {
this.setState({
x: data.x,
y: data.y,
})
} handleResizeStart = () => {
this.updateRndElemLastSizePos()
} handleResize = (e, dir, ref, delta, position) => {
console.log('beibei handleresize', e, dir, ref, delta, position)
this.calculateRndElemSizePos(dir, ref, delta, position)
} rndElemLastSizePos rnd render() {
const wrapStyles = assign({}, this.props.style)
return (
<Rnd
style={wrapStyles}
bounds=".teacher-layout-component-wrap"
dragHandleClassName="screen-share-bottom-content-wrap"
enableResizing={{
top: false,
right: false,
bottom: false,
left: false,
topRight: true,
bottomRight: true,
bottomLeft: true,
topLeft: true,
}}
position={{
x: this.state.x,
y: this.state.y,
}}
size={{
width: this.state.width,
height: this.state.height,
}}
lockAspectRatio={16 / 9}
maxWidth="100%"
maxHeight="100%"
minWidth={400}
minHeight={225}
onDragStart={this.handleDragStart}
onDrag={this.handleDrag}
onDragStop={this.handleDragStop}
onResizeStart={this.handleResizeStart}
onResize={this.handleResize}
onResizeStop={_.noop}
ref={(r) => { this.rnd = r }}
>
<div className="screen-share-capture-component-wrap">
<div className="screen-share-main-content-wrap">
<span className="start-screen-share-button">开始屏幕共享</span>
</div>
<div className="screen-share-bottom-content-wrap">
<div className="screen-share-bottom-left">
<i
className="preview-icon"
/>
<span className="preview-text">预览</span>
</div>
<div className="screen-share-bottom-right">
<i
className={classNames({
'device-icon': true,
'camera-icon': true,
active: false,
})}
/>
<i
className={classNames({
'device-icon': true,
'mic-icon': true,
active: false,
})}
/>
<i
className={classNames({
'device-icon': true,
'speaker-icon': true,
active: false,
})}
/>
<i
className={classNames({
'device-icon': true,
'wifi-icon': true,
active: false,
})}
/>
{/*<i*/}
{/*className={classNames({*/}
{/*'device-icon': true,*/}
{/*'restart-icon': true,*/}
{/*active: false,*/}
{/*})}*/}
{/*/>*/}
<i
className={classNames({
'device-icon': true,
'exit-icon': true,
active: false,
})}
/>
</div>
</div>
</div>
</Rnd>
)
}
} export default ScreenShareCapture

  下面是css样式:

  

.screen-share-capture-component-wrap{
box-sizing: border-box;
width: 100%;
height: 100%;
position: relative;
//top:;
//left:;
//width: 100%;
//height: 100%;
//display: flex;
//flex-direction: column;
//align-items: center;
//justify-content: center;
//background-color: red; .screen-share-main-content-wrap{
box-sizing: border-box;
width: 100%;
height: 100%;
border-radius: 2px;
border: solid 2px #ff4343;
background-color: #ffffff;
display: flex;
justify-content: center;
align-items: center; .start-screen-share-button{
display: inline-block;
width: 120px;
height: 36px;
line-height: 36px;
text-align: center;
border-radius: 2px;
background-color: #ff4343;
color: #ffffff;
font-size: 14px;
opacity: 0.8;
cursor: pointer;
}
} .screen-share-bottom-content-wrap{
width: 100%;
height: 36px;
border-radius: 2px;
background-color: #5d6674;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
position: absolute;
bottom: -36px;
left:; .screen-share-bottom-left{
width: 72px;
height: 32px;
border-radius: 2px;
border: solid 1px #ffffff;
background-color: #5d6674;
margin: 3px;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
cursor: pointer; .preview-icon{
width: 24px;
height: 24px;
outline: none;
cursor: pointer;
background: url('~ROOT/shared/assets/image/vn-screen-preview-42-42.png') no-repeat center;
background-size: 16px 16px;
} .preview-text{
color: #ffffff;
font-size: 14px;
}
} .screen-share-bottom-right{
display: flex;
flex-direction: row;
align-items: center; .device-icon {
width: 24px;
height: 24px;
outline: none;
cursor: pointer;
margin-right: 11px; &:nth-last-child(2){
margin-right: 38px;
} } .camera-icon {
background: url('~ROOT/shared/assets/image/vn-screen-camera-off-66-66.png') no-repeat center;
background-size: 22px 22px;
} .mic-icon {
background: url('~ROOT/shared/assets/image/vn-screen-voice-on-54-72.png') no-repeat center;
background-size: 18px 24px;
} .speaker-icon {
background: url('~ROOT/shared/assets/image/vn-screen-speaker-60-66.png') no-repeat center;
background-size: 20px 22px;
} .wifi-icon {
background: url('~ROOT/shared/assets/image/vn-screen-wifi-72-57.png') no-repeat center;
background-size: 24px 19px;
} .restart-icon{
background: url('~ROOT/shared/assets/image/vn-screen-restart-60-60.png') no-repeat center;
background-size: 19px 19px;
} .exit-icon{
background: url('~ROOT/shared/assets/image/vn-screen-exit-60-60.png') no-repeat center;
background-size: 19px 19px;
} } }
}

react项目中实现元素的拖动和缩放实例的更多相关文章

  1. 如何在非 React 项目中使用 Redux

    本文作者:胡子大哈 原文链接:https://scriptoj.com/topic/178/如何在非-react-项目中使用-redux 转载请注明出处,保留原文链接和作者信息. 目录 1.前言 2. ...

  2. react项目中实现搜索关键字呈现高亮状态(一)

    最近有个需求,在一个react项目中,实现搜索关键字呈现高亮状态.这个在普通的html文件中还好操作些,在react项目中有点懵逼了,因为react项目中很少操作dom,有点无从下手.但最后还是实现了 ...

  3. 如何优雅地在React项目中使用Redux

    前言 或许你当前的项目还没有到应用Redux的程度,但提前了解一下也没有坏处,本文不会安利大家使用Redux 概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与 ...

  4. React项目中实现右键自定义菜单

    最近在react项目中需要实现一个,右键自定义菜单功能.找了找发现纯react项目里没有什么工具可以实现这样的功能,所以在网上搜了搜相关资料.下面我会附上完整的组件代码. (注:以下代码非本人原创,具 ...

  5. React项目中使用Mobx状态管理(二)

    并上一节使用的是普通的数据状态管理,不过官方推荐使用装饰器模式,而在默认的react项目中是不支持装饰器的,需要手动启用. 官方参考 一.添加配置 官方提供了四种方法, 方法一.使用TypeScrip ...

  6. 在react项目中使用ECharts

    这里我们要在自己搭建的react项目中使用ECharts,我们可以在ECharts官网上看到有一种方式是在 webpack 中使用 ECharts,我们需要的就是这种方法. 我们在使用ECharts之 ...

  7. 优雅的在React项目中使用Redux

    概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与React没有任何关系,其他UI框架也可以使用Redux react-redux React插件,作用:方便在 ...

  8. 深入浅出TypeScript(5)- 在React项目中使用TypeScript

    前言 在第二小节中,我们讨论了利用TypeScript创建Web项目的实现,在本下节,我们讨论一下如何结合React创建一个具备TypeScript类型的应用项目. 准备 Webpack配置在第二小节 ...

  9. redux在react项目中的应用

    今天想跟大家分享一下redux在react项目中的简单使用 1 1.redux使用相关的安装 yarn add redux yarn add react-redux(连接react和redux) 2. ...

随机推荐

  1. weixin://connectToFreeWifi/?apKey=协议如何跳转到微信客户端打开在wifi指定任意网页?

    微信门店wifi接口,任意站跳转,跳转二维码长按识别加粉,接口支持动态传参数,支持微信支付等特殊接口对接. 代码如下使用 <head> <meta charset="utf ...

  2. java操作git简单实现

    记录瞬间 import org.eclipse.jgit.api.Git; import org.eclipse.jgit.api.ListBranchCommand; import org.ecli ...

  3. Intellij IDEA 配置Tomcat远程调试

    一.前言 在服务器端开发过程中,由于服务器环境差异导致运行结果不符合预期. 所以就需要到IDEA Debug 服务器代码.看起来貌似很高大上的事情. 今天就说说使用Intellij IDEA 配置的方 ...

  4. [Chrome] chrome 自动跳转到https

    关键字眼: - static_upgrade_mode: FORCE_HTTPS - You cannot visit www.xxx.dev right now because the websit ...

  5. Json常用序列化工具包大比拼

    一.前言 Json已成为计算机编程中最常用的数据传输和存储格式之一,所以对Json的序列化和反序列化工具的选择也是互联网系统中比较重要的环节,尤其在高并发下的执行效率,可能会直接影响系统的吞吐率.本文 ...

  6. Intel Code Challenge Final Round (Div. 1 + Div. 2, Combined)

    C 模拟 题意:给的是一个矩形,然后√2 的速度走,如果走到边上就正常反射,走到角上,暂停反射,我们知道要不循环要不暂停,记录走到的点最短时间 /*************************** ...

  7. P1186 玛丽卡

    题目描述 麦克找了个新女朋友,玛丽卡对他非常恼火并伺机报复. 因为她和他们不住在同一个城市,因此她开始准备她的长途旅行. 在这个国家中每两个城市之间最多只有一条路相通,并且我们知道从一个城市到另一个城 ...

  8. 单片机C语言基础编程源码六则

    1.某单片机系统的P2口接一数模转换器DAC0832输出模拟量,现在要求从DAC0832输出连续的三角波,实现的方法是从P2口连续输出按照三角波变化的数值,从0开始逐渐增大,到某一最大值后逐渐减小,直 ...

  9. mysql_study_1

    创建数据库 创建表 数据类型 插入数据的几种方法 约束 代码 CREATE DATABASE mysql_shiyan; use mysql_shiyan; CREATE TABLE departme ...

  10. 【题解】Luogu P4097 [HEOI2013]Segment

    原题传送门 这珂以说是李超线段树的模板题 按着题意写就行了,时间复杂度为\(O(n\log^2n)\) #include <bits/stdc++.h> #define N 40005 # ...