Я попытался перенести программу Javascript для лупы через код Transcrypt в Python. К сожалению, я не могу избавиться от рамки лупы, которая полностью перекрывает полное изображение. Исходный код находился здесь: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_image_zoom
Код Python, который я сделал из него:
class Magnifier():
def __init__(self):
self.img = document.getElementById("myimage")
self.saved_src = self.img.src
print(self.saved_src)
self.resultat = document.getElementById("myresult");
# create lens:
self.lens = document.createElement("DIV");
self.lens.setAttribute("class", "img-zoom-lens");
# insert lens:
self.img.parentElement.insertBefore(self.lens, self.img);
# calculate the ratio between result DIV and lens:
self.cx = self.resultat.offsetWidth / self.lens.offsetWidth;
self.cy = self.resultat.offsetHeight / self.lens.offsetHeight;
# set background properties for the result DIV:
self.resultat.style.backgroundImage = "url('" + self.img.src + "')";
self.resultat.style.backgroundSize = (self.img.width * self.cx) + "px " + (self.img.height * self.cy) + "px";
# execute a function when someone moves the cursor over the image, or the lens:
window.addEventListener("mousemove", self.moveLens);
self.img.addEventListener("mousemove", self.moveLens);
# and also for touch screens:
self.lens.addEventListener("touchmove", self.moveLens);
self.img.addEventListener("touchmove", self.moveLens);
console.log("run")
self.counter = 0
def moveLens(self, e):
# console.log("moveLens")
self.img.src = self.saved_src + "?" + __new__(Date().getTime())
if (not e): e = window.event # only for IE which has window.event
a = self.img.getBoundingClientRect();
# e.preventDefault()
# get the cursor's x and y positions:
# calculate the cursor's x and y coordinates, relative to the image:
x = e.pageX - a.left;
y = e.pageY - a.top;
# print (a, e.pageX, e.pageY)
# consider any page scrolling:
x = x - window.pageXOffset;
y = y - window.pageYOffset;
# print (x, y)
# calculate the position of the lens:
# create lens:
self.lens = document.createElement("DIV");
self.lens.setAttribute("class", "img-zoom-lens");
self.lens.setAttribute("position", "absolute")
self.img.parentElement.insertBefore(self.lens, self.img)
x = x - (self.lens.offsetWidth / 2);
y = y - (self.lens.offsetHeight / 2);
# prevent the lens from being positioned outside the image:
if (x > self.img.width - self.lens.offsetWidth): x = self.img.width - self.lens.offsetWidth
if (x < 0): x = 0;
if (y > self.img.height - self.lens.offsetHeight): y = self.img.height - self.lens.offsetHeight;
if (y < 0): y = 0;
# set the position of the lens:
print ("xy", x, y)
self.lens.style.left = str(x) + "px";
self.lens.style.top = str(y) + "px";
# display what the lens "sees":
self.resultat.style.backgroundPosition = "-" + str(x * self.cx) + "px -" + str(y * self.cy) + "px";
magnificent = Magnifier()
И это html для него:
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {box-sizing: border-box;}
.img-zoom-container {
position: relative;
}
.img-zoom-lens {
position: absolute;
border: 1px solid #d4d4d4;
/*set the size of the lens:*/
width: 40px;
height: 40px;
}
.img-zoom-result {
border: 1px solid #d4d4d4;
/*set the size of the result div:*/
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<h1>Image Zoom</h1>
<p>Mouse over the image:</p>
<div class="img-zoom-container">
<img id="myimage" src="https://raw.githubusercontent.com/bunkahle/Transcrypt-Examples/master/user-interface/computer-desktop.jpg" width="300" height="215">
<div id="myresult" class="img-zoom-result"></div>
</div>
<p>The image must be placed inside a container with relative positioning.</p>
<p>The result can be put anywhere on the page, but must have the class name "img-zoom-result".</p>
<p>Make sure both the image and the result have IDs. These IDs are used when a javaScript initiates the zoom effect.</p>
<script src="__javascript__/magnifier.js" charset="UTF-8"></script>
</body>
</html>
Есть идеи, что может быть не так? Если закомментировать строку:
self.img.parentElement.insertBefore(self.lens, self.img)
Я вообще не вижу кадра, и он работает по крайней мере наполовину. Но было бы неплохо иметь границу вокруг увеличенного пространства.
