<template>
|
<div class="box" v-if="isOne && isImage">
|
<!-- <Divider plain orientation="left">图像描边</Divider> -->
|
<Divider plain orientation="left">
|
<h4>图像描边</h4>
|
</Divider>
|
<div class="hd-wrap">
|
<div class="hd">
|
<span>启用图像描边</span>
|
<Poptip trigger="hover" content="只支持png透明图像">
|
<span><Icon type="ios-alert" color="#f34250" /></span>
|
</Poptip>
|
</div>
|
|
<iSwitch v-model="openImgStroke" size="large" class="switch" @on-change="onSwitchChange">
|
<template #open>
|
<span>开启</span>
|
</template>
|
<template #close>
|
<span>关闭</span>
|
</template>
|
</iSwitch>
|
</div>
|
|
<template v-if="openImgStroke">
|
<div class="hd-wrap">
|
<div class="hd">
|
<span>是否只显示描边</span>
|
</div>
|
|
<iSwitch v-model="isOnlyStroke" size="large" class="switch" @on-change="updateStroke">
|
<template #open>
|
<span>是</span>
|
</template>
|
<template #close>
|
<span>否</span>
|
</template>
|
</iSwitch>
|
</div>
|
<div class="operation">
|
<div class="hd" style="flex-basis: 98px">
|
<span>描边大小</span>
|
</div>
|
<div style="width: 100%">
|
<Slider v-model="strokeWidth" :max="50" @on-change="onSliderChange"></Slider>
|
</div>
|
</div>
|
|
<div class="operation" style="justify-content: space-between">
|
<div class="hd">
|
<span>描边颜色</span>
|
</div>
|
|
<div>
|
<ColorPicker v-model="strokeColor" @on-change="onColorChange" placement="left" />
|
</div>
|
</div>
|
</template>
|
</div>
|
</template>
|
|
<script name="ImgStroke" lang="ts" setup>
|
import useSelect from '@/hooks/select';
|
import { Slider } from 'view-ui-plus';
|
import { fabric } from 'fabric';
|
import { Utils } from '@kuaitu/core';
|
|
interface IExtendImage {
|
[x: string]: any;
|
originWidth?: number;
|
originHeight?: number;
|
originSrc?: string;
|
}
|
|
const { isOne, canvasEditor } = useSelect();
|
const isImage = ref(false);
|
const openImgStroke = ref(false);
|
const strokeWidth = ref(5);
|
const strokeColor = ref('#000');
|
const isOnlyStroke = ref(false);
|
const getActiveObject = (): (fabric.Image & IExtendImage) | undefined => {
|
const activeObject = canvasEditor.fabricCanvas?.getActiveObject();
|
if (!activeObject || !Utils.isImage(activeObject)) return;
|
return activeObject;
|
};
|
|
const setOrigin = () => {
|
const _activeObject = getActiveObject();
|
if (!_activeObject) return;
|
_activeObject.set('originWidth', _activeObject?.get('width'));
|
_activeObject.set('originHeight', _activeObject?.get('height'));
|
_activeObject.set('originSrc', _activeObject?.getSrc());
|
};
|
|
const updateStroke = () => {
|
const strokeType = unref(isOnlyStroke) ? 'destination-out' : 'source-over';
|
canvasEditor.imageStrokeDraw(unref(strokeColor), unref(strokeWidth), strokeType);
|
};
|
|
const closeImgStroke = () => {
|
strokeWidth.value = 0;
|
updateStroke();
|
};
|
|
const onSwitchChange = async (val: boolean) => {
|
if (val) {
|
unref(strokeWidth) === 0 && (strokeWidth.value = 5);
|
setOrigin();
|
updateStroke();
|
} else {
|
closeImgStroke();
|
}
|
};
|
|
const onSliderChange = (val: number) => {
|
strokeWidth.value = val;
|
updateStroke();
|
};
|
|
const onColorChange = (val: string) => {
|
strokeColor.value = val;
|
updateStroke();
|
};
|
|
const handleSelectOne = () => {
|
isImage.value = !!getActiveObject();
|
};
|
|
onMounted(() => {
|
canvasEditor.on('selectOne', handleSelectOne);
|
});
|
|
onBeforeUnmount(() => {
|
canvasEditor.off('selectOne', handleSelectOne);
|
});
|
</script>
|
|
<style lang="less" scoped>
|
// :deep(.ivu-divider-plain) {
|
// &.ivu-divider-with-text-left {
|
// margin: 10px 0;
|
// font-weight: bold;
|
// font-size: 16px;
|
// color: #000000;
|
// }
|
// }
|
.box {
|
margin-bottom: 20px;
|
.hd-wrap {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 10px;
|
.hd {
|
flex: 1;
|
& > span {
|
margin-right: 5px;
|
}
|
}
|
}
|
.operation {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
.slide-wrap {
|
width: 100%;
|
}
|
}
|
}
|
</style>
|
