基本用法

独立使用

free-dom本身会管理坐标和大小，因此只需要包裹需要拖曳和缩放的元素即可。

INFO

由于没有区域限制，元素本身可以移动到整个网页的任意一个地方。

WARNING

虽然当初始值不设置width或height时，free-dom会在初次渲染时根据被包裹的元素自动计算大小，但是由于浏览器的渲染是异步的，所以只能尽力保证获取到的是最终渲染的尺寸。因此条件允许的情况下最好是指定width和height。

vue

<template>
  <section>
    <FreeDom @update:model-value="pos = $event">
      <div style="color: #fff; width: 100%; height: 100%; background: crimson;">长文本长文本长文本长文本长文本长文本长文本长文本</div>
    </FreeDom>
    <FreeDom :auto-size="false">
      <div>长文本长文本长文本长文本长文本长文本长文本长文本</div>
    </FreeDom>
  </section>
</template>

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

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

组合使用

当场景中存在多个拖曳元素，且各元素之间有对齐需求，或者需要限制拖曳的范围时，可以使用free-scene来管理相关的free-dom

WARNING

FreeScene作为可拖曳区域虽然可以通过style在挂载后动态设置宽高，但是设置成百分比时请确认父容器被设置了指定的值，否则会导致高度异常。因此虽然可以自动计算，但是为了确保实际区域符合预期，最好还是指定宽高的具体值而不是相对值。

vue

<template>
  <FreeScene>
    <FreeDom
      v-model:w="pos1.width"
      v-model:h="pos1.height"
      v-model:x="pos1.x"
      v-model:y="pos1.y"
    >
      测试文本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({
  width: 200,
  height: 100,
  x: Math.random() * 100,
  y: Math.random() * 100,
})
const pos2 = ref({
  x: Math.random() * 100 + 100,
  y: Math.random() * 100 + 100,
})
</script>

基本用法 ​

独立使用 ​

组合使用 ​

基本用法

独立使用

组合使用