<canvas id="canvasBox"></canvas>
<script>
let canvas = new fabric.Canvas('canvasBox', {
overlayImage: 'https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/27d1b4e5f8824198b6d51a2b1c2d0d75~tplv-k3u1fbpfcp-zoom-crop-mark:400:400:400:400.awebp',
overlayVpt: false,
backgroundColor: 'red',
})
let rect = new fabric.Rect({
width: 80,
height: 80,
})
canvas.add(rect)
canvas.on('mouse:wheel', opt => {
const delta = opt.e.deltaY
let zoom = canvas.getZoom()
zoom *= 0.999 ** delta
if (zoom > 20) zoom = 20
if (zoom < 0.01) zoom = 0.01
canvas.zoomToPoint(
{
x: opt.e.offsetX,
y: opt.e.offsetY
},
zoom
)
opt.e.preventDefault()
opt.e.stopPropagation()
})
canvas.on('mouse:down', opt => {
let evt = opt.e
canvas.isDragging = true
canvas.lastPosX = evt.clientX
canvas.lastPosY = evt.clientY
})
canvas.on('mouse:move', opt => {
if (canvas.isDragging) {
let evt = opt.e
let vpt = canvas.viewportTransform
vpt[4] += evt.clientX - canvas.lastPosX
vpt[5] += evt.clientY - canvas.lastPosY
canvas.requestRenderAll()
canvas.lastPosX = evt.clientX
canvas.lastPosY = evt.clientY
}
})
canvas.on('mouse:up', opt => {
canvas.setViewportTransform(canvas.viewportTransform)
canvas.isDragging = false
})
</script>
感觉这和 《Fabric.js 确定背景图,不受缩放和拖拽的影响》 里讲到的有点像,对吧~
所以当看到 fabric.js
的相关特点和办法称号里呈现 Vpt
,大概率就和 视口 有关。
更灵敏的操作办法 setOverlayImage
运用 setOverlayImage
支撑更多装备。
setOverlayImage(image, callback, optionsopt)
接纳3个参数
-
image
: 图画实例或许URL
-
callback
: 回调函数(主要是设置完后改写画布)
-
optionsopt
: 这是可选项,不填也没事。填了就能够设置图画的装备。
![Fabric.js 运用图片隐瞒画布(远景图) Fabric.js 运用图片隐瞒画布(远景图)](https://www.6hu.cc/storage/2022/12/1671082223-d4108f2f1fc6be1.png)
canvas.setOverlayImage(
'../../images/bg4.png',
canvas.renderAll.bind(canvas),
{
originX: 'left',
originY: 'top'
}
)
除了设置 originX
和 originY
外,还能够设置 top
、left
、opacity
、angle
等参数。
更多用法能够检查代码库房。
代码库房
⭐overlayImage 和 overlayVpt
⭐setOverlayImage
引荐阅览
《Fabric.js 从入门到_ _ _ _ _ _》
《Fabric.js 操控元素层级》
《Fabric.js 上划线、中划线(删去线)、下划线》
《Fabric.js 激活输入框》
《Fabric.js 输出精简的JSON》
《Fabric.js IText 手动设置斜体》
点赞 + 重视 + 保藏 = 学会了
假如不期望掩盖图被缩放和平移等操作影响(不受视口改换的影响),能够将 overlayVpt
设为 false
。
![Fabric.js 运用图片隐瞒画布(远景图) Fabric.js 运用图片隐瞒画布(远景图)](https://www.6hu.cc/storage/2022/12/1671082220-e3cf46a9936f5e3.gif)
<canvas id="canvasBox"></canvas>
<script>
let canvas = new fabric.Canvas('canvasBox', {
overlayImage: 'https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/27d1b4e5f8824198b6d51a2b1c2d0d75~tplv-k3u1fbpfcp-zoom-crop-mark:400:400:400:400.awebp',
overlayVpt: false,
backgroundColor: 'red',
})
let rect = new fabric.Rect({
width: 80,
height: 80,
})
canvas.add(rect)
canvas.on('mouse:wheel', opt => {
const delta = opt.e.deltaY
let zoom = canvas.getZoom()
zoom *= 0.999 ** delta
if (zoom > 20) zoom = 20
if (zoom < 0.01) zoom = 0.01
canvas.zoomToPoint(
{
x: opt.e.offsetX,
y: opt.e.offsetY
},
zoom
)
opt.e.preventDefault()
opt.e.stopPropagation()
})
canvas.on('mouse:down', opt => {
let evt = opt.e
canvas.isDragging = true
canvas.lastPosX = evt.clientX
canvas.lastPosY = evt.clientY
})
canvas.on('mouse:move', opt => {
if (canvas.isDragging) {
let evt = opt.e
let vpt = canvas.viewportTransform
vpt[4] += evt.clientX - canvas.lastPosX
vpt[5] += evt.clientY - canvas.lastPosY
canvas.requestRenderAll()
canvas.lastPosX = evt.clientX
canvas.lastPosY = evt.clientY
}
})
canvas.on('mouse:up', opt => {
canvas.setViewportTransform(canvas.viewportTransform)
canvas.isDragging = false
})
</script>
感觉这和 《Fabric.js 确定背景图,不受缩放和拖拽的影响》 里讲到的有点像,对吧~
所以当看到 fabric.js
的相关特点和办法称号里呈现 Vpt
,大概率就和 视口 有关。
更灵敏的操作办法 setOverlayImage
运用 setOverlayImage
支撑更多装备。
setOverlayImage(image, callback, optionsopt)
接纳3个参数
-
image
: 图画实例或许URL
-
callback
: 回调函数(主要是设置完后改写画布)
-
optionsopt
: 这是可选项,不填也没事。填了就能够设置图画的装备。
![Fabric.js 运用图片隐瞒画布(远景图) Fabric.js 运用图片隐瞒画布(远景图)](https://www.6hu.cc/storage/2022/12/1671082223-d4108f2f1fc6be1.png)
canvas.setOverlayImage(
'../../images/bg4.png',
canvas.renderAll.bind(canvas),
{
originX: 'left',
originY: 'top'
}
)
除了设置 originX
和 originY
外,还能够设置 top
、left
、opacity
、angle
等参数。
更多用法能够检查代码库房。
代码库房
⭐overlayImage 和 overlayVpt
⭐setOverlayImage
引荐阅览
《Fabric.js 从入门到_ _ _ _ _ _》
《Fabric.js 操控元素层级》
《Fabric.js 上划线、中划线(删去线)、下划线》
《Fabric.js 激活输入框》
《Fabric.js 输出精简的JSON》
《Fabric.js IText 手动设置斜体》
点赞 + 重视 + 保藏 = 学会了
<canvas id="canvasBox"></canvas>
<script>
let canvas = new fabric.Canvas('canvasBox', {
overlayImage: 'https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/27d1b4e5f8824198b6d51a2b1c2d0d75~tplv-k3u1fbpfcp-zoom-crop-mark:400:400:400:400.awebp',
backgroundColor: 'red',
})
let rect = new fabric.Rect({
width: 80,
height: 80,
})
canvas.add(rect)
</script>
这个比如中,本来应该有一个矩形在画布上的,并且背景色也应该是赤色。
但设置了 overlayImage
,所以整个画布都被图片掩盖了。
overlayImage
和 overlayColor
相同,都能够将画布上的一切元素掩盖掉,比如背景图、背景色、图形等元素。
掩盖图画不受视口改换的影响
由于图片是有尺度的,假如你的场景中,画布能够缩放或许被拖拽,就会呈现下图的效果。
掩盖的图片被缩小或许移动后,就露出了背景色(赤色)。
![Fabric.js 运用图片隐瞒画布(远景图) Fabric.js 运用图片隐瞒画布(远景图)](https://www.6hu.cc/storage/2022/12/1671082216-50722a868752293.gif)
假如不期望掩盖图被缩放和平移等操作影响(不受视口改换的影响),能够将 overlayVpt
设为 false
。
![Fabric.js 运用图片隐瞒画布(远景图) Fabric.js 运用图片隐瞒画布(远景图)](https://www.6hu.cc/storage/2022/12/1671082220-e3cf46a9936f5e3.gif)
<canvas id="canvasBox"></canvas>
<script>
let canvas = new fabric.Canvas('canvasBox', {
overlayImage: 'https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/27d1b4e5f8824198b6d51a2b1c2d0d75~tplv-k3u1fbpfcp-zoom-crop-mark:400:400:400:400.awebp',
overlayVpt: false,
backgroundColor: 'red',
})
let rect = new fabric.Rect({
width: 80,
height: 80,
})
canvas.add(rect)
canvas.on('mouse:wheel', opt => {
const delta = opt.e.deltaY
let zoom = canvas.getZoom()
zoom *= 0.999 ** delta
if (zoom > 20) zoom = 20
if (zoom < 0.01) zoom = 0.01
canvas.zoomToPoint(
{
x: opt.e.offsetX,
y: opt.e.offsetY
},
zoom
)
opt.e.preventDefault()
opt.e.stopPropagation()
})
canvas.on('mouse:down', opt => {
let evt = opt.e
canvas.isDragging = true
canvas.lastPosX = evt.clientX
canvas.lastPosY = evt.clientY
})
canvas.on('mouse:move', opt => {
if (canvas.isDragging) {
let evt = opt.e
let vpt = canvas.viewportTransform
vpt[4] += evt.clientX - canvas.lastPosX
vpt[5] += evt.clientY - canvas.lastPosY
canvas.requestRenderAll()
canvas.lastPosX = evt.clientX
canvas.lastPosY = evt.clientY
}
})
canvas.on('mouse:up', opt => {
canvas.setViewportTransform(canvas.viewportTransform)
canvas.isDragging = false
})
</script>
感觉这和 《Fabric.js 确定背景图,不受缩放和拖拽的影响》 里讲到的有点像,对吧~
所以当看到 fabric.js
的相关特点和办法称号里呈现 Vpt
,大概率就和 视口 有关。
更灵敏的操作办法 setOverlayImage
运用 setOverlayImage
支撑更多装备。
setOverlayImage(image, callback, optionsopt)
接纳3个参数
-
image
: 图画实例或许URL
-
callback
: 回调函数(主要是设置完后改写画布)
-
optionsopt
: 这是可选项,不填也没事。填了就能够设置图画的装备。
![Fabric.js 运用图片隐瞒画布(远景图) Fabric.js 运用图片隐瞒画布(远景图)](https://www.6hu.cc/storage/2022/12/1671082223-d4108f2f1fc6be1.png)
canvas.setOverlayImage(
'../../images/bg4.png',
canvas.renderAll.bind(canvas),
{
originX: 'left',
originY: 'top'
}
)
除了设置 originX
和 originY
外,还能够设置 top
、left
、opacity
、angle
等参数。
更多用法能够检查代码库房。
代码库房
⭐overlayImage 和 overlayVpt
⭐setOverlayImage
引荐阅览
《Fabric.js 从入门到_ _ _ _ _ _》
《Fabric.js 操控元素层级》
《Fabric.js 上划线、中划线(删去线)、下划线》
《Fabric.js 激活输入框》
《Fabric.js 输出精简的JSON》
《Fabric.js IText 手动设置斜体》
点赞 + 重视 + 保藏 = 学会了
我报名参加金石计划1期应战——瓜分10万奖池,这是我的第16篇文章,点击检查活动详情
本文简介
点赞 + 重视 + 保藏 = 学会了
在 《Fabric.js 运用纯色遮挡画布(远景色)》 中讲到运用纯色的办法隐瞒画布。假如你的常见需求运用图片来隐瞒的话,fabric.js
也提供了相应的特点来装备。
相比起运用纯色隐瞒画布,运用图片会更复杂。
因为图片自身是有尺度巨细的,所以可能会遇到缩放画布、平移画布等操作。
而纯色的话就不需求管色块的尺度,移动到哪,怎样缩放都是全屏(整个画布)纯色。
运用图片掩盖画布
假如需求用图片隐瞒画布,能够设置 canvas
的 overlayImage
特点,传入的值就是图片地址。
能够运用网图,也能够运用本地图片。和 backgroundImage
的用法差不多。
![Fabric.js 运用图片隐瞒画布(远景图) Fabric.js 运用图片隐瞒画布(远景图)](https://www.6hu.cc/storage/2022/12/1671082212-a11d7ebd4b26832.png)
<canvas id="canvasBox"></canvas>
<script>
let canvas = new fabric.Canvas('canvasBox', {
overlayImage: 'https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/27d1b4e5f8824198b6d51a2b1c2d0d75~tplv-k3u1fbpfcp-zoom-crop-mark:400:400:400:400.awebp',
backgroundColor: 'red',
})
let rect = new fabric.Rect({
width: 80,
height: 80,
})
canvas.add(rect)
</script>
这个比如中,本来应该有一个矩形在画布上的,并且背景色也应该是赤色。
但设置了 overlayImage
,所以整个画布都被图片掩盖了。
overlayImage
和 overlayColor
相同,都能够将画布上的一切元素掩盖掉,比如背景图、背景色、图形等元素。
掩盖图画不受视口改换的影响
由于图片是有尺度的,假如你的场景中,画布能够缩放或许被拖拽,就会呈现下图的效果。
掩盖的图片被缩小或许移动后,就露出了背景色(赤色)。
![Fabric.js 运用图片隐瞒画布(远景图) Fabric.js 运用图片隐瞒画布(远景图)](https://www.6hu.cc/storage/2022/12/1671082216-50722a868752293.gif)
假如不期望掩盖图被缩放和平移等操作影响(不受视口改换的影响),能够将 overlayVpt
设为 false
。
![Fabric.js 运用图片隐瞒画布(远景图) Fabric.js 运用图片隐瞒画布(远景图)](https://www.6hu.cc/storage/2022/12/1671082220-e3cf46a9936f5e3.gif)
<canvas id="canvasBox"></canvas>
<script>
let canvas = new fabric.Canvas('canvasBox', {
overlayImage: 'https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/27d1b4e5f8824198b6d51a2b1c2d0d75~tplv-k3u1fbpfcp-zoom-crop-mark:400:400:400:400.awebp',
overlayVpt: false,
backgroundColor: 'red',
})
let rect = new fabric.Rect({
width: 80,
height: 80,
})
canvas.add(rect)
canvas.on('mouse:wheel', opt => {
const delta = opt.e.deltaY
let zoom = canvas.getZoom()
zoom *= 0.999 ** delta
if (zoom > 20) zoom = 20
if (zoom < 0.01) zoom = 0.01
canvas.zoomToPoint(
{
x: opt.e.offsetX,
y: opt.e.offsetY
},
zoom
)
opt.e.preventDefault()
opt.e.stopPropagation()
})
canvas.on('mouse:down', opt => {
let evt = opt.e
canvas.isDragging = true
canvas.lastPosX = evt.clientX
canvas.lastPosY = evt.clientY
})
canvas.on('mouse:move', opt => {
if (canvas.isDragging) {
let evt = opt.e
let vpt = canvas.viewportTransform
vpt[4] += evt.clientX - canvas.lastPosX
vpt[5] += evt.clientY - canvas.lastPosY
canvas.requestRenderAll()
canvas.lastPosX = evt.clientX
canvas.lastPosY = evt.clientY
}
})
canvas.on('mouse:up', opt => {
canvas.setViewportTransform(canvas.viewportTransform)
canvas.isDragging = false
})
</script>
感觉这和 《Fabric.js 确定背景图,不受缩放和拖拽的影响》 里讲到的有点像,对吧~
所以当看到 fabric.js
的相关特点和办法称号里呈现 Vpt
,大概率就和 视口 有关。
更灵敏的操作办法 setOverlayImage
运用 setOverlayImage
支撑更多装备。
setOverlayImage(image, callback, optionsopt)
接纳3个参数
-
image
: 图画实例或许URL
-
callback
: 回调函数(主要是设置完后改写画布)
-
optionsopt
: 这是可选项,不填也没事。填了就能够设置图画的装备。
![Fabric.js 运用图片隐瞒画布(远景图) Fabric.js 运用图片隐瞒画布(远景图)](https://www.6hu.cc/storage/2022/12/1671082223-d4108f2f1fc6be1.png)
canvas.setOverlayImage(
'../../images/bg4.png',
canvas.renderAll.bind(canvas),
{
originX: 'left',
originY: 'top'
}
)
除了设置 originX
和 originY
外,还能够设置 top
、left
、opacity
、angle
等参数。
更多用法能够检查代码库房。
代码库房
⭐overlayImage 和 overlayVpt
⭐setOverlayImage
引荐阅览
《Fabric.js 从入门到_ _ _ _ _ _》
《Fabric.js 操控元素层级》
《Fabric.js 上划线、中划线(删去线)、下划线》
《Fabric.js 激活输入框》
《Fabric.js 输出精简的JSON》
《Fabric.js IText 手动设置斜体》
点赞 + 重视 + 保藏 = 学会了
假如不期望掩盖图被缩放和平移等操作影响(不受视口改换的影响),能够将 overlayVpt
设为 false
。
![Fabric.js 运用图片隐瞒画布(远景图) Fabric.js 运用图片隐瞒画布(远景图)](https://www.6hu.cc/storage/2022/12/1671082220-e3cf46a9936f5e3.gif)
<canvas id="canvasBox"></canvas>
<script>
let canvas = new fabric.Canvas('canvasBox', {
overlayImage: 'https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/27d1b4e5f8824198b6d51a2b1c2d0d75~tplv-k3u1fbpfcp-zoom-crop-mark:400:400:400:400.awebp',
overlayVpt: false,
backgroundColor: 'red',
})
let rect = new fabric.Rect({
width: 80,
height: 80,
})
canvas.add(rect)
canvas.on('mouse:wheel', opt => {
const delta = opt.e.deltaY
let zoom = canvas.getZoom()
zoom *= 0.999 ** delta
if (zoom > 20) zoom = 20
if (zoom < 0.01) zoom = 0.01
canvas.zoomToPoint(
{
x: opt.e.offsetX,
y: opt.e.offsetY
},
zoom
)
opt.e.preventDefault()
opt.e.stopPropagation()
})
canvas.on('mouse:down', opt => {
let evt = opt.e
canvas.isDragging = true
canvas.lastPosX = evt.clientX
canvas.lastPosY = evt.clientY
})
canvas.on('mouse:move', opt => {
if (canvas.isDragging) {
let evt = opt.e
let vpt = canvas.viewportTransform
vpt[4] += evt.clientX - canvas.lastPosX
vpt[5] += evt.clientY - canvas.lastPosY
canvas.requestRenderAll()
canvas.lastPosX = evt.clientX
canvas.lastPosY = evt.clientY
}
})
canvas.on('mouse:up', opt => {
canvas.setViewportTransform(canvas.viewportTransform)
canvas.isDragging = false
})
</script>
感觉这和 《Fabric.js 确定背景图,不受缩放和拖拽的影响》 里讲到的有点像,对吧~
所以当看到 fabric.js
的相关特点和办法称号里呈现 Vpt
,大概率就和 视口 有关。
更灵敏的操作办法 setOverlayImage
运用 setOverlayImage
支撑更多装备。
setOverlayImage(image, callback, optionsopt)
接纳3个参数
-
image
: 图画实例或许URL
-
callback
: 回调函数(主要是设置完后改写画布)
-
optionsopt
: 这是可选项,不填也没事。填了就能够设置图画的装备。
![Fabric.js 运用图片隐瞒画布(远景图) Fabric.js 运用图片隐瞒画布(远景图)](https://www.6hu.cc/storage/2022/12/1671082223-d4108f2f1fc6be1.png)
canvas.setOverlayImage(
'../../images/bg4.png',
canvas.renderAll.bind(canvas),
{
originX: 'left',
originY: 'top'
}
)
除了设置 originX
和 originY
外,还能够设置 top
、left
、opacity
、angle
等参数。
更多用法能够检查代码库房。
代码库房
⭐overlayImage 和 overlayVpt
⭐setOverlayImage
引荐阅览
《Fabric.js 从入门到_ _ _ _ _ _》
《Fabric.js 操控元素层级》
《Fabric.js 上划线、中划线(删去线)、下划线》
《Fabric.js 激活输入框》
《Fabric.js 输出精简的JSON》
《Fabric.js IText 手动设置斜体》
点赞 + 重视 + 保藏 = 学会了
我报名参加金石计划1期应战——瓜分10万奖池,这是我的第16篇文章,点击检查活动详情
本文简介
点赞 + 重视 + 保藏 = 学会了
在 《Fabric.js 运用纯色遮挡画布(远景色)》 中讲到运用纯色的办法隐瞒画布。假如你的常见需求运用图片来隐瞒的话,fabric.js
也提供了相应的特点来装备。
相比起运用纯色隐瞒画布,运用图片会更复杂。
因为图片自身是有尺度巨细的,所以可能会遇到缩放画布、平移画布等操作。
而纯色的话就不需求管色块的尺度,移动到哪,怎样缩放都是全屏(整个画布)纯色。
运用图片掩盖画布
假如需求用图片隐瞒画布,能够设置 canvas
的 overlayImage
特点,传入的值就是图片地址。
能够运用网图,也能够运用本地图片。和 backgroundImage
的用法差不多。
![Fabric.js 运用图片隐瞒画布(远景图) Fabric.js 运用图片隐瞒画布(远景图)](https://www.6hu.cc/storage/2022/12/1671082212-a11d7ebd4b26832.png)
<canvas id="canvasBox"></canvas>
<script>
let canvas = new fabric.Canvas('canvasBox', {
overlayImage: 'https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/27d1b4e5f8824198b6d51a2b1c2d0d75~tplv-k3u1fbpfcp-zoom-crop-mark:400:400:400:400.awebp',
backgroundColor: 'red',
})
let rect = new fabric.Rect({
width: 80,
height: 80,
})
canvas.add(rect)
</script>
这个比如中,本来应该有一个矩形在画布上的,并且背景色也应该是赤色。
但设置了 overlayImage
,所以整个画布都被图片掩盖了。
overlayImage
和 overlayColor
相同,都能够将画布上的一切元素掩盖掉,比如背景图、背景色、图形等元素。
掩盖图画不受视口改换的影响
由于图片是有尺度的,假如你的场景中,画布能够缩放或许被拖拽,就会呈现下图的效果。
掩盖的图片被缩小或许移动后,就露出了背景色(赤色)。
![Fabric.js 运用图片隐瞒画布(远景图) Fabric.js 运用图片隐瞒画布(远景图)](https://www.6hu.cc/storage/2022/12/1671082216-50722a868752293.gif)
假如不期望掩盖图被缩放和平移等操作影响(不受视口改换的影响),能够将 overlayVpt
设为 false
。
![Fabric.js 运用图片隐瞒画布(远景图) Fabric.js 运用图片隐瞒画布(远景图)](https://www.6hu.cc/storage/2022/12/1671082220-e3cf46a9936f5e3.gif)
<canvas id="canvasBox"></canvas>
<script>
let canvas = new fabric.Canvas('canvasBox', {
overlayImage: 'https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/27d1b4e5f8824198b6d51a2b1c2d0d75~tplv-k3u1fbpfcp-zoom-crop-mark:400:400:400:400.awebp',
overlayVpt: false,
backgroundColor: 'red',
})
let rect = new fabric.Rect({
width: 80,
height: 80,
})
canvas.add(rect)
canvas.on('mouse:wheel', opt => {
const delta = opt.e.deltaY
let zoom = canvas.getZoom()
zoom *= 0.999 ** delta
if (zoom > 20) zoom = 20
if (zoom < 0.01) zoom = 0.01
canvas.zoomToPoint(
{
x: opt.e.offsetX,
y: opt.e.offsetY
},
zoom
)
opt.e.preventDefault()
opt.e.stopPropagation()
})
canvas.on('mouse:down', opt => {
let evt = opt.e
canvas.isDragging = true
canvas.lastPosX = evt.clientX
canvas.lastPosY = evt.clientY
})
canvas.on('mouse:move', opt => {
if (canvas.isDragging) {
let evt = opt.e
let vpt = canvas.viewportTransform
vpt[4] += evt.clientX - canvas.lastPosX
vpt[5] += evt.clientY - canvas.lastPosY
canvas.requestRenderAll()
canvas.lastPosX = evt.clientX
canvas.lastPosY = evt.clientY
}
})
canvas.on('mouse:up', opt => {
canvas.setViewportTransform(canvas.viewportTransform)
canvas.isDragging = false
})
</script>
感觉这和 《Fabric.js 确定背景图,不受缩放和拖拽的影响》 里讲到的有点像,对吧~
所以当看到 fabric.js
的相关特点和办法称号里呈现 Vpt
,大概率就和 视口 有关。
更灵敏的操作办法 setOverlayImage
运用 setOverlayImage
支撑更多装备。
setOverlayImage(image, callback, optionsopt)
接纳3个参数
-
image
: 图画实例或许URL
-
callback
: 回调函数(主要是设置完后改写画布)
-
optionsopt
: 这是可选项,不填也没事。填了就能够设置图画的装备。
![Fabric.js 运用图片隐瞒画布(远景图) Fabric.js 运用图片隐瞒画布(远景图)](https://www.6hu.cc/storage/2022/12/1671082223-d4108f2f1fc6be1.png)
canvas.setOverlayImage(
'../../images/bg4.png',
canvas.renderAll.bind(canvas),
{
originX: 'left',
originY: 'top'
}
)
除了设置 originX
和 originY
外,还能够设置 top
、left
、opacity
、angle
等参数。
更多用法能够检查代码库房。
代码库房
⭐overlayImage 和 overlayVpt
⭐setOverlayImage
引荐阅览
《Fabric.js 从入门到_ _ _ _ _ _》
《Fabric.js 操控元素层级》
《Fabric.js 上划线、中划线(删去线)、下划线》
《Fabric.js 激活输入框》
《Fabric.js 输出精简的JSON》
《Fabric.js IText 手动设置斜体》
点赞 + 重视 + 保藏 = 学会了
<canvas id="canvasBox"></canvas>
<script>
let canvas = new fabric.Canvas('canvasBox', {
overlayImage: 'https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/27d1b4e5f8824198b6d51a2b1c2d0d75~tplv-k3u1fbpfcp-zoom-crop-mark:400:400:400:400.awebp',
backgroundColor: 'red',
})
let rect = new fabric.Rect({
width: 80,
height: 80,
})
canvas.add(rect)
</script>
这个比如中,本来应该有一个矩形在画布上的,并且背景色也应该是赤色。
但设置了 overlayImage
,所以整个画布都被图片掩盖了。
overlayImage
和 overlayColor
相同,都能够将画布上的一切元素掩盖掉,比如背景图、背景色、图形等元素。
掩盖图画不受视口改换的影响
由于图片是有尺度的,假如你的场景中,画布能够缩放或许被拖拽,就会呈现下图的效果。
掩盖的图片被缩小或许移动后,就露出了背景色(赤色)。
![Fabric.js 运用图片隐瞒画布(远景图) Fabric.js 运用图片隐瞒画布(远景图)](https://www.6hu.cc/storage/2022/12/1671082216-50722a868752293.gif)
假如不期望掩盖图被缩放和平移等操作影响(不受视口改换的影响),能够将 overlayVpt
设为 false
。
![Fabric.js 运用图片隐瞒画布(远景图) Fabric.js 运用图片隐瞒画布(远景图)](https://www.6hu.cc/storage/2022/12/1671082220-e3cf46a9936f5e3.gif)
<canvas id="canvasBox"></canvas>
<script>
let canvas = new fabric.Canvas('canvasBox', {
overlayImage: 'https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/27d1b4e5f8824198b6d51a2b1c2d0d75~tplv-k3u1fbpfcp-zoom-crop-mark:400:400:400:400.awebp',
overlayVpt: false,
backgroundColor: 'red',
})
let rect = new fabric.Rect({
width: 80,
height: 80,
})
canvas.add(rect)
canvas.on('mouse:wheel', opt => {
const delta = opt.e.deltaY
let zoom = canvas.getZoom()
zoom *= 0.999 ** delta
if (zoom > 20) zoom = 20
if (zoom < 0.01) zoom = 0.01
canvas.zoomToPoint(
{
x: opt.e.offsetX,
y: opt.e.offsetY
},
zoom
)
opt.e.preventDefault()
opt.e.stopPropagation()
})
canvas.on('mouse:down', opt => {
let evt = opt.e
canvas.isDragging = true
canvas.lastPosX = evt.clientX
canvas.lastPosY = evt.clientY
})
canvas.on('mouse:move', opt => {
if (canvas.isDragging) {
let evt = opt.e
let vpt = canvas.viewportTransform
vpt[4] += evt.clientX - canvas.lastPosX
vpt[5] += evt.clientY - canvas.lastPosY
canvas.requestRenderAll()
canvas.lastPosX = evt.clientX
canvas.lastPosY = evt.clientY
}
})
canvas.on('mouse:up', opt => {
canvas.setViewportTransform(canvas.viewportTransform)
canvas.isDragging = false
})
</script>
感觉这和 《Fabric.js 确定背景图,不受缩放和拖拽的影响》 里讲到的有点像,对吧~
所以当看到 fabric.js
的相关特点和办法称号里呈现 Vpt
,大概率就和 视口 有关。
更灵敏的操作办法 setOverlayImage
运用 setOverlayImage
支撑更多装备。
setOverlayImage(image, callback, optionsopt)
接纳3个参数
-
image
: 图画实例或许URL
-
callback
: 回调函数(主要是设置完后改写画布)
-
optionsopt
: 这是可选项,不填也没事。填了就能够设置图画的装备。
![Fabric.js 运用图片隐瞒画布(远景图) Fabric.js 运用图片隐瞒画布(远景图)](https://www.6hu.cc/storage/2022/12/1671082223-d4108f2f1fc6be1.png)
canvas.setOverlayImage(
'../../images/bg4.png',
canvas.renderAll.bind(canvas),
{
originX: 'left',
originY: 'top'
}
)
除了设置 originX
和 originY
外,还能够设置 top
、left
、opacity
、angle
等参数。
更多用法能够检查代码库房。
代码库房
⭐overlayImage 和 overlayVpt
⭐setOverlayImage
引荐阅览
《Fabric.js 从入门到_ _ _ _ _ _》
《Fabric.js 操控元素层级》
《Fabric.js 上划线、中划线(删去线)、下划线》
《Fabric.js 激活输入框》
《Fabric.js 输出精简的JSON》
《Fabric.js IText 手动设置斜体》
点赞 + 重视 + 保藏 = 学会了
我报名参加金石计划1期应战——瓜分10万奖池,这是我的第16篇文章,点击检查活动详情
本文简介
点赞 + 重视 + 保藏 = 学会了
在 《Fabric.js 运用纯色遮挡画布(远景色)》 中讲到运用纯色的办法隐瞒画布。假如你的常见需求运用图片来隐瞒的话,fabric.js
也提供了相应的特点来装备。
相比起运用纯色隐瞒画布,运用图片会更复杂。
因为图片自身是有尺度巨细的,所以可能会遇到缩放画布、平移画布等操作。
而纯色的话就不需求管色块的尺度,移动到哪,怎样缩放都是全屏(整个画布)纯色。
运用图片掩盖画布
假如需求用图片隐瞒画布,能够设置 canvas
的 overlayImage
特点,传入的值就是图片地址。
能够运用网图,也能够运用本地图片。和 backgroundImage
的用法差不多。
![Fabric.js 运用图片隐瞒画布(远景图) Fabric.js 运用图片隐瞒画布(远景图)](https://www.6hu.cc/storage/2022/12/1671082212-a11d7ebd4b26832.png)
<canvas id="canvasBox"></canvas>
<script>
let canvas = new fabric.Canvas('canvasBox', {
overlayImage: 'https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/27d1b4e5f8824198b6d51a2b1c2d0d75~tplv-k3u1fbpfcp-zoom-crop-mark:400:400:400:400.awebp',
backgroundColor: 'red',
})
let rect = new fabric.Rect({
width: 80,
height: 80,
})
canvas.add(rect)
</script>
这个比如中,本来应该有一个矩形在画布上的,并且背景色也应该是赤色。
但设置了 overlayImage
,所以整个画布都被图片掩盖了。
overlayImage
和 overlayColor
相同,都能够将画布上的一切元素掩盖掉,比如背景图、背景色、图形等元素。
掩盖图画不受视口改换的影响
由于图片是有尺度的,假如你的场景中,画布能够缩放或许被拖拽,就会呈现下图的效果。
掩盖的图片被缩小或许移动后,就露出了背景色(赤色)。
![Fabric.js 运用图片隐瞒画布(远景图) Fabric.js 运用图片隐瞒画布(远景图)](https://www.6hu.cc/storage/2022/12/1671082216-50722a868752293.gif)
假如不期望掩盖图被缩放和平移等操作影响(不受视口改换的影响),能够将 overlayVpt
设为 false
。
![Fabric.js 运用图片隐瞒画布(远景图) Fabric.js 运用图片隐瞒画布(远景图)](https://www.6hu.cc/storage/2022/12/1671082220-e3cf46a9936f5e3.gif)
<canvas id="canvasBox"></canvas>
<script>
let canvas = new fabric.Canvas('canvasBox', {
overlayImage: 'https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/27d1b4e5f8824198b6d51a2b1c2d0d75~tplv-k3u1fbpfcp-zoom-crop-mark:400:400:400:400.awebp',
overlayVpt: false,
backgroundColor: 'red',
})
let rect = new fabric.Rect({
width: 80,
height: 80,
})
canvas.add(rect)
canvas.on('mouse:wheel', opt => {
const delta = opt.e.deltaY
let zoom = canvas.getZoom()
zoom *= 0.999 ** delta
if (zoom > 20) zoom = 20
if (zoom < 0.01) zoom = 0.01
canvas.zoomToPoint(
{
x: opt.e.offsetX,
y: opt.e.offsetY
},
zoom
)
opt.e.preventDefault()
opt.e.stopPropagation()
})
canvas.on('mouse:down', opt => {
let evt = opt.e
canvas.isDragging = true
canvas.lastPosX = evt.clientX
canvas.lastPosY = evt.clientY
})
canvas.on('mouse:move', opt => {
if (canvas.isDragging) {
let evt = opt.e
let vpt = canvas.viewportTransform
vpt[4] += evt.clientX - canvas.lastPosX
vpt[5] += evt.clientY - canvas.lastPosY
canvas.requestRenderAll()
canvas.lastPosX = evt.clientX
canvas.lastPosY = evt.clientY
}
})
canvas.on('mouse:up', opt => {
canvas.setViewportTransform(canvas.viewportTransform)
canvas.isDragging = false
})
</script>
感觉这和 《Fabric.js 确定背景图,不受缩放和拖拽的影响》 里讲到的有点像,对吧~
所以当看到 fabric.js
的相关特点和办法称号里呈现 Vpt
,大概率就和 视口 有关。
更灵敏的操作办法 setOverlayImage
运用 setOverlayImage
支撑更多装备。
setOverlayImage(image, callback, optionsopt)
接纳3个参数
-
image
: 图画实例或许URL
-
callback
: 回调函数(主要是设置完后改写画布)
-
optionsopt
: 这是可选项,不填也没事。填了就能够设置图画的装备。
![Fabric.js 运用图片隐瞒画布(远景图) Fabric.js 运用图片隐瞒画布(远景图)](https://www.6hu.cc/storage/2022/12/1671082223-d4108f2f1fc6be1.png)
canvas.setOverlayImage(
'../../images/bg4.png',
canvas.renderAll.bind(canvas),
{
originX: 'left',
originY: 'top'
}
)
除了设置 originX
和 originY
外,还能够设置 top
、left
、opacity
、angle
等参数。
更多用法能够检查代码库房。
代码库房
⭐overlayImage 和 overlayVpt
⭐setOverlayImage
引荐阅览
《Fabric.js 从入门到_ _ _ _ _ _》
《Fabric.js 操控元素层级》
《Fabric.js 上划线、中划线(删去线)、下划线》
《Fabric.js 激活输入框》
《Fabric.js 输出精简的JSON》
《Fabric.js IText 手动设置斜体》
点赞 + 重视 + 保藏 = 学会了
假如不期望掩盖图被缩放和平移等操作影响(不受视口改换的影响),能够将 overlayVpt
设为 false
。
![Fabric.js 运用图片隐瞒画布(远景图) Fabric.js 运用图片隐瞒画布(远景图)](https://www.6hu.cc/storage/2022/12/1671082220-e3cf46a9936f5e3.gif)
<canvas id="canvasBox"></canvas>
<script>
let canvas = new fabric.Canvas('canvasBox', {
overlayImage: 'https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/27d1b4e5f8824198b6d51a2b1c2d0d75~tplv-k3u1fbpfcp-zoom-crop-mark:400:400:400:400.awebp',
overlayVpt: false,
backgroundColor: 'red',
})
let rect = new fabric.Rect({
width: 80,
height: 80,
})
canvas.add(rect)
canvas.on('mouse:wheel', opt => {
const delta = opt.e.deltaY
let zoom = canvas.getZoom()
zoom *= 0.999 ** delta
if (zoom > 20) zoom = 20
if (zoom < 0.01) zoom = 0.01
canvas.zoomToPoint(
{
x: opt.e.offsetX,
y: opt.e.offsetY
},
zoom
)
opt.e.preventDefault()
opt.e.stopPropagation()
})
canvas.on('mouse:down', opt => {
let evt = opt.e
canvas.isDragging = true
canvas.lastPosX = evt.clientX
canvas.lastPosY = evt.clientY
})
canvas.on('mouse:move', opt => {
if (canvas.isDragging) {
let evt = opt.e
let vpt = canvas.viewportTransform
vpt[4] += evt.clientX - canvas.lastPosX
vpt[5] += evt.clientY - canvas.lastPosY
canvas.requestRenderAll()
canvas.lastPosX = evt.clientX
canvas.lastPosY = evt.clientY
}
})
canvas.on('mouse:up', opt => {
canvas.setViewportTransform(canvas.viewportTransform)
canvas.isDragging = false
})
</script>
感觉这和 《Fabric.js 确定背景图,不受缩放和拖拽的影响》 里讲到的有点像,对吧~
所以当看到 fabric.js
的相关特点和办法称号里呈现 Vpt
,大概率就和 视口 有关。
更灵敏的操作办法 setOverlayImage
运用 setOverlayImage
支撑更多装备。
setOverlayImage(image, callback, optionsopt)
接纳3个参数
-
image
: 图画实例或许URL
-
callback
: 回调函数(主要是设置完后改写画布)
-
optionsopt
: 这是可选项,不填也没事。填了就能够设置图画的装备。
![Fabric.js 运用图片隐瞒画布(远景图) Fabric.js 运用图片隐瞒画布(远景图)](https://www.6hu.cc/storage/2022/12/1671082223-d4108f2f1fc6be1.png)
canvas.setOverlayImage(
'../../images/bg4.png',
canvas.renderAll.bind(canvas),
{
originX: 'left',
originY: 'top'
}
)
除了设置 originX
和 originY
外,还能够设置 top
、left
、opacity
、angle
等参数。
更多用法能够检查代码库房。
代码库房
⭐overlayImage 和 overlayVpt
⭐setOverlayImage
引荐阅览
《Fabric.js 从入门到_ _ _ _ _ _》
《Fabric.js 操控元素层级》
《Fabric.js 上划线、中划线(删去线)、下划线》
《Fabric.js 激活输入框》
《Fabric.js 输出精简的JSON》
《Fabric.js IText 手动设置斜体》
点赞 + 重视 + 保藏 = 学会了
<canvas id="canvasBox"></canvas>
<script>
let canvas = new fabric.Canvas('canvasBox', {
overlayImage: 'https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/27d1b4e5f8824198b6d51a2b1c2d0d75~tplv-k3u1fbpfcp-zoom-crop-mark:400:400:400:400.awebp',
backgroundColor: 'red',
})
let rect = new fabric.Rect({
width: 80,
height: 80,
})
canvas.add(rect)
</script>
这个比如中,本来应该有一个矩形在画布上的,并且背景色也应该是赤色。
但设置了 overlayImage
,所以整个画布都被图片掩盖了。
overlayImage
和 overlayColor
相同,都能够将画布上的一切元素掩盖掉,比如背景图、背景色、图形等元素。
掩盖图画不受视口改换的影响
由于图片是有尺度的,假如你的场景中,画布能够缩放或许被拖拽,就会呈现下图的效果。
掩盖的图片被缩小或许移动后,就露出了背景色(赤色)。
![Fabric.js 运用图片隐瞒画布(远景图) Fabric.js 运用图片隐瞒画布(远景图)](https://www.6hu.cc/storage/2022/12/1671082216-50722a868752293.gif)
假如不期望掩盖图被缩放和平移等操作影响(不受视口改换的影响),能够将 overlayVpt
设为 false
。
![Fabric.js 运用图片隐瞒画布(远景图) Fabric.js 运用图片隐瞒画布(远景图)](https://www.6hu.cc/storage/2022/12/1671082220-e3cf46a9936f5e3.gif)
<canvas id="canvasBox"></canvas>
<script>
let canvas = new fabric.Canvas('canvasBox', {
overlayImage: 'https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/27d1b4e5f8824198b6d51a2b1c2d0d75~tplv-k3u1fbpfcp-zoom-crop-mark:400:400:400:400.awebp',
overlayVpt: false,
backgroundColor: 'red',
})
let rect = new fabric.Rect({
width: 80,
height: 80,
})
canvas.add(rect)
canvas.on('mouse:wheel', opt => {
const delta = opt.e.deltaY
let zoom = canvas.getZoom()
zoom *= 0.999 ** delta
if (zoom > 20) zoom = 20
if (zoom < 0.01) zoom = 0.01
canvas.zoomToPoint(
{
x: opt.e.offsetX,
y: opt.e.offsetY
},
zoom
)
opt.e.preventDefault()
opt.e.stopPropagation()
})
canvas.on('mouse:down', opt => {
let evt = opt.e
canvas.isDragging = true
canvas.lastPosX = evt.clientX
canvas.lastPosY = evt.clientY
})
canvas.on('mouse:move', opt => {
if (canvas.isDragging) {
let evt = opt.e
let vpt = canvas.viewportTransform
vpt[4] += evt.clientX - canvas.lastPosX
vpt[5] += evt.clientY - canvas.lastPosY
canvas.requestRenderAll()
canvas.lastPosX = evt.clientX
canvas.lastPosY = evt.clientY
}
})
canvas.on('mouse:up', opt => {
canvas.setViewportTransform(canvas.viewportTransform)
canvas.isDragging = false
})
</script>
感觉这和 《Fabric.js 确定背景图,不受缩放和拖拽的影响》 里讲到的有点像,对吧~
所以当看到 fabric.js
的相关特点和办法称号里呈现 Vpt
,大概率就和 视口 有关。
更灵敏的操作办法 setOverlayImage
运用 setOverlayImage
支撑更多装备。
setOverlayImage(image, callback, optionsopt)
接纳3个参数
-
image
: 图画实例或许URL
-
callback
: 回调函数(主要是设置完后改写画布)
-
optionsopt
: 这是可选项,不填也没事。填了就能够设置图画的装备。
![Fabric.js 运用图片隐瞒画布(远景图) Fabric.js 运用图片隐瞒画布(远景图)](https://www.6hu.cc/storage/2022/12/1671082223-d4108f2f1fc6be1.png)
canvas.setOverlayImage(
'../../images/bg4.png',
canvas.renderAll.bind(canvas),
{
originX: 'left',
originY: 'top'
}
)
除了设置 originX
和 originY
外,还能够设置 top
、left
、opacity
、angle
等参数。
更多用法能够检查代码库房。
代码库房
⭐overlayImage 和 overlayVpt
⭐setOverlayImage
引荐阅览
《Fabric.js 从入门到_ _ _ _ _ _》
《Fabric.js 操控元素层级》
《Fabric.js 上划线、中划线(删去线)、下划线》
《Fabric.js 激活输入框》
《Fabric.js 输出精简的JSON》
《Fabric.js IText 手动设置斜体》
点赞 + 重视 + 保藏 = 学会了
我报名参加金石计划1期应战——瓜分10万奖池,这是我的第16篇文章,点击检查活动详情
本文简介
点赞 + 重视 + 保藏 = 学会了
在 《Fabric.js 运用纯色遮挡画布(远景色)》 中讲到运用纯色的办法隐瞒画布。假如你的常见需求运用图片来隐瞒的话,fabric.js
也提供了相应的特点来装备。
相比起运用纯色隐瞒画布,运用图片会更复杂。
因为图片自身是有尺度巨细的,所以可能会遇到缩放画布、平移画布等操作。
而纯色的话就不需求管色块的尺度,移动到哪,怎样缩放都是全屏(整个画布)纯色。
运用图片掩盖画布
假如需求用图片隐瞒画布,能够设置 canvas
的 overlayImage
特点,传入的值就是图片地址。
能够运用网图,也能够运用本地图片。和 backgroundImage
的用法差不多。
![Fabric.js 运用图片隐瞒画布(远景图) Fabric.js 运用图片隐瞒画布(远景图)](https://www.6hu.cc/storage/2022/12/1671082212-a11d7ebd4b26832.png)
<canvas id="canvasBox"></canvas>
<script>
let canvas = new fabric.Canvas('canvasBox', {
overlayImage: 'https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/27d1b4e5f8824198b6d51a2b1c2d0d75~tplv-k3u1fbpfcp-zoom-crop-mark:400:400:400:400.awebp',
backgroundColor: 'red',
})
let rect = new fabric.Rect({
width: 80,
height: 80,
})
canvas.add(rect)
</script>
这个比如中,本来应该有一个矩形在画布上的,并且背景色也应该是赤色。
但设置了 overlayImage
,所以整个画布都被图片掩盖了。
overlayImage
和 overlayColor
相同,都能够将画布上的一切元素掩盖掉,比如背景图、背景色、图形等元素。
掩盖图画不受视口改换的影响
由于图片是有尺度的,假如你的场景中,画布能够缩放或许被拖拽,就会呈现下图的效果。
掩盖的图片被缩小或许移动后,就露出了背景色(赤色)。
![Fabric.js 运用图片隐瞒画布(远景图) Fabric.js 运用图片隐瞒画布(远景图)](https://www.6hu.cc/storage/2022/12/1671082216-50722a868752293.gif)
假如不期望掩盖图被缩放和平移等操作影响(不受视口改换的影响),能够将 overlayVpt
设为 false
。
![Fabric.js 运用图片隐瞒画布(远景图) Fabric.js 运用图片隐瞒画布(远景图)](https://www.6hu.cc/storage/2022/12/1671082220-e3cf46a9936f5e3.gif)
<canvas id="canvasBox"></canvas>
<script>
let canvas = new fabric.Canvas('canvasBox', {
overlayImage: 'https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/27d1b4e5f8824198b6d51a2b1c2d0d75~tplv-k3u1fbpfcp-zoom-crop-mark:400:400:400:400.awebp',
overlayVpt: false,
backgroundColor: 'red',
})
let rect = new fabric.Rect({
width: 80,
height: 80,
})
canvas.add(rect)
canvas.on('mouse:wheel', opt => {
const delta = opt.e.deltaY
let zoom = canvas.getZoom()
zoom *= 0.999 ** delta
if (zoom > 20) zoom = 20
if (zoom < 0.01) zoom = 0.01
canvas.zoomToPoint(
{
x: opt.e.offsetX,
y: opt.e.offsetY
},
zoom
)
opt.e.preventDefault()
opt.e.stopPropagation()
})
canvas.on('mouse:down', opt => {
let evt = opt.e
canvas.isDragging = true
canvas.lastPosX = evt.clientX
canvas.lastPosY = evt.clientY
})
canvas.on('mouse:move', opt => {
if (canvas.isDragging) {
let evt = opt.e
let vpt = canvas.viewportTransform
vpt[4] += evt.clientX - canvas.lastPosX
vpt[5] += evt.clientY - canvas.lastPosY
canvas.requestRenderAll()
canvas.lastPosX = evt.clientX
canvas.lastPosY = evt.clientY
}
})
canvas.on('mouse:up', opt => {
canvas.setViewportTransform(canvas.viewportTransform)
canvas.isDragging = false
})
</script>
感觉这和 《Fabric.js 确定背景图,不受缩放和拖拽的影响》 里讲到的有点像,对吧~
所以当看到 fabric.js
的相关特点和办法称号里呈现 Vpt
,大概率就和 视口 有关。
更灵敏的操作办法 setOverlayImage
运用 setOverlayImage
支撑更多装备。
setOverlayImage(image, callback, optionsopt)
接纳3个参数
-
image
: 图画实例或许URL
-
callback
: 回调函数(主要是设置完后改写画布)
-
optionsopt
: 这是可选项,不填也没事。填了就能够设置图画的装备。
![Fabric.js 运用图片隐瞒画布(远景图) Fabric.js 运用图片隐瞒画布(远景图)](https://www.6hu.cc/storage/2022/12/1671082223-d4108f2f1fc6be1.png)
canvas.setOverlayImage(
'../../images/bg4.png',
canvas.renderAll.bind(canvas),
{
originX: 'left',
originY: 'top'
}
)
除了设置 originX
和 originY
外,还能够设置 top
、left
、opacity
、angle
等参数。
更多用法能够检查代码库房。
代码库房
⭐overlayImage 和 overlayVpt
⭐setOverlayImage
引荐阅览
《Fabric.js 从入门到_ _ _ _ _ _》
《Fabric.js 操控元素层级》
《Fabric.js 上划线、中划线(删去线)、下划线》
《Fabric.js 激活输入框》
《Fabric.js 输出精简的JSON》
《Fabric.js IText 手动设置斜体》
点赞 + 重视 + 保藏 = 学会了
相关文章
管好微服务,成为云原生时代的新难题。 从建好微服务到管好微服务,差的虽是一个字,...
0
0
27
iOS稳定性训练营开启报名!本期训练营约请火山引擎APMPlus技术专家亲自共享...
0
0
44
小序 写这篇文章原因是昨日看小组校内答辩,突然想到两个队友都是前后端的佬,而我只...
0
0
54
前一段时间,ChatGPT的两大新功用上了Beta测验,其中一个功用是“Brow...
0
0
65