Fabricjs:如何只显示图像的一部分?
Fabricjs: how to display only a part of image?
我想使用 fabricjs 在 canvas 上显示部分图像(如 html、css 中的 sprite 和背景位置)。
默认情况下,使用 fabricjs,它从图像的左上角开始显示。但我想显示图像的一部分,而不是从左上角开始。
例如:我想在canvas上显示这张图片的黑边部分。
我在 fabricjs 中没有看到任何 属性 或函数可以做到这一点。你有什么建议吗?谢谢
你试过cropX/cropY了吗?将它们与设置宽度和高度结合起来:
const canvas = new fabric.Canvas('c')
const url = 'https://i.stack.imgur.com/qVhbV.jpg'
const imgEl = document.createElement('img')
imgEl.src = url
imgEl.onload = () => {
const img = new fabric.Image(imgEl)
img.set({
cropX: 70,
cropY: 140,
width: 200,
height: 150,
})
canvas.add(img)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js"></script>
<canvas id="c" width="300" height="200"></canvas>
我想使用 fabricjs 在 canvas 上显示部分图像(如 html、css 中的 sprite 和背景位置)。 默认情况下,使用 fabricjs,它从图像的左上角开始显示。但我想显示图像的一部分,而不是从左上角开始。
例如:我想在canvas上显示这张图片的黑边部分。
我在 fabricjs 中没有看到任何 属性 或函数可以做到这一点。你有什么建议吗?谢谢
你试过cropX/cropY了吗?将它们与设置宽度和高度结合起来:
const canvas = new fabric.Canvas('c')
const url = 'https://i.stack.imgur.com/qVhbV.jpg'
const imgEl = document.createElement('img')
imgEl.src = url
imgEl.onload = () => {
const img = new fabric.Image(imgEl)
img.set({
cropX: 70,
cropY: 140,
width: 200,
height: 150,
})
canvas.add(img)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js"></script>
<canvas id="c" width="300" height="200"></canvas>