问题描述
我正在使用konva.js。我有一个舞台,里面有一个形象。但是,当我调整舞台大小时,图像将被裁剪,并且看不到完整图像。有没有一种方法可以拉伸图像以使其适合舞台内部并仍然获得完整图像。
<template>
<div class="konvaContainer">
<v-stage :config="stageConfig" >
<v-layer>
<v-image :config="imageConfig1"/>
</v-layer>
</v-stage>
</div>
</template>
export default {
components: {
Loading},data: () => ({
stageConfig: {width: 200,height:150 },imageConfig: {},scaleValue:1
})}
我们还可以将新值设置为scaleValue还是用新值替换scaleValue的值?
解决方法
您可以将图像的大小设置为与舞台相同的大小。
<template>
<div class="container">
<v-stage ref="stage" :config="stageSize">
<v-layer>
<v-image
:config="{
x: 0,y: 0,width: stageSize.width,height: stageSize.height,image: image,}"
/>
</v-layer>
</v-stage>
</div>
</template>
<style>
.container {
width: 100vw;
height: 100vh;
}
</style>
<script>
export default {
data() {
return {
stageSize: {
width: 10,height: 10,},image: null,};
},mounted() {
// setup resize
const container = document.querySelector(".container");
const observer = new ResizeObserver(() => {
this.stageSize.width = container.offsetWidth;
this.stageSize.height = container.offsetHeight;
});
observer.observe(container);
// load image
const img = document.createElement("img");
img.src = "https://i.imgur.com/ktWThtZ.png";
img.onload = () => {
this.image = img;
};
},};
</script>
演示:https://codesandbox.io/s/vue-konva-stretch-image-to-stage-size-7ql7l?file=/src/App.vue