用鼠标移动随机放置的盒子

Moving randomly placed boxes with the mouse

本文关键字：盒子 随机 鼠标 移动      更新时间：2023-09-26

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

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]
}
}

我认为JQuery UI是可拖动的。我给你做了一个随机颜色的JS提琴。你可以用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()
})

坏消息是canvas元素是一个像素映射:当您在其上绘制某些内容时，您修改像素值就像更新图像一样。在画布上绘图不会创建可以分配id、抓取或使用event.target移动的HTML元素(在您的情况下，目标将是画布元素)。

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

随机颜色字符串还有两个问题:

  1. 使用数学。地板而不是数学。四舍五入以避免最终的值为2^24(也在ALFmachine的回复中更正)
  2. 使用十六进制数字字符串定义CSS颜色需要3或6个十六进制数字前面加"#"。为了避免颜色值被CSS解析器丢弃，请根据需要将十六进制数字填充为'0'以组成6位数字。

你可以构造一个CSS rbg()颜色字符串，使用三个范围在0到255的随机整数作为替代。

相关文章：