Canvas JS mouseover создать круг - PullRequest
Новая
       29

Canvas JS mouseover создать круг

0 голосов
/ 23 марта 2020

Доброе утро всем. У меня есть холст с изображением, я фиксирую цвет при наведении мыши и, если цвет отличается от белого, я изменяю указатель мыши, теперь я хотел бы, чтобы другие изменили указатель, мог бы создать круг размером 24x24px вслед за мышью , Я создал эту фотографию, например

enter image description here

Вы можете мне помочь? спасибо 

$('#canvas').mousemove(function(event) {
    var pos = findPos(this);
    var dimensionMarker = 12;
    x_default = event.pageX - pos.x;
    y_default = event.pageY - pos.y;
    x = (event.pageX - pos.x) - dimensionMarker;
    y = (event.pageY - pos.y) - dimensionMarker;
    var coord = "x=" + x_default + ", y=" + y_default;
    var c = this.getContext('2d');
    var p = c.getImageData(x_default, y_default, 1, 1).data; 
    hex = "#" + ("000000" + rgbToHex(p[0], p[1], p[2])).slice(-6);
    if(hex != "#ffffff"){
        $(this).css({cursor: 'pointer'});
    }else{
        $(this).css({cursor: 'default'});
    }
});

Ответы [ 2 ]

1 голос
/ 23 марта 2020

Используя немного грязную уловку из моего теста нотатора сделал что-то в SVG. 

$('#paintArea').mousemove(function(event) {
    x_default = event.pageX;
    y_default = event.pageY;
    var c = $('#canvas')[0].getContext('2d');
    var p = c.getImageData(x_default, y_default, 1, 1).data;
    hex = "#" + ("000000" + rgbToHex(p[0], p[1], p[2])).slice(-6);
    if(hex != "#ffffff"){
        paintArea.firstElementChild.style.display = "none";
        $(this).css({cursor: 'pointer'});
    }else{
        showPos(event.originalEvent);
        paintArea.firstElementChild.style.display = "";
        $(this).css({cursor: 'default'});
    }
    window.status = hex;
});

var cursor;
var paintArea = document.getElementById("paintArea");
function showPos(e) {
	var info;
	paintArea.firstElementChild.setAttribute('transform', 'translate(' + e.x + ',' + e.y + ')');
}

// env preparation
function rgbToHex(r,g,b) {
    hex = (0x1000000 + (r << 16) + (g << 8) + b).toString(16).slice(1);
    return hex;
}

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
const img = new Image()
img.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAACWAQAAAAAA79KuAAAACXBIWXMAAAsSAAALEgHS3X78AAAAOUlEQVRYhe3JMQ0AIAwAwSYIwSpSEUICC2VCQIf78S8i6/u24hOllFJKaUHNt2ee9taglFJKKa2sB2rwUcX1FaqwAAAAAElFTkSuQmCC"
img.onload = function () {
  ctx.drawImage(img, 0, 0)
}

// Load and convert IMG 2 data URI
function zobrazit(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            var obrazek = document.getElementById("obrazek");
            obrazek.src = e.target.result;
            document.forms[0].dataUri.value = obrazek.src;
        };
        reader.readAsDataURL(input.files[0]);
    }
}
canvas {
  border: 1px blue;
  background-color: gray;
}
svg {
  border: 1px green;
  position: absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg id="paintArea">
  <circle cx="0" cy="0" r="24" stroke-width="3" fill="red" />
</svg>
<canvas id="canvas"></canvas>

<form style="float:right">
    <input
        type='file'
        onchange="zobrazit(this)"
    size=60>
    <br>
    <textarea name=dataUri rows=10 cols=40></textarea>
</form>
<img id="obrazek">
0 голосов
/ 23 марта 2020

Если холст - изображение не работает, всегда возвращайте # 00000 цвет 

var canvas = document.getElementById('#canvas');
            var context = canvas.getContext('2d');
            var imageObj = new Image();
            imageObj.src = urlImg;
            imageObj.onload = function () {
                context.drawImage(imageObj, 0, 0);
            };
...