Javascript-форум - Эффект Лупа на JavaScript

Javascript-форум (https://javascript.ru/forum/)

- Ваши сайты и скрипты (https://javascript.ru/forum/project/)

- - Эффект Лупа на JavaScript (https://javascript.ru/forum/project/3668-ehffekt-lupa-na-javascript.html)

Эффект Лупа на JavaScript

Помогите:help: переделать работающий скрипт прямоугольной лупы, на круглую.

<html>
<head>
<title>Увеличительное стекло</title>

<script type="text/javascript">

document.onmousemove = handlerMM;

function handlerMM(e)
{
var dx = 0;
var dy = 0;
var fact = 2;
var opp = 70;

var x = (e)?e.pageX:event.x;
var y = (e)?e.pageY:event.y;

dx = (e)?0:window.document.body.scrollLeft;
dy = (e)?0:window.document.body.scrollTop;

var x1 = (x + dx) * fact; // левая край
var y1 = (y + dy) * fact; // верхний край
var x2 = 2 * opp + (x + dx) * fact; // правый край
var y2 = 2 * opp + (y + dy) * fact; // нижний край

document.getElementById("glass").style.left = (x + dx) * (1 - fact);
document.getElementById("glass").style.top = (y + dy) * (1 - fact);
document.getElementById("glass").style.clip = "rect(" +y1 +"px," +x2 +"px," +y2 +"px,"+x1 +"px)";

}

</script>
</head>

<body>
<h5>Увеличительное стекло</h5>

<img id="pic" src="Forest Flowers.jpg" galleryimg = "no" width=320 style="position: absolute; top: 40px; left: 10px; border-style: none">


<img id="glass" src="Forest Flowers.jpg" width=640 style="position: absolute; top: 40px; left: 10px; clip: rect(10px, 100px, 100px, 10px); border-style: none;">


<img src="Forest Flowers.jpg" width="320" height="240" style="position: absolute; top: 330px; left: 10px; border-style: none;">

</body>
</html>

Очень надо, сроки поджимают.

модифицировать этот скрипт не представляется возможным
style.clip позволяет рисовать только прямоугольники

идей, как можно реализовать в обход - нету

Идея проста: делай картинку с прозрачной круглой областью :)

Ну может чем-то заменить, я весь интернет облазил, ничего не нашел. А сделать как-то надо.

Это как картинку с прозрачной круглой областью?

Цитата:

Сообщение от ZoNT

Идея проста: делай картинку с прозрачной круглой областью

покажи пример.
я сколько не ломал голову, не придумал, как сделать, чтобы внутри круглой области показывалась увеличенная картинку, а вокруг нее показывался рисунок с поднизу

как я понимаю, нужно всего лишь поверх glass поместить картинку с прозрачной круглой областью

Только это прямоугольник, я это сделал, а вот круг не получается(((

Цитата:

Сообщение от x-yuri (Сообщение 18822)

как я понимаю, нужно всего лишь поверх glass поместить картинку с прозрачной круглой областью

Ну сделать круглую лупу, чтобы под ней увеличивалось изображение.

да, похоже, с помощью javascript тут не сделаешь
flash?

Через SVG (VML для IE) создать круг или маску в виде круга для блока, его фон будет отображать увеличеное изображение с необходимым смещением background-position.

есть способ для картинок. картнка состоит какбы из мазайки
<div><img /></div>
<div> <img /> </div>
<div> <img /> </div>
<div><img /></div>

длина каждого div определяется по формуле круга. у каринки делается необходимый zoom (размеры) и позиционируется она абсолютно относительна своего дива. у дива overflow:hidden, он обрезает все лишнее

Мда, тут всё немного сложнее придётся действительно извращаться с кучей дивов и динамически ставить им бэк как на уменьшенной картинке...
Идея такая: на текущую (квадратную) лупу накладываем сверху дивы, которые распологаются так:
_______________
|-----****-----|
|--*********--|
|-***********-|
|*************|
|-***********-|
|--*********--|
|-----****-----|
Звёздочки - "пустое" пространство, то есть не закрытое дивами, через него проглядывает уеличенное изображение.
Только вот много диво получится и много фонов придётся смещать...

В прикрепленном файле пример круглой SVG-маски для изображения. Для изменения положения большого изображения нужно переместить абсолютно позиционированный <object> и внутри SVG для объекта <image> изменить transform="translate(…, …)". Как работать с SVG в JavaScript можно посмотреть, например, здесь. Для VML не намного сложнее.