Question

我是javascript的新手，而且我一直致力于一个相当困难的项目，因为在javascript方面成为这样的新手。该项目由一个视频编辑器组成，我有一个带有几个图像的工具箱和一个带有画布的视频元素。当视频开始播放时必须将其绘制到画布上，并且工具箱上的图像需要能够拖到画布上。我已经能够做到这一点，但我遇到了一个问题。当允许我将图像拖放到画布上的脚本没有被注释时，在画布上绘制视频的脚本突然停止工作。换句话说，只有在评论其他脚本时才会绘制视频。

这是我用来将图像拖到画布上的脚本：

  < script >
    (function() {
      var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
        window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
      window.requestAnimationFrame = requestAnimationFrame;
    })();

  var imagesOnCanvas = [];

  function renderScene() {
    requestAnimationFrame(renderScene);

    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0,
      canvas.width,
      canvas.height
    );


    for (var x = 0, len = imagesOnCanvas.length; x < len; x++) {
      var obj = imagesOnCanvas[x];
      obj.context.drawImage(obj.image, obj.x, obj.y);

    }
  }

  requestAnimationFrame(renderScene);

  window.addEventListener("load", function() {
    var canvas = document.getElementById('canvas');
    canvas.onmousedown = function(e) {
      var downX = e.offsetX,
        downY = e.offsetY;

      // scan images on canvas to determin if event hit an object
      for (var x = 0, len = imagesOnCanvas.length; x < len; x++) {
        var obj = imagesOnCanvas[x];
        if (!isPointInRange(downX, downY, obj)) {
          continue;
        }

        startMove(obj, downX, downY);
        break;
      }

    }
  }, false);

  function startMove(obj, downX, downY) {
    var canvas = document.getElementById('canvas');

    var origX = obj.x,
      origY = obj.y;
    canvas.onmousemove = function(e) {
      var moveX = e.offsetX,
        moveY = e.offsetY;
      var diffX = moveX - downX,
        diffY = moveY - downY;


      obj.x = origX + diffX;
      obj.y = origY + diffY;
    }

    canvas.onmouseup = function() {
      // stop moving
      canvas.onmousemove = function() {};
    }
  }

  function isPointInRange(x, y, obj) {
    return !(x < obj.x ||
      x > obj.x + obj.width ||
      y < obj.y ||
      y > obj.y + obj.height);
  }


  function allowDrop(e) {
    e.preventDefault();
  }

  function drag(e) {
    //store the position of the mouse relativly to the image position
    e.dataTransfer.setData("mouse_position_x", e.clientX - e.target.offsetLeft);
    e.dataTransfer.setData("mouse_position_y", e.clientY - e.target.offsetTop);

    e.dataTransfer.setData("image_id", e.target.id);
  }

  function drop(e) {
    e.preventDefault();
    var image = document.getElementById(e.dataTransfer.getData("image_id"));

    var mouse_position_x = e.dataTransfer.getData("mouse_position_x");
    var mouse_position_y = e.dataTransfer.getData("mouse_position_y");

    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');

    imagesOnCanvas.push({
      context: ctx,
      image: image,
      x: e.clientX - canvas.offsetLeft - mouse_position_x,
      y: e.clientY - canvas.offsetTop - mouse_position_y,
      width: image.offsetWidth,
      height: image.offsetHeight
    });

  }

  function convertCanvasToImage() {
    var canvas = document.getElementById('canvas');

    var image_src = canvas.toDataURL("image/png");
    window.open(image_src);

  }
  < /script>

以下是将视频绘制到画布上的脚本：

  < script >
    var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  var video = document.getElementById('video');
  video.addEventListener('loadedmetadata', function() {
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
  });

  video.addEventListener('play', function() {
    var $this = this; //cache
    (function loop() {
      if (!$this.paused && !$this.ended) {
        ctx.drawImage($this, 0, 0);
        setTimeout(loop, 1000 / 30); // drawing at 30fps
      }
    })();
  }, 0); < /script>

注意：第一个脚本位于canvas和video元素之前的head部分。第二个脚本位于视频和画布元素之后的body元素中。

这是我的画布，工具箱图片和视频元素：

<div id="denv">
  <div class="container-fluid" style="display: flex;align-items: flex-start;">
    <div class="row">
      <div class="col-sm-3" style="background-color:lavender;">Figuras
        <ul class="list-group">
          <li class="list-group-item "><img id="img1" draggable="true" ondragstart="drag(event)" src='http://jsfiddle.net/img/logo.png'></li>
          <li class="list-group-item "><img id="img2" draggable="true" ondragstart="drag(event)" src='http://jsfiddle.net/img/logo.png'></li>
          <li class="list-group-item "><img id="img3" draggable="true" ondragstart="drag(event)" src='http://jsfiddle.net/img/logo.png'></li>
          <li class="list-group-item "><img id="img4" draggable="true" ondragstart="drag(event)" src='http://jsfiddle.net/img/logo.png'></li>
          <li class="list-group-item "><img id="img5" draggable="true" ondragstart="drag(event)" src='http://jsfiddle.net/img/logo.png'></li>
        </ul>
      </div>
      <video id="video" src="http://upload.wikimedia.org/wikipedia/commons/7/79/Big_Buck_Bunny_small.ogv" controls="autoplay"></video>
      <canvas id="canvas" ondrop="drop(event)" ondragover="allowDrop(event)" width="500" height="500" style="border: 1px solid gray"></canvas>

我觉得这里的代码数量有点难以理解，难以理解......这里是整个代码的链接。

我已经评论了脚本的位置以及执行的操作：https://codeshare.io/2BAqX9

最重要的是，我无法理解为什么一个脚本仅在另一个脚本被注释掉时才起作用，我知道这两个脚本工作正常。

如果您有任何疑问或问题可以在我的问题中改进，请告诉我。

PS：我知道它有很多代码，但我觉得如果我没有提供所有的脚本和HTML，那么任何人都很难解决问题

感谢您的时间

编辑：JsFiddle：https://jsfiddle.net/awhau99t/ JS没有将HTML与HTML分开，因为我没有＆＃34;工作＆＃34;由于函数的构建方式而显示的示例

脚本仅在javascript

0 个答案: