screen-area-selection
v1.0.1
Published
这是一个屏幕区域选择提示工具，不包含截图，录制视频等功能。
Readme
说明
这是一个屏幕区域选择提示工具，不包含截图，录制视频等功能。
只是引入后，在网页内显示一个区域选择窗口。
具体业务逻辑代码需要手动编写。
效果如下
使用方法
html + javascript
<body>
<script type="module">
import initScreenAreaAelection from './index.js'
initScreenAreaAelection(document.body, {
width: 500,
height: 500,
left: 0,
top: 0,
borderWidth: 1.5,
borderColor: "#999",
borderType: "dashed",
blockColor: "#000",
blockSize: 6,
contentBgColor: 'unset',
contentHoverBgColor: 'rgba(0,0,0,0.1)',
text: '按下后可拖拽位置，松开后结束。',
textSize: 8,
textColor: 'white',
screenLimiter: true,
autoHide: false,
autoHideTims: 1
})
</script>
</body>参数说明
initScreenAreaAelection(document.body, // 渲染的根元素
{
width: 500, // 默认宽度
height: 500, // 默认高度
left: 0, // 默认左侧距离
top: 0, // 默认顶部距离
borderWidth: 1.5, // 边框宽度
borderColor: "#999", // 边框颜色
borderType: "dashed", // 边框类型
blockColor: "#000", // 上下左右四个角的颜色
blockSize: 6, // 上下左右四个角的大小
contentBgColor: 'unset', // 中间区域的背景色
contentHoverBgColor: 'rgba(0,0,0,0.1)', // 鼠标放上后中间区域的背景色
text: '按下后可拖拽位置，松开后结束。', // 中间区域显示提示文字
textSize: 8, // 中间区域文字池逊
textColor: 'white', // 文字颜色
screenLimiter: true, // 是否可以溢出屏幕尺寸
autoHide: false, // 是否自动隐藏
autoHideTims: 1 // 自动隐藏时间 单位（秒）
})