根据xml属性为图像创建div叠加

Question

我想创建一个div叠加层，设置为5％不透明度，这会在此图像的每个文本行周围创建一个对角线边框。我有绘制边界框所需的四个点中的每个点的坐标，它们被编码为XML元素中的属性，其中包含单个行的文本作为其数据。在我看来，因为我有四个角的x，y坐标，我应该能够创建叠加 - 但我无法弄清楚标记div的正确语法是什么。有人向我建议使用CSS的转换函数（这是我最初设置这个问题时的正确调用）但听起来我基本上写了八个单独的css片段，每行一个 - 这可能会得到凌乱，因为有可能有118张这样的图片，我会为CSS编写自定义的CSS。

我认为这可以通过编程方式完成，我是错误的，如果没有，有人可以指点我这样做吗？

Answer 1

是的，可以使用简单的html标记this way：

<div class="image_box" data-cords="20,50,210,50,50,250,240,250">I am the text inside the div, I can be in several lines. It is important for text stay vertical and it is important the text to follow boundary box.</div>

比做一些剧本魔术：

$.fn.skewText = function () {
    return this.each(function (i) {
        var thisText = $(this);
        var coords = thisText.data('cords').split(',');
        /* Calculate degree */
        var deg = Math.tan((coords[5] - coords[1]) / (coords[4] - coords[0])) * 57.2957795;
        /* Skew pixels for calculations */
        var skewVal = coords[4] - coords[0];
        /* Calculate position */
        var cssWidth = (coords[2] - coords[0] - skewVal) + 'px';
        var cssHeight = (coords[5] - coords[1]) + 'px';
        var cssTop = coords[1] + 'px';
        var cssLeft = (coords[0] * 1 + skewVal) + 'px'; /* Add a half of skew */
        /* Wrapp and apply styles */
        thisText.wrapInner('<div class="skew_padding" />').wrapInner('<div class="skew_text" />');
        var skewText = thisText.find('.skew_text');
        skewText.css({
            'transform': 'skew(' + deg + 'deg)',
                'top': cssTop,
                'left': cssLeft,
                'width': cssWidth,
                'height': cssHeight,
                'background': 'none rgba(0,0,0,.5)'
        });
        /* Now skew back each letter inside */
        var skewPadding = skewText.find('.skew_padding');
        var letters = skewPadding.text().split(' ');
        var newText = '<span>' + letters.join('</span> <span>') + '</span>';
        skewPadding.html(newText);
        skewPadding.find('span').css({
            'display': 'inline-block',
                'transform': 'skew(' + (-deg) + 'deg)'
        });
    });
};
$('[data-cords]').skewText();

这可以用这个css：

.image_box {
    position: relative;
    width: 300px;
    height: 300px;
    background: yellow;
}
.skew_text {
    position: absolute;
}
.skew_padding {
    padding: 10px;
}