KLROI

考拉矩形定位框组件

DANGER

KLLocationDiv与KLLocationPoint已废弃，请使用KLROI替代 KLLocationPoint将KLROI的disableResize属性置为true即可

效果

<script setup lang="ts">
import { ref } from 'vue';
const height = 400;

const roi1 = ref({ x: 0, y: 0, width: 100, height: 100 })
const roi2 = ref({ x: 0, y: 200, width: 100, height: 100 })
</script>

<template>
  <div class="relative" :style="{ height: height + 'px', background: '#ccc', }">
    <KLROI :roi="roi1" />
    <KLROI :roi="roi2" disableResize />
  </div>
</template>

Attributes

属性	说明	类型	默认值
roi	矩阵框位置	roi	-
disableKeyboardEvent	禁用键盘事件（默认组件聚焦后键盘的上下左右可以微调位置）	boolean	-
disableResize	是否禁止调整大小	boolean	-

interface roi {
  x: number;
  y: number;
  width: number;
  height: number;
}

样式调整

/** 调整线宽 */
--kl-stroke-size: 2px;
/** 调整线色 */
--kl-stroke-color: #f00;
/** 调整聚焦后的线色 */
--kl-hl-stroke-color: #ffa500;