Question

我有一个函数，用于在div（在this solution中进行修改）内划一条线，该线用于电子学习模块中（解释了代码的怪异部分）。

我的问题是它似乎在IE11中不起作用。

这是代码：

var player = GetPlayer();
var progress = player.GetVar("score");
var h = 600; //the height of your slide, as set in Story Size
var w = 1000; //the width of your slide, as set in Story Size
var t = 4; //the desired thickness of the progress bar in px, as based on the size of the styry slide
var c = "#00cc3399"; //the desired color of the progress bar, in hex. The last 2 digits are opacity. See codes below:
var startY = 40; //the desired start coordinate, from the top of the page
var startX = 0; //the desired start coordinate, from the left side of the page. Set to "0" as standard


var aspectRatio = h/w;
var totalW = $('.slide-container').width(); //get the actual width of the slide. only relevant if storyline is set to "Scale to fill browser window"
var totalH = totalW*aspectRatio; //calculate the actual height of the slide. only relevant if storyline is set to "Scale to fill browser window"
console.log("totalW: " + totalW); 
var wFactor = totalW/w; //used to calculate the x-position on the slide. only relevant if storyline is set to "Scale to fill browser window"
var hFactor = totalH/h //used to calculate the y-position on the slide. only relevant if storyline is set to "Scale to fill browser window"

var endPointX = totalW*progress/100; //calculate the length of the progress bar
var endPointY = startY*hFactor; //calculate y-position, based on where you want it to be on the slide. The number is the position on the slide, as seen from the top. This is based on a horizontal progress bar
console.log("endPointX: " + endPointX + ", endPointY: " + endPointY)
x1 = startX, y1 = startY, //Start of the bar
x2 = endPointX, y2 = endPointY; //end of the bar

drawline(x1, y1, x2, y2);

//all the technical stuff:
function drawline(ax, ay, bx, by) {
    console.log('ax: ' + ax);
    console.log('ay: ' + ay);
    console.log('bx: ' + bx);
    console.log('by: ' + by);


    if (ax > bx) {
        bx = ax + bx;
        ax = bx - ax;
        bx = bx - ax;
        by = ay + by;
        ay = by - ay;
        by = by - ay;
    }
    console.log('by: ' + by);

    var angle = Math.atan((ay - by) / (bx - ax));

    angle = (angle * 180 / Math.PI);
    angle = -angle;
    var length = Math.sqrt((ax - bx) * (ax - bx) + (ay - by) * (ay - by));
    console.log('length: ' + length);

    var style = ""
    style += "left:" + (ax) + "px;"
    style += "top:" + (ay) + "px;"
    style += "width:" + length + "px;"
    style += "height:"+t*hFactor+"px;" //set the thickness of the progress bar
     style += "background-color:"+c+";"
     style += "position:absolute;"
     style += "transform:rotate(" + angle + "deg);"
     style += "-ms-transform:rotate(" + angle + "deg);"
     style += "transform-origin:0% 0%;"
     style += "-moz-transform:rotate(" + angle + "deg);"
     style += "-moz-transform-origin:0% 0%;"
     style += "-webkit-transform:rotate(" + angle + "deg);"
     style += "-webkit-transform-origin:0% 0%;"
     style += "-o-transform:rotate(" + angle + "deg);"
     style += "-o-transform-origin:0% 0%;"
     style += "z-index:99;"
     $("<div id='progressBar' style='" + style + "'></div>").appendTo('.slide-container');
 };

在chrome中，此功能根据用户的分数绘制一条线。在IE中什么也没发生。

Answer 1

我自己找到了解决方案。事实证明，IE将8位十六进制值重新定义为RGBa，并将其变为白色。用相应的RGBa值替换8位数的HEX值即可。

如何使绘图线在Internet Explorer中工作？

1 个答案: