画布工具提示出现在画布之外?

2023-12-26

我使用 KineticJS 和 D3.js 制作了以下内容。我使用 KineticJS 让我在用户将鼠标悬停在其中一个点上时弹出工具提示。但是,由于画布的边界,工具提示看起来被切断。有什么办法可以让它出现而不被剪掉吗?

整个代码本身非常庞大,并且包含很多不相关的内容,所以我发布了相关的片段:

    this.stage = new Kinetic.Stage({
        container: 'canvas',
        width: this.WIDTH,
        height: this.HEIGHT
    });

    this.circlesLayer = new Kinetic.Layer();
    this.tooltipLayer = new Kinetic.Layer();

    this.stage.reset();
    this.stage.clear();

    // Some d3 specific code
    this.xRange.domain([
        d3.min(this.data, function(d) {
        return d.x;
    }), d3.max(this.data, function(d) {
        return d.x;
    })]);

    this.yRange.domain([
        d3.min(this.data, function(d) {
        return d.y;
    }), d3.max(this.data, function(d) {
        return d.y;
    })]);

    var axes_transition = d3.select("#" + this.div).transition().duration(1000).ease("exp-in-out")

    // transition the axes
    axes_transition.select(".x.axis").call(this.xAxis);

    // Drawing the circles
    this.last = this.data.map(this.position);
    this.last.forEach(this.kineticCircle);

    // Setting up the tooltip
    this.tooltip = new Kinetic.Text({
      text: "",
      fontFamily: "Calibri",
      fontSize: 12,
      padding: 5,
      visible: false,
      fill: "black",
      //alpha: 0.75,
      textFill: "white"
    });

    this.tooltipLayer.add(this.tooltip);

    this.stage.add(this.circlesLayer);
    this.stage.add(this.tooltipLayer);

如果不幸的是工具提示是在画布中绘制的,则不会。您当然可以使用 html 创建工具提示或使用画布上的 title 属性。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

画布工具提示出现在画布之外? 的相关文章