绘图应用程序-单击工具更改光标

Drawing App - Changing Cursor by clicking on Tool

本文关键字：光标 工具 单击 应用程序 绘图      更新时间：2023-09-26

我正在开发画布绘图应用程序，我正试图将光标更改为在画布上绘图时激活的绘图工具的图像。我想我有正确的代码，但它不起作用，所以很明显出了问题。谢谢你的建议。

HTML

<div class="tools col-md-2">
<div>
    <input type="image" class="active" src="./assets/imgs/tools/brush.png" id="brush"
           onclick= "setLine();"/>
    </div>
    <div>
        <input type="image" class="circ" src="./assets/imgs/tools/circle.png" 
               onclick="setCircle();" />
    </div>
    <div>
        <input type="image" src="./assets/imgs/tools/rectangle.png" 
               onclick="setRectangle()" />
    </div>
    <div>
        <input type="image" src="./assets/imgs/tools/eraser.png" 
               onclick="setEraser()" />
    </div>
    <div>
        <input type="image" src="./assets/imgs/tools/bucket.png" 
               onclick="setFill()" />
    </div>
    <div>
        <img src="./assets/imgs/tools/undo.png" onclick="undoBoard()" />
    </div>

    <div>

Javascript

function setLine(){
    shape = SHAPE_TYPE.LINE;
    $('#Draw').css('cursor', 'url(../assets/imgs/tools/cursor_brush.png) 0 130, auto');
}
function setCircle(){
    shape = SHAPE_TYPE.CIRCLE;
    $('.canvas-boards').css('cursor', 'url(../assets/imgs/tools/cursor_circle.png) 0 0, auto');
}
function setRectangle(){
    shape = SHAPE_TYPE.RECTANGLE;
    $('.canvas-boards').css('cursor', 'url(../assets/imgs/tools/cursor_rectangle.png) 0 0, auto');
}
function setEraser(){
    console.log("i erase");
    shape = SHAPE_TYPE.ERASER;
    $('.canvas-boards').css('cursor', 'url(../assets/imgs/tools/eraser.png) 10 29, auto');
}
function setFill(){
    shape = SHAPE_TYPE.FILL;
    $('.canvas-boards').css('cursor', 'url(../assets/imgs/tools/bucket.png) 30 120, auto');
}

感谢大家的帮助，我解决了问题！！我使用的图像太大了！它们必须是128px x 128px，这对于一个痛苦的问题来说是一个非常愚蠢的解决方案。我还想好了如何在点击ID上加载图像，我将在下面发布，供任何人参考。再次感谢！

//HTML

<div id="brush">
            <input type="image" class="active"  src="./assets/imgs/tools/brush.png" id="brush"/>
        </div>
        <div id="circle">
            <input type="image" class="circ" src="./assets/imgs/tools/circle.png" />
        </div>

//JAVASCRIPT

函数setCursor（id）{console.log（"init.js:setCursor（）:id:"+id）；

switch (id) {
    case 'brush':
        shape = SHAPE_TYPE.LINE;
    break;
    case 'circle':
        shape = SHAPE_TYPE.CIRCLE;
    break;
}
console.log("image path: " + 'cursor_' + id + '.png');

$（'.canvas boards'）.css（'cursor'，'url（../assets/imgs/tools/cursor_'+id+'.png）0 130，auto'）；//$（'.canvas boards'）.css（'cursor'，'url（../assets/imgs/tools/brush.png）0，auto'）；}

相关文章：