Перетаскивание изображения на холсте - JavaScript - PullRequest
Новая
       14

Перетаскивание изображения на холсте - JavaScript

0 голосов
/ 08 октября 2018

У меня есть холст, который в настоящее время рисует изображение и можно перетаскивать.Единственная проблема заключается в том, что изображение перемещается при перетаскивании в любое место на холсте, а не при перетаскивании изображения.Нужно сделать так, чтобы изображение перетаскивалось только при перетаскивании.Любая помощь приветствуется. 

Polymer({
is: 'sensor-map',

onCreateCanvas: function(){

    var canvas = this.$.myCanvas;
    var context = canvas.getContext('2d');
    var imageObj = new Image();
    var currentX = 0;
    var currentY = 0;

    var isDraggable = false;
    var imagedrawn = false;

    imageObj.onload = function() {
        context.drawImage(imageObj, 0, 0);
        currentX = canvas.width/2;
        currentY = canvas.height/2;
    };
    imageObj.src = 'https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png';
    //https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png
    //https://wonderfulengineering.com/wp-content/uploads/2014/03/high-resolution-wallpapers-12.jpg

    imagedrawn = true;

    canvas.addEventListener('mousedown', function(e){
        currentX = e.pageX - this.offsetLeft;
        currentY = e.pageY - this.offsetTop;
        console.log(currentX);
        console.log(currentY);
        isDraggable = true;
    });

if (imagedrawn){
canvas.addEventListener('mousemove', function(e){
    if (isDraggable) {
        currentX = e.pageX - this.offsetLeft;
        currentY = e.pageY - this.offsetTop;
        context.fillStyle = '#e2e8ed';
        context.fillRect(0,0, canvas.width, canvas.height);
        context.drawImage(imageObj, currentX-(imageObj.width/2), currentY- 
(imageObj.height/2));
    }
});
...