我使用画布通过拖放来定位对象并在它们之间画线。在调整浏览器大小时，我将调整所有浏览器的大小。屏幕大小调整，画布上也包含所有对象。但是对象之间的线条不在正确的位置。例如，如果我将大小从右下角减小到左上角，则线条将移动到左上角。
有人可以帮忙吗？
最好的问候，恩斯特
.item {
border-radius: 50%;
touch-action: none;
user-select: none;
position: absolute;
}
.kreis {
width: 40px;
height: 40px;
border: 3px solid rgba(136, 136, 136, .5);
background-color: #FFFF00;
top: 75px;
left: 20px;
}
<div class="item kreis" id="Kreis1" onclick="go(this);"></div>
In window.onload = function()
window.addEventListener("resize", ResizeCanvas);
function ResizeCanvas() {
window.addEventListener("resize", displayWindowSize);
var canvas = document.getElementById('DemoCanvas');
var context = canvas.getContext('2d');
var ratio = canvas.width / canvas.height;
var canvas_height = window.innerHeight;
var canvas_width = canvas_height * ratio;
if(canvas_width>window.innerWidth){
canvas_width=window.innerWidth;
canvas_height=canvas_width/ratio;
}
canvas.style.width = canvas_width + 'px';
canvas.style.height = canvas_height + 'px';
var scale=(canvas.width / originalWidth);
canvas.width=originalWidth*scale;
canvas.height=originalHeight*scale;
context.scale(scale,scale);
Draw();
}
function Draw() {
...
context.strokeStyle = "#008800";
context.setLineDash([5, 0]);
context.beginPath();
context.moveTo(xA,yA - iAddTop);
context.lineTo(xB,yB - iAddTop);
context.stroke();
...
}
感谢您的回复。我减少了 html 和 js 文件。有两个圆圈，可以通过拖放移动，并在圆圈之间画一条线。调整大小时，您可以看到发生了什么。
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<title>NCS</title>
<style>
body{ margin:0px; }
#textarea {
resize: both;
}
#container {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
touch-action: none;
border: 10px solid rgba(136, 136, 136, .5);
}
.scaled {
transform: scale(1.0);
}
.item {
border-radius: 50%;
touch-action: none;
user-select: none;
position: absolute;
}
.item2 {
touch-action: none;
user-select: none;
position: absolute;
}
.kreis {
width: 40px;
height: 40px;
border: 3px solid rgba(136, 136, 136, .5);
background-color: #FFFF00;
top: 75px;
left: 20px;
}
.item:active {
opacity: .75;
}
.item:hover {
cursor: pointer;
}
canvas{border:1px;}
</style>
</head>
<body>
<div id="result"></div>
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="outerContainer">
<div id="container">
<fieldset id="fset">
<div id="sca" class="scaled">
<script>
var a = "<canvas id='DemoCanvas' width='"
a = a + (window.innerWidth - 17) + "px";
a = a + "' height='";
a = a + window.innerHeight + "px"; //screen.height;
a = a + "' onClick='InvisibleMarker()' ></canvas>";
document.write(a);
</script>
<div class="item kreis" id="Kreis1" onclick="go(this);"></div>
<div class="item kreis" id="Kreis2" onclick="go(this);"></div>
</div>
</fieldset>
</div>
</div>
<script>
var container = document.querySelector("#container");
var activeItem = null;
var active = false;
container.addEventListener("touchstart", dragStart, false);
container.addEventListener("touchend", dragEnd, false);
container.addEventListener("touchmove", drag, false);
container.addEventListener("mousedown", dragStart, false);
container.addEventListener("mouseup", dragEnd, false);
container.addEventListener("mousemove", drag, false);
function dragStart(e) {
if (e.target !== e.currentTarget) {
active = true;
// this is the item we are interacting with
activeItem = e.target;
if (activeItem !== null) {
if (!activeItem.xOffset) {
activeItem.xOffset = 0;
}
if (!activeItem.yOffset) {
activeItem.yOffset = 0;
}
if (e.type === "touchstart") {
activeItem.initialX = e.touches[0].clientX - activeItem.xOffset;
activeItem.initialY = e.touches[0].clientY - activeItem.yOffset;
} else {
console.log("doing something!");
activeItem.initialX = e.clientX - activeItem.xOffset;
activeItem.initialY = e.clientY - activeItem.yOffset;
}
}
}
}
function dragEnd(e) {
if (activeItem !== null) {
activeItem.initialX = activeItem.currentX;
activeItem.initialY = activeItem.currentY;
}
active = false;
activeItem = null;
Draw();
}
function drag(e) {
if (active) {
if (e.type === "touchmove") {
e.preventDefault();
activeItem.currentX = e.touches[0].clientX - activeItem.initialX;
activeItem.currentY = e.touches[0].clientY - activeItem.initialY;
} else {
activeItem.currentX = e.clientX - activeItem.initialX;
activeItem.currentY = e.clientY - activeItem.initialY;
}
activeItem.xOffset = activeItem.currentX;
activeItem.yOffset = activeItem.currentY;
setTranslate(activeItem.currentX, activeItem.currentY, activeItem);
}
}
function setTranslate(xPos, yPos, el) {
el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
}
</script>
<script type="text/javascript" src="functions.js"></script>
</div>
<script>
function displayWindowSize(){
}
</script>
</body>
</html>
"使用严格"//----------------------------------------------------------
window.onload = function()
{
window.addEventListener("resize", ResizeCanvas);
}
----------------------------------------------------------
function ResizeCanvas() {
window.addEventListener("resize", displayWindowSize);
var canvas = document.getElementById('DemoCanvas');
var context = canvas.getContext('2d');
var ratio = canvas.width / canvas.height;
var canvas_height = window.innerHeight;
var canvas_width = canvas_height * ratio;
if(canvas_width>window.innerWidth){
canvas_width=window.innerWidth;
canvas_height=canvas_width/ratio;
}
canvas.style.width = canvas_width + 'px';
canvas.style.height = canvas_height + 'px';
var scale=(canvas.width / originalWidth);
canvas.width=originalWidth*scale;
canvas.height=originalHeight*scale;
context.scale(scale,scale);
Draw();
}
----------------------------------------------------------
function go(node){
sAktNodeId = node.id;
ResizeSelect();
}
----------------------------------------------------------
function Draw() {
var canvas = document.getElementById('DemoCanvas');
var context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);
if (canvas.getContext)
{
var rec = document.getElementById("Kreis1").getBoundingClientRect();
var iFromX = rec.left;
var iFromY = rec.top;
rec = document.getElementById("Kreis2").getBoundingClientRect();
var iToX = rec.left;
var iToY = rec.top;
context.strokeStyle = "#008800";
context.setLineDash([5, 0]);
context.beginPath();
context.moveTo(iFromX,iFromY);
context.lineTo(iToX,iToY);
context.stroke();
}
}
----------------------------------------------------------