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

Posted 2023-03-05

【中文标题】画布工具提示出现在画布之外？

【英文标题】：Canvas tooltip to appear outside canvas?

【发布时间】：2012-08-19 08:41:06

【问题描述】：

我使用 KineticJS 和 D3.js 制作了以下内容。当用户将鼠标悬停在其中一个点上时，我使用 KineticJS 让我弹出工具提示。但是，由于画布的边界，工具提示似乎被截断。有没有办法让它在不被剪裁的情况下显示出来？

整个代码本身非常庞大，包含很多不相关的东西，所以我发布了相关的 sn-ps：

    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);

【问题讨论】：

当然不能在画布元素之外绘制

请问您为什么同时使用 KineticJS 和 d3.js？它们不是都是可视化功能，而是面向不同的应用程序吗？

@AndrewMao：是的。但是，如果要渲染的图形元素数量超过 2000 个（例如 svg 圆圈），d3.js 就会开始出现问题。这就是 KineticJS 发挥作用的地方。我能够成功渲染超过 100K 的圆圈而没有任何问题。我可以直接使用 KineticJS，但是 d3 提供了很多很酷的数据操作功能。

您能进一步澄清一下吗？您是否使用 d3 来操作/定义数据并使用 KineticJS 来绘制它？如果是这样，是否有将两者联系在一起的库，或者您自己制作的东西？我在这里发布了一个类似的问题，也许你可以帮忙：***.com/questions/12310024/…

【参考方案1】：

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

【讨论】：

+1 谢谢！我只是通过增加画布的大小来解决。您能否详细说明如何使用画布的标题属性来解决这个问题？你的意思是说我需要为所有圈子使用title属性？

是的，所有圈子都使用canvas元素的title属性。当您在画布中滚动一个圆圈时，您设置了标题属性（例如使用 jQuery 的 .attr() ），当您滚动时删除它（例如使用 jQuery 的 .removeAttr() ）。它不是最佳的（你不能设置它的样式等），但它可以工作。