Fabric.js 圆角矩形

圆角矩形


F2E 前端


<template>
  <canvas width="400" height="375" id="canvas" style="border: 1px solid #ccc;"></canvas>
</template>

<script setup>
import { onMounted } from 'vue'
import { fabric } from 'fabric'

function init() {
  const canvas = new fabric.Canvas('canvas') // 绑定canvas,传入id

  const rect = new fabric.Rect({
    top: 100, // 距离容器顶部 100px
    left: 100, // 距离容器左侧 100px
    fill: 'orange', // 填充 橙色
    width: 100, // 宽度 100px
    height: 100, // 高度 100px
    rx: 20, // x轴的半径
    ry: 20 // y轴的半径
  })

  // 将矩形添加到画布中
  canvas.add(rect)
}

onMounted(() => {
  init()
})
</script>

画圆角矩形,需要添加 rxry,这两个属性的值可以不一样,如果知道 css 圆角的原理,其实对 rxry 不难理解。

自己修改一下这两个值看看效果理解会更深刻。

本作品采用《CC 协议》,转载必须注明作者和本文链接
juejin.cn/user/2673620576140030/posts
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!