html - Fabricjs:如何只显示图像的一部分?
问题描述
我想使用fabricjs在画布上显示一部分图像(如html,css中的精灵和背景位置)。默认情况下,fabricjs 会从图像的左上角显示。但我想显示不是从左上角开始的图像的一部分。
例如:我想在画布上显示这张图片的黑色边框部分。
我在 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>
推荐阅读
- tfs - SonarQube 7.1 和 TFS 2018 发布质量门结果失败
- c# - 无论开始时间如何,将任务安排在每小时的第 35 分钟
- python - 使用 OpenCV 进行人脸识别中的背景对象检测
- spring - 如何针对接口中的注释参数编写测试?
- aws-lambda - AWS AppSync 在解析子资源之前等待 DynamoDB Streams Lambda 函数
- amazon-web-services - 具有上下文标识的 aws lambda 测试
- django - 如何在 Django 视图中注册期间输入电子邮件数据
- python-3.x - 根据日期时间索引中的条件删除数据框行
- tfs - 有没有办法为 TFS 或 VSTS 中的代理池保留管道?
- python - 将图层与输入相结合