Val*_*ado 3 javascript text konvajs
我有一个带有一些矩形的项目，我需要在其中放入文本。是否有一个 Konva 类可以做到这一点？我曾尝试使用 Konva.group()，标签 ...
这是我的最后一次尝试，一开始文本保持原样，但是在移动 Rect 时，位置没有更新。
var rect = new Konva.Rect({
x: 20,
y: 60,
stroke: '#123456',
strokeWidth: 5,
fill: '#ddd',
width: 600,
height: 450,
shadowColor: 'black',
shadowBlur: 10,
shadowOffset: [10, 10],
shadowOpacity: 0.2,
cornerRadius: 10,
draggable: true,
})
var complexText = new Konva.Text({
x: ((rect.attrs.width + rect.attrs.x) - 300)/2 ,
y: ((rect.attrs.height + rect.attrs.y))/2,
text:
"COMPLEX TEXT\n\nAll the world's a stage, and all the men and women merely players. They have their exits and their entrances.",
fontSize: 18,
fontFamily: 'Calibri',
fill: '#555',
width: 300,
height:300,
align: 'center',
draggable: true,
});
小智 6
var width = window.innerWidth;
var height = window.innerHeight;
var stage = new Konva.Stage({
container: 'container',
width: width,
height: height,
draggable: true
});
var rectangleLayer = new Konva.Layer();
function spawnRectangle(angle){
var rectangle = new Konva.Group({
x: 25,
y: 25,
width: 130,
height: 25,
rotation: angle,
draggable: true,
});
rectangle.add(new Konva.Rect({
width: 130,
height: 25,
fill: 'lightblue'
}));
rectangle.add(new Konva.Text({
text:'123',
fontSize: 18,
fontFamily: 'Calibri',
fill: '#000',
width: 130,
padding: 5,
align: 'center'
}));
rectangleLayer.add(rectangle);
stage.add(rectangleLayer);
}body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #D3D3D3;
background-size: cover;
}
#desc {
position : absolute;
top: 5px;
left: 5px;
}<script src="https://unpkg.com/konva@4.0.18/konva.min.js"></script>
<body>
<div id="container"></div>
<div id="desc">
<button onclick="spawnRectangle(0)">spawn rectangle</button>
<button onclick="spawnRectangle(90)">spawn rotated rectangle</button>
</div>
</body>| 归档时间： |
|
| 查看次数： |
4043 次 |
| 最近记录： |