个人中心
gpt4 book ai didi

javascript - 在 Javascript 中更改光标类型

转载 作者：太空宇宙 更新时间：2023-11-04 00:54:28 24 4
gpt4 key购买 nike

我有这个程序，我正在创建一个绘图软件。当我在移动鼠标的同时按下 ctrl 键时，它会打开橡皮擦。按下该键时，我希望光标(当前为十字准线)变为无。我该怎么做呢？我尝试实现 document.body.style.cursor = "none" 和 document.getElementById("canvas").style.cursor = "none"，但是两者都不起作用。我需要使用 Javascript，所以请不要使用 Jquery。

这是我迄今为止尝试的代码的一部分:

<!doctype html>
<html lang="en">
<head>
<style>
body { 
            /* 
                this css selector (body) tells the browser that this style block applies to ALL <body> elements on this page; just because there is only 1 <body> doesnt make any difference 
            */
            background-color: #c0c0c0; /* this css property sets the background colour of the entire body of the web page */
            /* 
                the colour: #c0c0c0 uses the format RRGGBB (RR=c0, GG=c0, BB=c0), anytime all the three channels (RGB) is all the same the resulting colour is a shade of grey. Each channel can be 0 to 255 (or in HEX: 00 to FF)
            */
        }


        #cw1MainContainer { 
            /* 
                this css selector ("#" followed by "cw1MainContainer") tells the browser that this style block applies to ONLY the element with the id="cw1MainContainer" - the # tells the browser to match IDs
            */
            position: absolute; /* this css property tells the browser that the selected element (in this case id="cw1MainContainer") will be specifically told where to be displayed using LEFT and TOP (for x and y). 0, 0 being the top left and corner */
            left: 20px; /* this css property defines/sets the left position for the selected element; in essence, how far from the left edge it should be placed */
            top: 20px; /* this css property defines/sets the top position for the selected element; in essence, how far from the top edge it should be placed */
        }


        canvas { 
            /* 
                this css selector (canvas) tells the browser that this style block applies to ALL <canvas> elements on this page; just because there is only 1 doesnt make any difference 
            */
            background-color: #fafafa; /* this css property defines/sets the background colour of the selected element (in this case <canvas>) */
            border: 1px solid #a0a0a0; /* this css property defines/sets the border of the selected element (in this case <canvas>) */
            cursor: crosshair; /* this css property defines/sets the shape and type of the mouse pointer when over this element */
        }

        #box {
          pointer-events: none;
          background-color: #000000;
          width: 5px;
          height: 5px;
        }


    </style>

    <script>
        var oCanvas, oCanvasContext; //declare the global variables used to hold and control the canvas element
        var sFillColour; //create a global variable used to hold the active/selected colour
        var sCanvasColour; //create a global variable used to hold the canvas colour
        var iMouseX, iMouseY; //declare the global variables used to hold the mouse's coordinates
        var iBrushWidth, iBrushHeight; //declare the global variables used to hold the selected brush sizes
        var multiplier = 1 //create a global variable used to hold the multiplier of the brush size

        function fnTrackMouse(e) {
            //this function is called "everytime" the user's mouse is moved when over the associated element (in this case the canvas)
            //we have also added the ability for it to accept a parameter (called e, actually we can call it anything but as event is a reserved work "e" makes some sense
            var canvasRect = oCanvas.getBoundingClientRect(); //use this function to dynamically get the size of the canvas and its position
            iMouseX=(e.clientX - canvasRect.left - 3); //modify the original position of the mouse by accounting for the position on the canvas; on the x
            iMouseY=(e.clientY - canvasRect.top - 3); //modify the original position of the mouse by accounting for the position on the canvas; on the y

            var bx = document.getElementById("box");
            bx.style.left = (iMouseX)+"px";
            bx.style.top = (iMouseY)+"px";


            if (e.ctrlKey) { //this checks if the user has pressed the control key to use the eraser funtion
                fnSetFillColour(sCanvasColour); //calls the fnSetFillColour function with the background colour of the canvas in the parameter
                box.style.backgroundColor = sCanvasColour;
                document.body.style.cursor = "none";
            }       


            if (e.buttons==1) { //this checks to see if the user is pressing the left mouse button (1 = the left mouse button)
                //the user has pressed the left button - so lets start painting
                fnPaint(iMouseX, iMouseY, iBrushWidth, iBrushHeight); //call the fnPaint function and pass it the coordinates and size to paint
            }           

        }

    </script>

</head>
</html>

如有任何帮助，我们将不胜感激。谢谢

编辑:这是我的 html 代码:` 

    <div id="cw1MainContainer">


        <!-- this div block is only used to hold the HTML canvas element -->
        <div id="cw1CanvasContainer">
            <canvas id="cw1Canvas" onmousemove="fnTrackMouse(event);" onkeypress="fnBrushSize(event);"></canvas>
            <div id="box" style="border: 1px solid #000000; position:absolute;" />
            <!-- 
                by specifing the onmouseover event the canvas will call the "fnTrackMouse" function EVERY time the 
                mouse moves 1 pixel over the canvas.
                by passing the JavaScript "event" we are effectively also passing details about the event, 
                e.g. where the mouse was, what buttons were pressed etc. 
            -->
        </div>

    </div>      

</body>`

最佳答案

您可能会在渲染之前尝试访问 DOM。请引用以下代码。

function canvas(){
  var $canvas = document.getElementById("myCanvas");
  $canvas.addEventListener('mouseover', function(e){
    if(e.ctrlKey){
      $canvas.style.cursor = 'none';
    } else {
      $canvas.style.cursor = 'crosshair';
    }
  })    
}
#myCanvas{
  cursor: crosshair;
  width: 100px;
  height: 100px;
  background: skyblue;
}
<!DOCTYPE html>
<html lang="en">
<head>
  
  <!--  Meta  -->
  <meta charset="UTF-8" />
  <title>Javascript Cursor Styles!</title>
  
  <!--  Styles  -->
  <link rel="stylesheet" href="styles/index.processed.css">
  <script src="scripts/index.js"></script>
</head>
  <body onload="canvas()">
    <div id='myCanvas'>
    </div>
  </body>
</html>

关于javascript - 在 Javascript 中更改光标类型，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55116858/

24 4 0
文章推荐： c - 从文件读取时出现段错误
文章推荐： angularjs - 向 Steam 市场发出 GET 请求时出错
文章推荐： node.js - openshift 与 nodejs 不尊重 package.json 中我的服务器文件的路径
文章推荐： html - 不影响文本的背景图像不透明度
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com