@sepveneto/free-dom

Appearance

On this page

锁定纵横比 ​

设置lock-aspect-ratio可以使元素只能按照初始的宽高比进行缩放

INFO

锁定纵横比后，可以通过按住Shift来临时取消锁定进行任意缩放

独立使用 ​

vue
<template>
  <section>
    <FreeDom
      lock-aspect-ratio
      @update:model-value="pos = $event"
    >
      <pre>{{ pos }}</pre>
    </FreeDom>
  </section>
</template>

<script lang="ts" setup>
import { FreeDom } from 'free-dom'
import { ref } from 'vue'

const pos = ref({})
</script>

组合使用 ​

INFO

在free-scene上设置该属性可以控制内部所有的free-dom

vue
<template>
  <FreeScene lock-aspect-ratio>
    <FreeDom v-model="pos1">
      测试文本1
    </FreeDom>
    <FreeDom v-model="pos2">
      测试文本2
    </FreeDom>
  </FreeScene>
</template>

<script setup lang="ts">
import { FreeDom, FreeScene } from 'free-dom'
import { ref } from 'vue'
const pos1 = ref({
  x: Math.random() * 100,
  y: Math.random() * 100,
})
const pos2 = ref({
  x: Math.random() * 100 + 100,
  y: Math.random() * 100 + 100,
})
</script>