low code canvas drag
npm install @canvas-drag/coresh
npm i @canvas-drag/core
npm i @canvas-drag/plugins
or
pnpm i @canvas-drag/core
pnpm i @canvas-drag/plugins
or
yarn i @canvas-drag/core
yarn i @canvas-drag/plugins
`
$3
`html
/** @canvas-drag/core要配合@canvas-drag/plugins使用，
@canvas-drag/core把画布中分成五中操作类型元素分别，以元素中的data-drag-handle属性区分
canvas: 画布类型 drag：可拖拽类型 scale：改变大小 rotate：旋转 */
ref="canvasRef"
:style="{
transform: translate(${data.zoom.x}px, ${data.zoom.y}px) scale(${data.zoom.zoom}),
transformOrigin: '0 0',
}"
data-drag-handle="canvas"
class="canvas"
>
v-for="item in elements"
:key="item.id"
:data-element-id="item.id"
data-drag-handle="drag"
class="canvas__drag"
:style="{
...item.style,
width: ${item.width}px,
height: ${item.height}px,
left: ${item.left}px,
top: ${item.top}px,
transform: rotate(${item.angle || 0}deg),
}"
>
,
left: ${data.selectBounds.left}px,
width: ${data.selectBounds.width}px,
height: ${data.selectBounds.height}px,
transform: rotate(${data.selectBounds.angle || 0}deg),
}"
>
v-for="pos in handles"
:key="pos"
data-drag-handle="scale"
:data-drag-type="pos"
:class="['handle-pos', pos]"
>
,
left: ${data.selectBox.left}px,
width: ${data.selectBox.width}px,
height: ${data.selectBox.height}px,
}"
>