241 lines
6.8 KiB
Vue
241 lines
6.8 KiB
Vue
<template>
|
|
<div v-show="isGroup">
|
|
<n-divider n-divider style="margin: 10px 0"></n-divider>
|
|
<n-tag type="warning"> 解散分组「 {{ isCanvas ? '滤镜' : '滤镜 / 变换' }} 」也将消失!</n-tag>
|
|
</div>
|
|
|
|
<collapse-item :name="isCanvas ? '滤镜' : '滤镜 / 变换'">
|
|
<template #header>
|
|
<n-switch v-model:value="chartStyles.filterShow" size="small"></n-switch>
|
|
</template>
|
|
<setting-item-box name="色相" :alone="true">
|
|
<setting-item :name="`值：${chartStyles.hueRotate}deg`">
|
|
<!-- 透明度 -->
|
|
<n-slider
|
|
v-model:value="chartStyles.hueRotate"
|
|
:step="3"
|
|
:min="0"
|
|
:max="360"
|
|
:format-tooltip="degFormatTooltip"
|
|
></n-slider>
|
|
</setting-item>
|
|
</setting-item-box>
|
|
<setting-item-box name="饱和度" :alone="true">
|
|
<setting-item :name="`值：${(parseFloat(String(chartStyles.saturate)) * 100).toFixed(0)}%`">
|
|
<!-- 透明度 -->
|
|
<n-slider
|
|
v-model:value="chartStyles.saturate"
|
|
:step="0.1"
|
|
:min="0"
|
|
:max="2"
|
|
:format-tooltip="sliderFormatTooltip"
|
|
></n-slider>
|
|
</setting-item>
|
|
</setting-item-box>
|
|
<setting-item-box name="对比度" :alone="true">
|
|
<setting-item :name="`值：${(parseFloat(String(chartStyles.contrast)) * 100).toFixed(0)}%`">
|
|
<!-- 透明度 -->
|
|
<n-slider
|
|
v-model:value="chartStyles.contrast"
|
|
:step="0.1"
|
|
:min="0"
|
|
:max="2"
|
|
:format-tooltip="sliderFormatTooltip"
|
|
></n-slider>
|
|
</setting-item>
|
|
</setting-item-box>
|
|
<setting-item-box name="亮度" :alone="true">
|
|
<setting-item :name="`值：${(parseFloat(String(chartStyles.brightness)) * 100).toFixed(0)}%`">
|
|
<!-- 透明度 -->
|
|
<n-slider
|
|
v-model:value="chartStyles.brightness"
|
|
:step="0.1"
|
|
:min="0"
|
|
:max="2"
|
|
:format-tooltip="sliderFormatTooltip"
|
|
></n-slider>
|
|
</setting-item>
|
|
</setting-item-box>
|
|
<setting-item-box name="透明度" :alone="true">
|
|
<setting-item :name="`值：${(parseFloat(String(chartStyles.opacity)) * 100).toFixed(0)}%`">
|
|
<!-- 透明度 -->
|
|
<n-slider
|
|
v-model:value="chartStyles.opacity"
|
|
:step="0.1"
|
|
:min="0"
|
|
:max="1"
|
|
:format-tooltip="sliderFormatTooltip"
|
|
></n-slider>
|
|
</setting-item>
|
|
</setting-item-box>
|
|
|
|
<!-- 预设滤镜 -->
|
|
<div v-if="presetImageList.length" class="preset-filter">
|
|
<n-image
|
|
class="preset-img"
|
|
width="46"
|
|
preview-disabled
|
|
object-fit="scale-down"
|
|
v-for="(item, index) in presetImageList"
|
|
:key="index"
|
|
:class="{ 'active-preset': item.hueRotate === chartStyles.hueRotate }"
|
|
:style="{ filter: `hue-rotate(${item.hueRotate}deg)` }"
|
|
:src="item.src"
|
|
@click="() => (chartStyles.hueRotate = item.hueRotate)"
|
|
></n-image>
|
|
</div>
|
|
|
|
<!-- 混合模式 -->
|
|
<setting-item-box v-if="!isCanvas" :alone="true">
|
|
<template #name>
|
|
<n-text>混合</n-text>
|
|
<n-tooltip trigger="hover">
|
|
<template #trigger>
|
|
<n-icon size="21" :depth="3">
|
|
<help-outline-icon></help-outline-icon>
|
|
</n-icon>
|
|
</template>
|
|
<n-text>视频组件需要底色透明一般选中滤色</n-text>
|
|
</n-tooltip>
|
|
</template>
|
|
<setting-item>
|
|
<n-select v-model:value="chartStyles.blendMode" size="small" filterable :options="BlendModeEnumList"></n-select>
|
|
</setting-item>
|
|
</setting-item-box>
|
|
|
|
<!-- 变换 -->
|
|
<setting-item-box v-if="!isCanvas" name="旋转°">
|
|
<setting-item name="Z轴(平面) - 旋转">
|
|
<!-- 透明度 -->
|
|
<n-input-number
|
|
v-model:value="chartStyles.rotateZ"
|
|
:min="0"
|
|
:max="360"
|
|
size="small"
|
|
placeholder="角度"
|
|
></n-input-number>
|
|
</setting-item>
|
|
<setting-item name="X轴 - 旋转">
|
|
<!-- 透明度 -->
|
|
<n-input-number
|
|
v-model:value="chartStyles.rotateX"
|
|
:min="0"
|
|
:max="360"
|
|
size="small"
|
|
placeholder="角度"
|
|
></n-input-number>
|
|
</setting-item>
|
|
<setting-item name="Y轴 - 旋转">
|
|
<!-- 透明度 -->
|
|
<n-input-number
|
|
v-model:value="chartStyles.rotateY"
|
|
:min="0"
|
|
:max="360"
|
|
size="small"
|
|
placeholder="角度"
|
|
></n-input-number>
|
|
</setting-item>
|
|
</setting-item-box>
|
|
|
|
<!-- 倾斜 -->
|
|
<setting-item-box v-if="!isCanvas" name="倾斜°">
|
|
<setting-item name="X轴 - 倾斜">
|
|
<n-input-number
|
|
v-model:value="chartStyles.skewX"
|
|
:min="0"
|
|
:max="360"
|
|
size="small"
|
|
placeholder="角度"
|
|
></n-input-number>
|
|
</setting-item>
|
|
<setting-item name="Y轴 - 倾斜">
|
|
<n-input-number
|
|
v-model:value="chartStyles.skewY"
|
|
:min="0"
|
|
:max="360"
|
|
size="small"
|
|
placeholder="角度"
|
|
></n-input-number>
|
|
</setting-item>
|
|
</setting-item-box>
|
|
|
|
<!-- 提示 -->
|
|
<n-tag type="warning"> 若预览时大屏模糊，可以尝试关闭滤镜进行修复 </n-tag>
|
|
</collapse-item>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, PropType } from 'vue'
|
|
import { PickCreateComponentType, BlendModeEnumList } from '@/packages/index.d'
|
|
import { SettingItemBox, SettingItem, CollapseItem } from '@/components/Pages/ChartItemSetting'
|
|
import { icon } from '@/plugins'
|
|
import logoImg from '@/assets/logo.png'
|
|
import { useDesignStore } from '@/store/modules/designStore/designStore'
|
|
|
|
const props = defineProps({
|
|
isGroup: {
|
|
type: Boolean,
|
|
required: false
|
|
},
|
|
isCanvas: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
chartStyles: {
|
|
type: Object as PropType<Omit<PickCreateComponentType<'styles'>, 'animations'>>,
|
|
required: true
|
|
}
|
|
})
|
|
|
|
const { HelpOutlineIcon } = icon.ionicons5
|
|
|
|
// 百分比格式化 person
|
|
const sliderFormatTooltip = (v: string) => {
|
|
return `${(parseFloat(v) * 100).toFixed(0)}%`
|
|
}
|
|
|
|
// 角度格式化
|
|
const degFormatTooltip = (v: string) => {
|
|
return `${v}deg`
|
|
}
|
|
|
|
// 预设滤镜
|
|
interface presetImageData {
|
|
index: number
|
|
src: string
|
|
hueRotate: number
|
|
}
|
|
|
|
const presetImageList = ref([] as presetImageData[])
|
|
for (let i = 1; i <= 12; i++) {
|
|
presetImageList.value.push({
|
|
index: i,
|
|
src: logoImg,
|
|
hueRotate: i * 30
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
// 预设滤镜
|
|
.preset-filter {
|
|
margin: 20px 0 10px 0;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
.preset-img {
|
|
margin-bottom: 10px;
|
|
padding: 2px;
|
|
border-radius: 6px;
|
|
transition: 0.2s all;
|
|
cursor: pointer;
|
|
&:hover {
|
|
box-shadow: 0 0 0 2px #66a9c9;
|
|
}
|
|
}
|
|
.active-preset {
|
|
box-shadow: 0 0 0 2px #66a9c9;
|
|
}
|
|
}
|
|
</style>
|