时间戳

首页 > 解决方案 > 不明白为什么 Konva 文字不隐藏

html - 不明白为什么 Konva 文字不隐藏

问题描述

我想Konva.text在拖动矩形时隐藏并显示一个 -> 显示文本并拖动结束隐藏文本，但我不明白为什么当我拖动结束时Konva.text不隐藏。

var stage = new Konva.Stage({ container: 'container', width: 400, height: 250 });
var layer2 = new Konva.Layer(); var groupe = new Konva.Group({})

var lineV = new Konva.Rect({ x: 50, y: 50, width: 70, height: 50, draggable: true, stroke: 'black'}); groupe.add(lineV)

var info = new Konva.Text({
    text: 'info', 
    visible: false,
    stroke: '#fff', fontSize: 35, fontFamily: 'Calibri', fill: '#000',  align: 'center', name: "infoBulle"});
    layer2.add(info);

    groupe.on('dragstart', function () {
        console.log("drag")
        info.visible(true);
    });
      
    groupe.on('dragend', function () {
        console.log("drop");
        info.visible(false)
        console.log(info.isVisible());
    });

    stage.add(layer2.add(groupe))
    stage.draw();
<script src="https://unpkg.com/konva@2.4.2/konva.min.js"></script>
<div id="container" width="400" height="250" style="border: 2px solid red;"></div>

标签： htmlkonvajs

解决方案

每次更新图层时都需要重新绘制图层。第一次显示文本更新是可见的，因为 Konva 会在dragmove操作时自动更新图层。

var stage = new Konva.Stage({ container: 'container', width: 400, height: 250 });
var layer2 = new Konva.Layer(); var groupe = new Konva.Group({})

var lineV = new Konva.Rect({ x: 50, y: 50, width: 70, height: 50, draggable: true, stroke: 'black'}); groupe.add(lineV)

var info = new Konva.Text({
    text: 'info', 
    visible: false,
    stroke: '#fff', fontSize: 35, fontFamily: 'Calibri', fill: '#000',  align: 'center', name: "infoBulle"});
    layer2.add(info);

    groupe.on('dragstart', function () {
        console.log("drag")
        info.visible(true);
        layer2.batchDraw();
    });
      
    groupe.on('dragend', function () {
        console.log("drop");
        info.visible(false)
        layer2.batchDraw();
        console.log(info.isVisible());
    });

    stage.add(layer2.add(groupe))
    stage.draw();
<script src="https://unpkg.com/konva@2.4.2/konva.min.js"></script>
<div id="container" width="400" height="250" style="border: 2px solid red;"></div>

推荐阅读