在画布中定位输入框,x和y会神奇地改变

时间:2016-07-20 16:28:48

标签: javascript html5 canvas html5-canvas createjs

因此,我的文本框出现在网络版的正确位置。

一旦我下载scorm软件包并上传到lms并启动文本框出现在一个新的位置并且看起来很糟糕。两个地方都有相同的代码。

我该如何解决这个问题?

var textBoxInput = document.createElement("input");
        textBoxInput.id = "textBoxInput";
        textBoxInput.type = "text";
        textBoxInput.style.width = "270px";
        textBoxInput.style.font = "14pt Arial";
        textBoxInput.style.padding = "10px";
        textBoxInput.style.height = "8px";

        self.stage.canvas.parentElement.insertBefore(textBoxInput, canvas);
        var textBoxInputControl = new createjs.DOMElement(textBoxInput);
        textBoxInputControl.x = 10;
        textBoxInputControl.y = bounds.height - 55;

在此调整此位置。

 function setInputPosition() {
        if (views.questionContainer) {
            var bounds = views.questionContainer.getBounds();
            var difx = views.questionContainer.x - ((views.questionContainer.x + self.stage.canvas.parentElement.offsetLeft) * self.stage.canvas.clientWidth / 800)
            var dify = views.questionContainer.y - views.textBoxInputControl.oHeight - ((views.questionContainer.y) * self.stage.canvas.clientHeight / 600)


            views.textBoxInputControl.x = 0 - difx;
            views.textBoxInputControl.y = ((bounds.height) * self.stage.canvas.clientHeight / 600) - 80 - dify;
            views.textBoxInputControl.width = (bounds.width - 116) * canvas.clientHeight / 600
            //$("#textBoxInput").css('font-size', (16 * (self.stage.canvas.clientHeight / 600)) - 2);
            //var wtfHeight = (16 * (self.stage.canvas.clientHeight / 600) + 2);
            //$('#textBoxInput').height(wtfHeight);
            //$('#textBoxInput').innerHeight(wtfHeight);
            //views.textBoxInputControl.height = wtfHeight;
            //views.textBoxInputControl.oHeight = wtfHeight;
            //views.textBoxInputControl.setBounds(views.textBoxInputControl.x, views.textBoxInputControl.y, views.textBoxInputControl.width, views.textBoxInputControl.height);
            //views.textBoxInputControl.htmlElement.height = wtfHeight;

            views.textBoxInput.style.height = views.textBoxInputControl.height + "px";
            views.textBoxInput.style.width = views.textBoxInputControl.width + "px";
        }
    }

Good web version

Bad once launched in new window as SCORM package from blackboard LMS

0 个答案:

没有答案