1

以下是我的参考代码。

  1. 一个主要图像显示在 Canvas 上。
  2. 在带有dataJSON对象的图像上，我传递 x 和 y 坐标并在那里绘制球图像。
  3. 然后添加工具提示。（功能工具提示Func）
  4. 但是当我平移图像时，工具提示在悬停时的那些球图像上不可见。**
  5. 在tooltipFunc函数中，如果代码是第一次加载页面时的默认位置。当我们平移图像以显示工具提示时，其他代码用于平移位置。
  6. 但是在平移之后，当鼠标悬停在球图像上时，工具提示不可见。当我单击这些球图像时，工具提示可见但不在平移位置上。

有什么建议么？

//以下是参考代码

var isDown = false;
var startCoords = [];
var last = [0, 0];

    canvas.onmousedown = function(e){
        isDown = true;

        startCoords = [
            e.offsetX - last[0],
            e.offsetY - last[1]
       ];
    };

    canvas.onmouseup  = function(e){
        isDown = false;

        last = [
            e.offsetX - startCoords[0], // set last coordinates
            e.offsetY - startCoords[1]
        ];
        //tooltipFunc(e);   

    };
    canvas.onmousemove = function(e){   
                tooltipFunc(e); //tooltip function
                if(!isDown) return;         
                var x = e.offsetX;              
                var y = e.offsetY;
                context.setTransform(1, 0, 0, 1, x - startCoords[0], y - startCoords[1]);
                draw1(scaleValue);//redrawing image on canvas while panning image                   
        }

    function tooltipFunc(e){    
        var translationX, translationY;
        var r = canvas.getBoundingClientRect(),
                    x = e.clientX - r.left,
                    y = e.clientY - r.top,
                    i = 0,
                    r,
                    inTooltip = false;

        if((typeof startCoords[0] === 'undefined' || startCoords[0] === 'NaN') && (typeof startCoords[1] === 'undefined' || startCoords[1] === 'NaN')){         
                for (; r = dataJSON[i]; i++) {              
                    if (x >= parseInt(dataJSON[i].x[0] * scaleValue) + parseInt(scaleValue) && x <= parseInt(dataJSON[i].x[0] * scaleValue) + parseInt(20/scaleValue) && y >= parseInt(dataJSON[i].y[0] * scaleValue) && y <= parseInt(dataJSON[i].y[0] * scaleValue) + parseInt(20/scaleValue)) {
                        clearTooltip();
                        showTooltip(e.clientX, e.clientY, i);
                        inTooltip = true;
                    }
                }
        }
        else{           
            for (; r = dataJSON[i]; i++) {                  
                translationX = parseInt(x) - parseInt(startCoords[0]);
                translationY = parseInt(y) - parseInt(startCoords[1]);

                    if (x >= parseInt(dataJSON[i].x[0] * scaleValue) + parseInt(translationX) + parseInt(scaleValue) && x <= parseInt(dataJSON[i].x[0] * scaleValue) + parseInt(translationX) + parseInt(20/scaleValue) && y >= parseInt(dataJSON[i].y[0] * scaleValue) + parseInt(translationY) && y <= parseInt(dataJSON[i].y[0] * scaleValue) + parseInt(translationY)  + parseInt(20/scaleValue)) {

                    clearTooltip();             
                    var newX = e.clientX - translationX;
                    var newY = e.clientY - translationY
                    showTooltip(newX, newY, i); 
                    inTooltip = true;

                }

            }
        }
    }
4

0 回答 0