Question

我正在制作一个电子应用，我在div元素中滚动，我在这个div中有两种类型的元素（都有position: absolute）：

Objects（div）
线条（画布）

这个想法是你可以放置对象并用线条连接它们，但是出于某些奇怪的原因，当我用改变任何时
let ctx = document.getElementById(this.id).getContext("2d");
变量，对象元素突然看起来像position: fixed，甚至认为他们没有它的行为很好，而且，唯一奇怪的是它没有被渲染到应有的位置，有时候当我进一步滚动时会消失。

我很确定这不是我的代码中的错误，因为chrome-dev-tools在它应该出现的地方显示了一个命中框。

当我在普通浏览器中打开它时，它变得更加怪异，例如谷歌Chrome（像电子一样在Chromium上构建），它运行正常。
有谁知道问题是什么？，也许在主要过程中？

编辑：

如果做了更多的研究，我发现了以下内容：

仅当（至少）其中一个对象超出自然观察端口时才会发生故障（mainDiv.scrollTop = 0; and mainDiv.scrollLeft = 0;，然后你可以看到）
点击框工作且位于正确的空间，只有渲染很奇怪。

HTML：

lineobject：<canvas class='contentFrame_line' id='/*lineId*/'></canvas>

CSS：

.contentFrame_line { position: absolute; z-index: -1; }

CODE：（所有这些代码都在自定义＆＃39;行＆＃39; -type对象中）

this.update = function() {
    //get the 'Objects', (CF.getObjectById gives the custom Object by it's Id)
    let fromObject = CF.getObjectById(this.fromObjectId);
    let toObject = CF.getObjectById(this.toObjectId);


    // calculate the fromX, fromY, toX and toY 
    let fromX = fromObject.x;
    let fromY = fromObject.y;
    let toX = toObject.x;
    let toY = toObject.y;


    //calculate the minX, minY, maxX and maxY
    let minX = Math.min(fromX, toX);
    let minY = Math.min(fromY, toY);
    let maxX = Math.max(fromX, toX);
    let maxY = Math.max(fromY, toY);


    //set the canvas width, height, resolution and position
    let width = maxX - minX;
    let height = maxY - minY;

    this.html = document.getElementById(this.id);
    this.html.style.width = width + "px";
    this.html.style.height = height + "px";
    this.html.width = width;
    this.html.height = height;

    this.html.style.left = minX + "px";
    this.html.style.top = minY + "px";

    //draw the line on the canvas
    this.draw(fromX - minX, fromY - minY, toX - minX, toY - minY);
}

this.draw = function(fromX, fromY, toX, toY) {
    this.html = document.getElementById(this.id);
    this.ctx = this.html.getContext("2d");

    this.ctx.beginPath();

    this.ctx.moveTo(this.html.width / 2, 0);
    this.ctx.lineTo(this.html.width / 2, this.html.height);

    this.ctx.stroke();
}

电子渲染故障

0 个答案: