Я хочу нарисовать линии на изображении с помощью CSS3, желательно на холст HTML5. Я нашел этот учебник и эту демонстрацию, которая использует HTML DIV:Рисовать линии с CSS над изображением - отзывчивое поведение
http://www.monkeyandcrow.com/samples/css_lines/
Однако, когда я пытаюсь сделать эффект на изображении, линия находится вне изображения.
Как я могу получить линию, которая будет нарисована непосредственно над изображением?
Также мне нужна ширина линии, чтобы быть отзывчивой, т. Е. Если я снова масштабирую окно браузера, изображение будет повторно масштабировано (это я смог с помощью Javascript, изменяя размер изображения динамически), и я потребуется также ширина пикселя изображения для повторного масштабирования.
Должен ли я отказаться и использовать Canvas HTML5 вместо этого? Что относительно совместимости с браузером?
Полный код здесь:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Lines with CSS</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>
<style>
div.line{
-webkit-transform-origin: 0 50%;
-moz-transform-origin: 0 50%;
transform-origin: 0 50%;
height: 5px; /* Line width of 3 */
background: #948C79; /* Black fill */
opacity: 0.5;
box-shadow: 0 0 8px #B99B7E;
/* For some nice animation on the rotates: */
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
transition: transform 1s;
}
div.line:hover{
background: #C30;
box-shadow: 0 0 8px #C30;
opacity: 1;
}
div.line.active{
background: #666;
box-shadow: 0 0 8px #666;
opacity: 1;
}
</style>
<script>
function createLine(x1,y1, x2,y2){
var length = Math.sqrt((x1-x2)*(x1-x2) + (y1-y2)*(y1-y2));
var angle = Math.atan2(y2 - y1, x2 - x1) * 180/Math.PI;
var transform = 'rotate('+angle+'deg)';
var line = $('<div>')
.appendTo('#page')
.addClass('line')
.css({
'position': 'relative',
'transform': transform
})
.width(length)
.offset({left: x1, top: y1});
return line;
} // function
</script>
</head>
<body>
<p>Lines with CSS</p>
<input type="button" value="Draw line" onClick="createLine(0,0,20,20);" />
<div id="page" style="height:auto;"><p><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/Man_o%27war_cove_near_lulworth_dorset_arp.jpg/300px-Man_o%27war_cove_near_lulworth_dorset_arp.jpg" class="fotografia" /></p></div>
</body>
jsfiddle является: https://jsfiddle.net/30xh1xpm/ (обратите внимание, что он не может даже нарисовать линию).
__Did__ вы пытаетесь? Вы сказали, что сделали. Как мы можем знать? Сделайте пример своих усилий и разместите его здесь. (и в jsfiddle.net или codepen.io или тому подобное) – HerrSerker
Я включил исходный код, который адаптирован из демонстрации. Я сделал jsfiddle, но он даже не рисует линию. В моем браузере, с исходным кодом, сохраненным в html-файле, он рисует линию, но снаружи (ниже) изображения. – Cesar
В скрипке вы не включили jQuery, и вы попытались вызвать функцию onload, а не кнопку. Я исправил его, и теперь он работает. https://jsfiddle.net/MrLister/30xh1xpm/1/ И я говорю, что он работает, но он рисует линию в верхнем левом углу над изображением. –