134 lines
3.2 KiB
Vue
134 lines
3.2 KiB
Vue
<template>
|
|
<div class="repeat-setting">
|
|
<div class="repeat-setting-item">
|
|
<span class="label">{{ t("Canvas.angle") }}</span>
|
|
<angle-tool
|
|
:angle="angle"
|
|
@input="(e) => emit('inputFillAngle', e)"
|
|
@change="(e) => emit('changeFillAngle', e)"
|
|
/>
|
|
</div>
|
|
<p></p>
|
|
<div class="repeat-setting-item">
|
|
<span class="label">{{ t("Canvas.scale") }}</span>
|
|
<slider
|
|
:min="1"
|
|
:max="500"
|
|
:step="1"
|
|
is-input
|
|
:tipFormatter="(v) => `${scale}%`"
|
|
:value="scale"
|
|
@input="inputFillScale"
|
|
@change="changeFillScale"
|
|
/>
|
|
</div>
|
|
<p></p>
|
|
<div class="repeat-setting-item">
|
|
<span class="label">Gap X</span>
|
|
<slider
|
|
:min="0"
|
|
:max="1000"
|
|
:step="1"
|
|
is-input
|
|
:tipFormatter="(v) => `${v}px`"
|
|
:value="gapX"
|
|
@input="(e) => emit('inputFill_Gap', e, gapY)"
|
|
@change="(e) => emit('changeFill_Gap', e, gapY)"
|
|
/>
|
|
</div>
|
|
<p></p>
|
|
<div class="repeat-setting-item">
|
|
<span class="label">Gap Y</span>
|
|
<slider
|
|
:min="0"
|
|
:max="1000"
|
|
:step="1"
|
|
is-input
|
|
:tipFormatter="(v) => `${v}px`"
|
|
:value="gapY"
|
|
@input="(e) => emit('inputFill_Gap', gapX, e)"
|
|
@change="(e) => emit('changeFill_Gap', gapX, e)"
|
|
/>
|
|
</div>
|
|
<p></p>
|
|
<div class="repeat-setting-item">
|
|
<span class="label">{{ t("Canvas.offset") }}</span>
|
|
<offset-tool
|
|
:top="(props.object.fill?.offsetY / props.object.height) * 100"
|
|
:left="(props.object.fill?.offsetX / props.object.width) * 100"
|
|
@input="(e) => emit('inputFillOffset', e)"
|
|
@change="(e) => emit('changeFillOffset', e)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, defineProps, defineEmits, computed } from "vue";
|
|
import { getTransformScaleAngle } from "../../utils/helper";
|
|
import AngleTool from "../tools/AngleTool.vue";
|
|
import OffsetTool from "../tools/OffsetTool.vue";
|
|
import Slider from "../tools/Slider.vue";
|
|
import { useI18n } from "vue-i18n";
|
|
const { t } = useI18n();
|
|
|
|
const props = defineProps({
|
|
object: {
|
|
required: true,
|
|
type: Object,
|
|
},
|
|
});
|
|
const angle = computed(
|
|
() => getTransformScaleAngle(props.object.fill?.patternTransform).angle
|
|
);
|
|
const scale = computed(() => {
|
|
const patternTransform = props.object.fill?.patternTransform;
|
|
const scaleValue = getTransformScaleAngle(patternTransform).scale * 100;
|
|
return Number(Number(scaleValue).toFixed(2));
|
|
});
|
|
const gapX = computed(() => props.object.fill_?.gapX || 0);
|
|
const gapY = computed(() => props.object.fill_?.gapY || 0);
|
|
const emit = defineEmits([
|
|
"inputFillAngle",
|
|
"changeFillAngle",
|
|
"inputFillOffset",
|
|
"changeFillOffset",
|
|
"inputFillScale",
|
|
"changeFillScale",
|
|
"inputFill_Gap",
|
|
"changeFill_Gap",
|
|
]);
|
|
const inputFillScale = (e) => {
|
|
const scale = e / 100;
|
|
emit("inputFillScale", scale);
|
|
};
|
|
const changeFillScale = (e) => {
|
|
const scale = e / 100;
|
|
emit("changeFillScale", scale);
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.repeat-setting {
|
|
user-select: none;
|
|
> .repeat-setting-item {
|
|
display: flex;
|
|
align-items: center;
|
|
//虚线
|
|
> .label {
|
|
min-width: 50px;
|
|
font-size: 14px;
|
|
}
|
|
> .angle-tool {
|
|
width: 120px;
|
|
}
|
|
}
|
|
> p {
|
|
margin: 10px 0;
|
|
width: 100%;
|
|
height: 0;
|
|
border-bottom: 1px dashed #e5e5e5;
|
|
}
|
|
}
|
|
</style>
|