Question

我创建了一个程序，用随机颜色随机定位的框填充画布。那个部分很简单，问题就是我想用鼠标移动任何这些彩色的盒子。同样，指针必须与左上角保持一个恒定的距离。我的代码如下，任何帮助将不胜感激！

window.onload = init;


function init() {

var x= Math.floor(Math.random()*400);
var y= Math.floor(Math.random()*400);


var body = document.getElementsByTagName("body")[0];
var canvas = document.createElement("canvas");

canvas.height = window.innerHeight;
canvas.width = window.innerWidth;
var context = canvas.getContext("2d");



//  Repeat to draw a rectangle 100 times
    for(var i=0;i<100;i++){
    var color = '#'+ Math.round(0xffffff * Math.random()).toString(16);
    context.fillStyle = color;

    //Each rectangle is at (0 ~ width of window, 0 ~ height of window)
    //Each rectangle's size is 50x50)    
        context.fillRect(Math.random()*window.innerWidth, 
    Math.random()*window.innerHeight, 50, 50);
  }

  document.body.appendChild(canvas);

  }

var mousePiece = null;

function init2() {
//we are grabbing the div elm by uts id
// var divEl = document.getElementById("ace");
var cx = document.querySelector("canvas").getContext("2d");
//divEl.style.top = getStyle(divEl,"top");
//divEl.style.left = getStyle(divEl,"left");

addEvent(cx, "mousedown", mouseGrab, false);
}

function mouseGrab(e) {
var evt = e || window.event;
mousePiece = evt.target || evt.srcElement;

addEvent(document, "mousemove", mouseMove, false);
addEvent(document, "mouseup", mouseDrop, false);
}

function mouseMove(e) {
var evt = e || window.event;
var mouseX = evt.clientX;
var mouseY = evt.clientY;

mousePiece.style.left = mouseX + "px";
mousePiece.style.top = mouseY + "px";
}

function mouseDrop(e) {
mousePiece = null;
removeEvent(document, "mousemove", mouseMove, false);
removeEvent(document, "mouseup", mouseDrop, false);
}

function addEvent(object, evName, fnName, cap) {
if (object.attachEvent)
    object.attachEvent("on" + evName, fnName);
else if (object.addEventListener)
    object.addEventListener(evName, fnName, cap);
}

function removeEvent(object, evName, fnName, cap) {
if (object.detachEvent)
    object.detachEvent("on" + evName, fnName);
else if (object.removeEventListener)
    object.removeEventListener(evName, fnName, cap);
}

function getStyle(object, styleName) {
if (window.getComputedStyle) {
    return document.defaultView.getComputedStyle(object,  
null).getPropertyValue(styleName);
} else if (object.currentStyle) {
    return object.currentStyle[styleName]
}
}

Answer 1

坏消息是canvas元素是一个像素贴图：当你在其上绘制一些东西时，你就像修改图像一样修改像素值。在画布上绘图不会创建可以使用event.target分配id，抓取或移动的HTML元素（在您的情况下，目标将是canvas元素）。

好消息是有画布库在画布顶部为单独放置的项目创建对象模型，然后允许您移动它们。例如，请查看fabric.js以了解其支持的操作。随意对您的选项进行更多研究！

另请注意随机颜色字符串的两个问题：

使用Math.floor而不是Math.round来避免以2 ^ 24的值结束（也在ALFmachine的回复中更正）
定义CSS颜色使用十六进制数字字符串需要3或6个十六进制数字，前面加上“＃”。为了避免在您的情况下由CSS解析器丢弃颜色值，引导填充十六进制数字为'0'以根据需要组成6位数。

您可以使用范围0到255之间的三个随机整数构建CSS rbg（）颜色字符串作为替代。

Answer 2

我会考虑JQuery UI可拖动。我给你一个JS Fiddle随机颜色和所有。您可以使用JQuery UI执行许多操作，因此请检查文档以准确找到所需内容。

$( document ).ready( function () {
for ( var i = 0; i < 50; i++ ) {
    var randomColor = Math.floor(Math.random()*16777215).toString(16);
    var ranNum = Math.round( Math.random() * 65 )
    $( ".boxHolder" ).append( '<div class="pos' + i + ' draggable ui-widget-content"></div>' )
    $( ".pos" + i ).css({
        "background" : "#" + randomColor,
        "top"        : 10 * i + "px", 
        "left"       : ranNum * 6 + "px"
    })
}
})

$( function() {
   $( ".draggable" ).draggable()
})

使用鼠标移动随机放置的框

2 个答案: