javascript - 如何在我的 HTML <img> 标签之上用 JS 显示捕捉网格？-6ren

javascript - 如何在我的 HTML 标签之上用 JS 显示捕捉网格？

转载作者：行者123 更新时间：2023-11-27 23:56:57

我正在尝试获取一个网格，我希望对象可以吸附在该网格上，以显示在我的 HTML 页面顶部。我的想法是让公共(public)汽车沿着我的“游戏”中的特定路线行驶。这都是基于 PHP/JS/CSS 的。

我正在尝试使用这个 fiddle http://jsfiddle.net/gho0Lv4b/显示在这张 map 的顶部 https://oege.ie.hva.nl/~delawai/assets/images/Photos/map.jpg

我尝试在标签顶部使用 Canvas ，rgba 背景为 (0,0,0,0)，但没有骰子。

///Grid

var canvas = new fabric.Canvas('c', { selection: false });
var grid = 25;

// create grid

for (var i = 0; i < (2000 / grid); i++) {
  canvas.add(new fabric.Line([ i * grid, 0, i * grid, 2000], { stroke: '#ccc', selectable: false }));
  canvas.add(new fabric.Line([ 0, i * grid, 2000, i * grid], { stroke: '#ccc', selectable: false }))
}

// add objects

canvas.add(new fabric.Rect({ 
  left: 100, 
  top: 100, 
  width: 50, 
  height: 50, 
  fill: '#faa', 
  originX: 'left', 
  originY: 'top',
  centeredRotation: true
}));

canvas.add(new fabric.Circle({ 
  left: 300, 
  top: 300, 
  radius: 50, 
  fill: '#9f9', 
  originX: 'left', 
  originY: 'top',
  centeredRotation: true
}));

// snap to grid

canvas.on('object:moving', function(options) { 
  options.target.set({
    left: Math.round(options.target.left / grid) * grid,
    top: Math.round(options.target.top / grid) * grid
  });
});

HTML 将是一个像这样的简单 Canvas (我猜？)

<canvas id="c" width="3016" height="2781" z-index="1"><img src="https://oege.ie.hva.nl/~delawai/assets/images/Photos/map.jpg" z-index="0"></canvas>

-- 编辑

似乎下面提供的代码有效。现在我遇到了将图像嵌入网格的问题。我知道用

document.getElementById("...")

函数。但是我不知道在页面中的什么地方添加这个功能。

现在我尝试像这样调用函数:

// add custom objects
var bus = new Image();
  img.src = 'https://oege.ie.hva.nl/~delawai/assets/images/Photos/bus_geel.png';
document.getElementById(bus);

如有更多帮助，我们将不胜感激!我真的不擅长 JS。提前抱歉

--每 20/05 编辑

似乎在 test.html 中这不起作用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<script src="kinetic.js"></script>


    <style>
        .container {
            position: relative;
        }

        canvas {
            position: absolute;
            z-index: 1;
            top: 0;
            left: 0;
            border: 0px solid #ffffff;
        }

        img {
            position: absolute;
            top: 0;
            left: 0;
        }

    </style>
</head>
<body>
<div class="container">
    <canvas id="c" width="1920" height="1080"></canvas>
    <img height="1080" width="1920" src="https://oege.ie.hva.nl/~delawai/assets/images/Photos/map.jpg" z-index="0">
</div>

</body>

<script>


    var canvas = new fabric.Canvas('c', { selection: false });
    var grid = 25;

    // create grid

    for (var i = 0; i < (600 / grid); i++) {
        canvas.add(new fabric.Line([ i * grid, 0, i * grid, 600], { stroke: '#ccc', selectable: false }));
        canvas.add(new fabric.Line([ 0, i * grid, 600, i * grid], { stroke: '#ccc', selectable: false }))
    }

    const url = 'https://oege.ie.hva.nl/~delawai/assets/images/Photos/bus_geel.png';

    fabric.Image.fromURL(url, (img) => {
//scale down the image but keeping the aspect ratio
        const width = 50;
        const height = 50;
        const widthFactor = width / img.width;
        const heightFactor = height/ img.height;
        const minFactor = Math.min(widthFactor, heightFactor);
        img.scale(minFactor);
        canvas.add(img)
    }, {
//here you can set the positioning
        left: 50,
        top: 100,
    });

    canvas.on('object:moving', function(options) {
        options.target.set({
            left: Math.round(options.target.left / grid) * grid,
            top: Math.round(options.target.top / grid) * grid
        });
    });
</script>

但它不想工作。尝试从外部调用 grid.js，像本例中那样嵌入它。没有骰子。 map 显示，但网格不显示。

最佳答案

您可以在 div 容器中同时添加 canvas 和 img 标签。

这是 fiddle http://jsfiddle.net/ruaotqhx/

HTML

<div class="container">
  <canvas id="c" width="1920" height="1080"></canvas>
  <img height="1080" width="1920" src="https://oege.ie.hva.nl/~delawai/assets/images/Photos/map.jpg" z-index="0">
</div>

CSS

.container {
  position: relative;
}

canvas {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    border: 0px solid #ffffff;
}

img {
  position: absolute;
  top: 0;
  left: 0;
}

要从 url 添加 img 到你的网格，你可以简单地做:

const url = 'https://oege.ie.hva.nl/~delawai/assets/images/Photos/bus_geel.png'

fabric.Image.fromURL(url, (img) => {
//scale down the image but keeping the aspect ratio
    const width = 50;
    const height = 50;
    const widthFactor = width / img.width
    const heightFactor = height/ img.height
    const minFactor = Math.min(widthFactor, heightFactor)
    img.scale(minFactor)
    canvas.add(img)
}, {
//here you can set the positioning
  left: 50,
  top: 100,
});