Question

我有一个像http://weburl/mine/dot.html?gid=4&x=266y=647&x=191y=355&x=100y=893

这样的网址

来自上述网址。我需要通过x和y值在屏幕上绘制点。

根据上面的例子，有3个这样的值。

x=266y=647
x=191y=355
x=100y=893

这个问题分为两部分：

1。）我如何打破URL中的值并将其放入数组以构建图像。（由于上述网址中的x有多个值）

2.。）我如何在图像上绘制点。 fiddle added.

注意：以下是点的CSS。

                position: 'absolute',
                top: ev.pageY + 'px',
                left: ev.pageX + 'px',
                width: '10px',
                height: '10px',
                background: '#000000'

Answer 1

1）

// for str use window.location.search.replace("?", "");
var str = 'gid=4&x=266y=647&x=191y=355&x=100y=893';
var data = str.match(/(x|y)=(\d+)/g), pointsX = [], pointsY = [];
for(var i = 0; i < data.length; i++)
{
    var tmp = data[i].split('=');
    if (tmp[0] == 'x')
        pointsX.push(tmp[1]);
    else
        pointsY.push(tmp[1]);
}

2）在图像上方放置背景或边框的div或使用html5 + canvas http://jsfiddle.net/dh0swt43/

var str = 'gid=4&x=20y=30&x=40y=50&x=100y=100';
var data = str.match(/(x|y)=(\d+)/g), pointsX = [], pointsY = [];
for(var i = 0; i < data.length; i++)
{
    var tmp = data[i].split('=');
    if (tmp[0] == 'x')
        pointsX.push(tmp[1]);
    else
        pointsY.push(tmp[1]);
}
for(var i = 0; i < pointsX.length; i++)
{
    var div = document.createElement('div');
    div.className = 'dot';
    div.style.left = pointsX[i] + 'px';
    div.style.top = pointsY[i] + 'px';
    document.getElementById('wrapper').appendChild(div);
}

.dot {
    height: 2px;
    width: 2px;
    position: absolute;
    border: 2px solid red;
    z-index: 10;
}

<div style='position:relative' id='wrapper'>
    <img src='http://bestclipartblog.com/clipart-pics/earth-clip-art-3.jpg'>
</div>

为图像添加点 - 初学者

1 个答案: