aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

同步印花的缩放偏移显示

Browse Source
This commit is contained in:
李志鹏
2026-01-23 15:24:39 +08:00
parent 2ab23d0f30
commit 86db2f22a1
9 changed files with 224 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
src/component/Canvas/CanvasEditor/components/SelectMenuPanel/RepeatSetting.vue
View File

@@ -14,7 +14,7 @@
<span class="label">{{ t("Canvas.scale") }}</span>
<slider
:min="1"
:max="500"
:max="1000"
:step="1"
is-input
:tipFormatter="(v) => `${scale}%`"
@@ -52,19 +52,19 @@
<div class="repeat-setting-item">
<span class="label">{{ t("Canvas.offset") }}</span>
<offset-tool
:left="offsetX"
:top="offsetY"
@input="(e) => emit('inputFillOffset', e)"
@change="(e) => emit('changeFillOffset', e)"
:left="offset.x"
:top="offset.y"
@input="inputFillOffset"
@change="changeFillOffset"
:show-dish="false"
/>
</div>
<div class="repeat-setting-item offset">
<offset-tool
:left="offsetX"
:top="offsetY"
@input="(e) => emit('inputFillOffset', e)"
@change="(e) => emit('changeFillOffset', e)"
:left="offset.x"
:top="offset.y"
@input="inputFillOffset"
@change="changeFillOffset"
:show-input="false"
/>
</div>
@@ -79,29 +79,6 @@
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 offsetX = computed(
() => (props.object.fill?.offsetX / props.object.width) * 100
);
const offsetY = computed(
() => (props.object.fill?.offsetY / props.object.height) * 100
);
const emit = defineEmits([
"inputFillAngle",
"changeFillAngle",
@@ -112,13 +89,63 @@
"inputFillGap",
"changeFillGap",
]);
const inputFillScale = (e) => {
const props = defineProps({
object: {
required: true,
type: Object,
},
});
const angle = computed(
() => getTransformScaleAngle(props.object.fill?.patternTransform).angle
);
const gapX = computed(() => props.object.fill_?.gapX || 0);
const gapY = computed(() => props.object.fill_?.gapY || 0);
// 缩放比例
const scale = computed(() => {
const object = props.object;
const patternTransform = object.fill?.patternTransform;
const scaleValue = getTransformScaleAngle(patternTransform).scale;
const scaleX = scaleValue / (object.width / object.fill_.width / 5);
const scaleY = scaleValue / (object.height / object.fill_.height / 5);
const scaleXY = object.width > object.height ? scaleX : scaleY;
return Number(Number(scaleXY * 100).toFixed(2));
});
const inputFillScale = (e) => setFillScale(e, true);
const changeFillScale = (e) => setFillScale(e, false);
const setFillScale = (e, isInput) => {
const object = props.object;
const scale = e / 100;
emit("inputFillScale", scale);
const scaleX = (object.width / object.fill_.width / 5) * scale;
const scaleY = (object.height / object.fill_.height / 5) * scale;
const scaleXY = object.width > object.height ? scaleX : scaleY;
emit(isInput ? "inputFillScale" : "changeFillScale", scaleXY);
};
const changeFillScale = (e) => {
const scale = e / 100;
emit("changeFillScale", scale);
// 偏移量
const offset = computed(() => {
const object = props.object;
const patternTransform = object.fill?.patternTransform;
const scale = getTransformScaleAngle(patternTransform).scale;
const offsetX = object.fill?.offsetX;
const offsetY = object.fill?.offsetY;
const twidth = object.fill_?.width;
const theight = object.fill_?.height;
const x = ((offsetX - (twidth * scale) / 2) * 100) / object.width;
const y = ((offsetY - (theight * scale) / 2) * 100) / object.height;
return { x, y };
});
const inputFillOffset = (e) => setFillOffset(e, true);
const changeFillOffset = (e) => setFillOffset(e, false);
const setFillOffset = (e, isInput) => {
const { left, top } = e;
const object = props.object;
const patternTransform = object.fill?.patternTransform;
const scale = getTransformScaleAngle(patternTransform).scale;
const x = (left / 100) * object.width + (object.fill_?.width * scale) / 2;
const y = (top / 100) * object.height + (object.fill_?.height * scale) / 2;
emit(isInput ? "inputFillOffset" : "changeFillOffset", { x, y });
};
</script>
@@ -126,6 +153,7 @@
.repeat-setting {
user-select: none;
width: 228px;
overflow: hidden;
> .title {
line-height: 35px;
font-size: 14px;