强制更新

获取Konva最新的信息

Konva.Transformer 会自动追踪被附加的节点属性,因此会自动根据属性的变化适配尺寸。

但是有些情况例外。Konva.Transformer 目前不能追踪 Konva.Group 内的变化。此时你应该使用 forceUpdate 重置变换工具尺寸。

说明:点击按钮,查看变换工具的变化。

Transformer Force Update Demoview raw
<!DOCTYPE html>
<html>
<head>
<!-- USE DEVELOPMENT VERSION -->
<script src="https://unpkg.com/konva@4.0.18/konva.min.js"></script>
<meta charset="utf-8" />
<title>Konva Transform Events Demo</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f0f0f0;
}

#button {
position: absolute;
top: 5px;
left: 10px;
}
</style>
</head>

<body>
<div id="container"></div>
<input type="button" id="button" value="Add random shape" />
<script>
var width = window.innerWidth;
var height = window.innerHeight;

var stage = new Konva.Stage({
container: 'container',
width: width,
height: height
});

var layer = new Konva.Layer();
stage.add(layer);

var group = new Konva.Group({
x: 50,
y: 50,
draggable: true
});
layer.add(group);

// create new transformer
var tr = new Konva.Transformer();
layer.add(tr);
tr.attachTo(group);
layer.draw();

document.getElementById('button').addEventListener('click', addShape);
addShape();

function addShape() {
group.add(
new Konva.Circle({
x: Math.random() * 100,
y: Math.random() * 100,
radius: Math.random() * 100,
fill: Konva.Util.getRandomColor(),
stroke: 'black',
strokeWidth: Math.random() * 10
})
);
// force update manually
tr.forceUpdate();
layer.draw();
}
</script>
</body>
</html>