星如雨

Appearance

xl-canvas-image ​

基础使用 ​

样例代码
vue
<script>
  import { XlCanvasImage } from 'xing-ly'
</script>
<xl-canvas-image image-url='/images/avatar.jpg' :width='300' :height='300' />
<script>
  import { XlCanvasImage } from 'xing-ly'
</script>
<xl-canvas-image image-url='/images/avatar.jpg' :width='300' :height='300' />

不同尺寸 ​

样例代码
vue
<script>
  import { XlCanvasImage } from 'xing-ly'
</script>
<xl-canvas-image image-url='/images/avatar.jpg' :width='400' :height='400' />
<script>
  import { XlCanvasImage } from 'xing-ly'
</script>
<xl-canvas-image image-url='/images/avatar.jpg' :width='400' :height='400' />

根据图片大小自适应 ​

样例代码
vue
<script setup>
  import { XlCanvasImage } from 'xing-ly'
</script>
<xl-canvas-image image-url='/images/avatar.jpg' auto />
<script setup>
  import { XlCanvasImage } from 'xing-ly'
</script>
<xl-canvas-image image-url='/images/avatar.jpg' auto />

展示信息 ​

canvas image information
scale1.00
width
height
x0.00
y0.00
Details
html
<div class="demo-text">
  <xl-canvas-image image-url='/images/avatar.jpg' :width='300' :height='300'>
    <template #info="scope">
      <el-descriptions title="canvas image information" :column="1" border>
        <el-descriptions-item label="scale">{{ scope.scale }}</el-descriptions-item>
        <el-descriptions-item label="width">{{ scope.width }}</el-descriptions-item>
        <el-descriptions-item label="height">{{ scope.height }}</el-descriptions-item>
        <el-descriptions-item label="x">{{ scope.x }}</el-descriptions-item>
        <el-descriptions-item label="y">{{ scope.y }}</el-descriptions-item>
      </el-descriptions>
    </template>
  </xl-canvas-image>
</div>
<div class="demo-text">
  <xl-canvas-image image-url='/images/avatar.jpg' :width='300' :height='300'>
    <template #info="scope">
      <el-descriptions title="canvas image information" :column="1" border>
        <el-descriptions-item label="scale">{{ scope.scale }}</el-descriptions-item>
        <el-descriptions-item label="width">{{ scope.width }}</el-descriptions-item>
        <el-descriptions-item label="height">{{ scope.height }}</el-descriptions-item>
        <el-descriptions-item label="x">{{ scope.x }}</el-descriptions-item>
        <el-descriptions-item label="y">{{ scope.y }}</el-descriptions-item>
      </el-descriptions>
    </template>
  </xl-canvas-image>
</div>

参数 ​

组件名描述类型是否必填默认
image-url图片路径stringtrue-
auto是否根据图片尺寸Booleanfalsefalse
width展示的宽度Numberfalse300
height展示的宽高Numberfalse150
minScale缩小时，最小值Numberfalse0.1
maxScale放大时，最大值Numberfalse10

插槽 ​

插槽名称描述
info图片的信息(缩放比例，左上角坐标等)

事件 ​

事件名描述类型
mousedown鼠标按下Function
mousemove鼠标按下并移动Function
imageLoaded图片被加载Function
drawImage刷新图片Function
mouseout鼠标移出组件Function
mouseup鼠标抬起Function
wheel鼠标滚动Function