Способ связать событие mousedown на лупе с Рафаэлем Холстом - PullRequest
Новая
       14

Способ связать событие mousedown на лупе с Рафаэлем Холстом

0 голосов
/ 31 января 2019

Я работал с Рафаэлем над созданием направляющих для изображения с помощью холста Рафаэля.Были в состоянии успешно создавать руководства, используя RaphaelJS.Проблема в том, что мне также нужна лупа, когда пользователь создает направляющие.Когда я включаю лупу, я не могу привязать событие mousedown к холсту Рафаэля, чтобы нарисовать направляющие на холсте.

Таким образом, я использовал метод on () для привязки отверстия для mousedown, но не смог этого сделать.Некоторая помощь в этом была бы очень признательна.

Я создал JsFiddle для проблемы, с которой я столкнулся.Пожалуйста, посмотрите https://jsfiddle.net/manikbajaj/f4knwq7m/2/

Я бы хотел, чтобы направляющие были нарисованы, даже когда лупа включена.Вы можете отключить лупу в скрипке, чтобы увидеть, что я могу нарисовать направляющие.

Вставка кода здесь и для обзора

Вот HTML 

<div class="container"
  <div class="row">
    <div class="col-12 win-crosshair-over">
      <div class="magnify" id="magnifier">

        <img
             id="magnifyImage"
             src="https://i.imgur.com/ZAqoag5.jpg"
             alt="Sample image"
             class="zoom"
             width="500"
             height="300"
             data-magnify-src="https://i.imgur.com/ZAqoag5.jpg"
             style="display: block;"/>

        <div id="canvasGame"></div>

      </div>
    </div>
  </div>
</div>

JS 

// Try to Disable the Magnifier And Raphale Will Work
$(document).ready(function(){
  $('#magnifyImage').magnify({
      speed: 300,
      limitBounds: true,
      afterLoad: function() {
      }
  });
}); 


// JS For Raphael 

function Line(startX, startY, endX, endY, color, raphael){
    var start = {
        x: startX,
        y: startY,
    };
    var end = {
        ex: endX,
        ey: endY
    };
    var color = color;
    var getEndX = function() {
        return end.ex;
    };
    var getEndy = function() {
        return end.ey;
    };
    var getPath = function() {
        return "M" + start.x + "," + start.y + "L" + getEndX() + "," + getEndy();
    };

    var redraw = function() {
        node.attr("path", getPath());
    };

    var node = raphael.path(getPath());
    node.attr({
        'fill': color,
        'stroke': color,
        "stroke-width":"2"
    });

    return {
        updateStart: function(x, y) {
            start.x = x;
            start.y = y;
            redraw();
            return this;
        },
        updateEnd: function(x, y) {
            end.ex = x;
            end.ey = y;
            redraw();
            return this;
        },
        clear: function() {
            node.remove();
        }
    };
}

$(function() {
    var $paper = $("#canvasGame");
    var paper = Raphael(document.getElementById('canvasGame'), 895, 500);
    var color = "#ff0000";

  $paper.mousedown(
        function(e) {
            e.stopPropagation();
            c = color;
            x = e.offsetX;
            y = e.offsetY;
            line = Line(x, y, x, y, c, paper);
            $paper.bind('mousemove', function(e) {
                x = e.offsetX;
                y = e.offsetY;
                line.updateEnd(x, y);
            });
        });

    $paper.mouseup(
        function(e) {
            e.stopPropagation();
            $paper.unbind('mousemove');
        });
});

CSS 

#canvasGame  {
  height: 300px;
  width: 500px;
  background-color: rgba(255,255,255,0);
  margin: 0 auto;
  border: 1px black solid;
  position: absolute;
  z-index: 1;
  cursor: crosshair;
  top:0;
  left: 0;
  border: none;
}

.win-crosshair-over{
  height: 300px;
}
...