README.md
8.66 KB
React 17版本以上的组件封装
flv播放器封装
介绍：支持大屏适配宽度高度百分百，支持视频切换。
解释：只需要传入不同的videoUrl，切换做了处理直接改变videoUrl即可
使用：
import {FlvCom} from "zzreact"
export default class App extends Component {
constructor() {
super();
this.state = {
vidoeUrl: ""
}
}
render() {
let {vidoeUrl} = this.state
return <FlvCom vidoeUrl={vidoeUrl}></FlvCom>
}
}
time时间组件封装
介绍：用来大屏展示时间用
解释：可以加入className来自行改变样式
使用：
import {Timer} from "zzreact"
export default class App extends Component {
render() {//通过下面的className写在css中样式就会生效
//type可以不传默认YYYY-MM-DD HH:mm:ss
//也可以改变，规则和moment.js中format的规则一致
return (<div>
<Timer className="timerComCssss" type="YYYY-MM-DD HH:mm:ss"></Timer>
<Timer className="timerComCssss"></Timer>
</div>)
}
}
图片请求base64地址组件
介绍：用来请求加密地址用的，支持切换。
解释：传入请求地址和图片的静态路径，切换做了处理直接改变imgUrl即可
使用：
import {ImgCom} from "zzreact"
//httpImg是必穿参数
export default class App extends Component {//默认图片样式宽度100%高度自适应
constructor(){
super();
this.state = {
imgUrl:"C:/*****"
}
}
render() {
return (<ImgCom httpImg="http://***" imgUrl={imgUrl}></ImgCom>)
}
}
区域选择组件封装
介绍：用来在视频上描绘区域
解释：可以设置模式点击模式和鼠标移动模式，支持移动端手指触摸移动。支持适配百分比会获取父元素的宽高来渲染画布的大小，如果父元素没有默认宽高是100px
使用：
import {AreaSelete} from "zzreact"
export default class App extends Component {//默认图片样式宽度100%高度自适应
constructor(){
super();
this.state = {
serviceData:[[20, 15], [20, 80], [100, 15]]
}
}
change(val){//点发生改变的回调函数 只要点击点在松开就会触发不会判断只有位置移动了才触发可以自行判断
console.log(val) //注：当添加了disabled=”true“没有此回调函数
}
render() {
return (<div style={{width:"81.2%",height:"80%"}}>
<AreaSelete serviceData={} change={(val)=>this.change(val)}></AreaSelete>
</div>)
}
}
支持传的参数：
//如果一下参数不添加就是默认参数
<AreaSelete
mode="" //两种模式1.默认空为鼠标移动；2.click是点击模式
circleRadius="10" //点击圆的半径
circleBorderWidth="4" //圆边框的宽度
circleBorderColor="#28B1D9" //圆边框的颜色
circleInColor="#28B1D9" //圆区域的颜色
circleSelectColor="#FFF" //圆选中的颜色
lineColor="#28B1D9" //线的颜色
lineWidth="2" //线的宽度
areaColor="rgba(40, 177, 217, 0.2)" //选中区域的颜色支持rgba
disabled="true" //默认是false如果是true就是不可滑动
title= "" //文字的内容填写就有 \n是换行 添加这个属性的时候注意要 {"sdf\ndsd"}不然没效果
titleColor="#000" //文字的颜色 默认黑色
titleFont="14px bold 黑体" //文字的字体
titleLineHeight="" //文字的行高 默认和文字行字体大小一样
position={[10,10]} //文字的位置0是x y是一 如果不设置:里面是判断x最大的y最小的值来进行判断
></AreaSelete>
区域多功能封装
介绍：支持多边形和矩形模式
解释：多边形当绘制完成时点击鼠标右键即可完成就不在绘制，可以进行随意拽动,也可以自行扩展成动态添加多个矩形或者多边形
使用：
import {FunAreaSelect} from "zzreact"
export default class App extends Component {
change(val){//点位画好就会返回数组，如果是多边形点击右键的时候会返回数组，当数组变化的时候会返回
//如果是矩形当拉出框的时候就会发生变化返回数组
//mode不些默认是多边形
console.log(val) //注：当添加了disabled=”true“没有此回调函数
}
render() {
return (<div style={{width:"81.2%",height:"80%"}}>
<FunAreaSelect mode="react" change={(val) => this.change(val)}></FunAreaSelect>
</div>)
}
}
支持传的参数：
//如果一下参数不添加就是默认参数
<FunAreaSelect
mode="polygon" //两种模式1.多边形；2.react是矩形
circleRadius="10" //点击圆的半径
circleBorderWidth="4" //圆边框的宽度
circleBorderColor="#28B1D9" //圆边框的颜色
circleInColor="#28B1D9" //圆区域的颜色
circleSelectColor="#FFF" //圆选中的颜色
lineColor="#28B1D9" //线的颜色
lineWidth="2" //线的宽度
areaColor="rgba(40, 177, 217, 0.2)" //选中区域的颜色支持rgba
disabled="true" //默认是false如果是true就是不可滑动
title= "" //文字的内容填写就有 \n是换行 添加这个属性的时候注意要 {"sdf\ndsd"}不然没效果
titleColor="#000" //文字的颜色 默认黑色
titleFont="14px bold 黑体" //文字的字体
titleLineHeight="" //文字的行高 默认和文字行字体大小一样
position={[10,10]} //文字的位置0是x y是一 如果不设置:里面是判断x最大的y最小的值来进行判断
></FunAreaSelect>
升级版区域选择
介绍：继承选区多功能的基础上进行封装，拥有按钮可以自定义样式
解释：如果觉的不好用也可以自行封装，用里ref可以直接调用里面的方法
（注意：如果你不自己封装就不用看这个）
this.refs[这里是帮定的ref].myRef可以取出canvas中的元素可以打印出来看下
this.refs[这里是帮定的ref].myRef.selectBox(x,y)这个方法是判断点击是否点击到点上
this.refs[这里是帮定的ref].isNull()这个方法是判断你的画布是否为空用于你添加的时候看看是否允许你添加
使用：
import {FunAreaSelectPlus} from "zzreact"
export default class App extends Component {
constructor() {
super();
this.state = {
list: []//可以设置初始值 传的数据要是这个格式
//{id:new Date().getTime()+""+item.id,
//mode:"react",
//serviceData:item.coordinate}
}
}
changeSelect(val) {//修改完的list传到父组件中
this.setState({
list:val
})
}
delete(selectIndex){//删除的id会返回给父组件
let {list} = this.state
list = list.filter(item=>item.id!==selectIndex)
this.setState({list:list})
}
err(falg,msg){//当画布为空的时候，绘画进行行中的时候，会返回状态和错误的消息
console.log(falg,msg)
}
render() {
return (<div style={{width:"81.2%",height:"80%"}}>
<FunAreaSelectPlus list={list} change={(val) => { this.changeSelect(val)}} delete={(selectIndex)=>{this.delete(selectIndex)}} err={(falg,msg)=>{this.err(falg,msg)}}></FunAreaSelectPlus>
</div>)
}
}
支持传的参数：
//如果一下参数不添加就是默认参数
<FunAreaSelectPlus
circleRadius="10" //点击圆的半径
circleBorderWidth="4" //圆边框的宽度
circleBorderColor="#28B1D9" //圆边框的颜色
circleInColor="#28B1D9" //圆区域的颜色
circleSelectColor="#FFF" //圆选中的颜色
lineColor="#28B1D9" //线的颜色
lineWidth="2" //线的宽度
areaColor="rgba(40, 177, 217, 0.2)" //选中区域的颜色支持rgba
disabled="true" //默认是false如果是true就是不可滑动
title= "" //文字的内容填写就有 \n是换行 添加这个属性的时候注意要 {"sdf\ndsd"}不然没效果
titleColor="#000" //文字的颜色 默认黑色
titleFont="14px bold 黑体" //文字的字体
titleLineHeight="" //文字的行高 默认和文字行字体大小一样
position={[10,10]} //文字的位置0是x y是一 如果不设置:里面是判断x最大的y最小的值来进行判断
></FunAreaSelectPlus>