帆布工具提示出现外印刷品吗?(Canvas tooltip to appear outside ca

2019-07-31 04:01发布

我做了使用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);

Answer 1:

若该提示在画布上绘制不幸。 当然,你可以创建HTML工具提示或使用title属性在画布上代替。



文章来源: Canvas tooltip to appear outside canvas?