Question

我正在制作Canvas绘图应用程序，我试图将光标更改为在画布上绘图时处于活动状态的绘图工具的图像。我认为我有正确的代码，但它没有工作，显然有些事情是错误的。谢谢你的任何提示。

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');
}

Answer 1

感谢大家的帮助，我想出了问题！我用的图像太大了！它们必须完全是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

function 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 0，auto'）; }

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

1 个答案: