我正在创建一个画布绘图应用程序,我希望能够在单击该工具时为每个工具加载光标图像。我做了这个工作,直到我做了一点重新装修并改变了布局。我把工具放在一张桌子里重新设计,但我不认为这应该是问题所在。谢谢你的帮助。
****************HTML**********************
<div class="tools2">
<table>
<tr>
<th>
<div id="brush">
<input type="image" class="line" src="./assets/imgs/tools/brush.png" />
</div>
</th>
<th>
<div id="bucket">
<input type="image" class="line" src="./assets/imgs/tools/bucket.png" onclick="setFill()" />
</div>
</th>
<th>
<div id="eraser">
<input type="image" class="line" src="./assets/imgs/tools/eraser.png" onclick="setEraser()" />
</div>
</th>
<th>
<div>
<form onsubmit='return false;'>
<input type='image' src="./assets/imgs/tools/clear_brush.png" class="line" id="clear" onclick='clear_canvas_rectangle ()'>
</form>
</div>
</th>
</tr>
</table>
****************JQUERY**********************
<script>
$('.tools2 a div').each(function() {
$(this).click(function () {
setCursor($(this).attr('id'));
});
});
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;
case 'rectangle':
shape = SHAPE_TYPE.RECTANGLE;
break;
case 'eraser':
shape = SHAPE_TYPE.ERASER;
break;
case 'fill':
shape = SHAPE_TYPE.FILL;
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');
}
function setLine(){
console.log('init.js: setLine(): brush');
shape = SHAPE_TYPE.LINE;
$('.canvas-boards').css('cursor', 'url(../assets/imgs/tools/cursor_brush.png)0 130, auto');
}
function setEraser(){
shape = SHAPE_TYPE.ERASER;
$('.canvas-boards').css('cursor', 'url(../assets/imgs/tools/cursor_eraser.png) 0 130, auto');
}
function setFill(){
shape = SHAPE_TYPE.FILL;
$('.canvas-boards').css('cursor', 'url(../assets/imgs/tools/bucket.png) 0 130, auto');
}
function setCircle(){
console.log('init.js: setCircle(): circle');
shape = SHAPE_TYPE.CIRCLE;
$('.canvas-boards').css('cursor', 'url(../assets/imgs/tools/cursor_circle.png)0 130, auto');
}
function setRectangle(){
console.log('init.js: setRectangle(): rect');
shape = SHAPE_TYPE.RECTANGLE;
$('.canvas-boards').css('cursor', 'url(../assets/imgs/tools/cursor_rectangle.png)0 130, auto');
}
答案 0 :(得分:0)
首先删除班级<div class="tools">
第二条路径错误,更正:
$('.tools table tr th div').each(function() {
$(this).click(function () {
console.log($(this).attr('id'));
setCursor($(this).attr('id'));
});
});