PHP - позиционировать абсолютные элементы в PDF (или изображение) - PullRequest
Новая
       19

PHP - позиционировать абсолютные элементы в PDF (или изображение)

0 голосов
/ 02 января 2019

Я работаю над "генератором трубопровода", и когда это будет сделано, его детали должны быть отправлены в PDF-файл.Каждый компонент добавляется в конце другого, а также некоторые меры добавляются в «рисование».Основные элементы имеют абсолютную позицию, но некоторые ссылки (метки) являются относительными.Я не могу напечатать его в своем PDF-файле.

Я также попытался создать библиотеку JS для создания изображения (поэтому я могу использовать его), но в нем также есть много ошибок.Я обнаружил, что почти библиотеки HTMLtoPDF в PHP не поддерживают абсолютную позицию. 

<div class="wrap">
    <div class="surface active infinite"  style="width: 398.6px; height: 159.4px;">
        <div class="pipesline" id="line_1" style="top: 0px; left: 0px;">
            <div class="measure measureX" data-measure="1293 mm" style="top: 59.4px; left: 0px; width: 258.6px;"></div>
            <div class="measure measureY" data-measure="291 mm" style="top: 0px; left: 298.6px; height: 19.4px;"></div>
            <div class="component straight" style=" top:0px;left:0px;width:43.2px;height:19.4px;background-image: url    ('https://image.flaticon.com/icons/svg/162/162416.svg');">
                <div class="legend">BFx5<br>(M1)</div>
                <div class="switch opo">0</div>
            </div>
            <div class="component straight" style=" top:0px;left:43.2px;width:86.2px;height:19.4px;background-image: url    ('https://image.flaticon.com/icons/svg/162/162416.svg');">
                <div class="legend">BFx10<br>(M2)</div>
                <div class="switch">1</div>
            </div>
            <div class="component straight" style=" top:0px;left:129.4px;width:129.2px;height:19.4px;background-image:     url('https://image.flaticon.com/icons/svg/162/162416.svg');">
                <div class="legend">BFx15<br>(M3)</div>
                <div class="switch">1</div>
            </div>
        </div>
    </div>
</div>

(В этих стилях он заменяет локальные изображения для некоторых, которые я нашел в Интернете) 

<style type="text/css">
.wrap {
    width: max-content;
    height: max-content

}
.surface {
    position: relative;
    margin: 100px;
    overflow: visible;
}
.pipesline {
    position: absolute;
    width: 0;
    height: 0
}
.pipesline .measure {
    position: absolute;
    display: inline;
}
.pipesline .measure::before {
    font-size: 12px;
    text-align: center;
    display: inline-block;
    width: 100%;
    height: 20px
}
.pipesline .measure::before {
    font-size: 11px;
    display: block;
    content: attr(data-measure);
    white-space: nowrap
}
.pipesline .measure.measureX {
    height: 16px;
    background: url('http://1x1px.me/FF4D00-0.8.png') repeat-x 0 4px, url('http://1x1px.me/FF4D00-0.8.png') repeat-y top             left, url('http://1x1px.me/FF4D00-0.8.png') repeat-y top right;
    text-align: center;
    padding-top: 6px
}
.pipesline .measure.measureX::before {
    width: 100%
}
.pipesline .measure.measureY {
    width: 16px;
    background: url('http://1x1px.me/FF4D00-0.8.png') repeat-x top, url('http://1x1px.me/FF4D00-0.8.png') repeat-y 3px,              url('http://1x1px.me/FF4D00-0.8.png') repeat-x bottom
}
.pipesline .measure.measureY::before {
    height: 100%;
    transform: translateY(50%) rotate(-90deg);
    transform-origin: top right
}
.pipesline .component {
    position: absolute;
    background-size: contain;
    background-repeat: repeat-x;
    border: 0;
    top: 0;
    left: 0;
    padding: 0
}
.pipesline .component .legend {
    width: 100%;
    text-align: center;
    position: absolute;
    top: 113%;
    left: 0;
    font-size: 9px;
    display: inline
}
.pipesline .component .switch {
    text-align: center;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 190%;
    font-size: 9px;
    height: 30px;
    background: url('https://www.svgrepo.com/show/240066/turn-off-switch.svg') no-repeat;
    background-size: 20px 20px;
    background-position: bottom center
}
.pipesline .component .switch.opo {
    transform: rotate(-180deg);
    transform-origin: middle center;
}
</style>

Любое предложение?

...