跨浏览器光标图像的标准大小? jquery更改光标图像

时间:2016-06-13 23:55:38

标签: jquery canvas html5-canvas png image-size

我的光标图像正在保存128px x 128px pngs,但现在它们不在任何浏览器中:(做了一些改变?我几天前发布了一个问题,关于我的光标图像没有因为我的绘图的onclick而改变应用程序。我帮助解决了我的初始问题,你可以看到它在控制台中被正确调用,一切都很好,但图像不会从画笔图像中改变。我认为它可能与尺寸有关但是我不是百分百肯定。非常感谢任何帮助:

*************** HTML **********

<div class="tools">
<table>
<tr>
<th>
<div id="brush">
<input type="image" class="line" src="./assets/tools/brush.png" />
</div>
</th>
<th> 
<div id="bucket">
<input type="image" class="line" src="./assets/tools/bucket.png" onclick="setFill()" />
</div>
</th>
<th> 
<div id="eraser">
<input type="image" class="line" src="./assets/tools/eraser.png" onclick="setEraser()" />
</div>
</th>
<th>
<div>
<form onsubmit='return false;'>
<input type='image' src="./assets/tools/clear_brush.png" class="line" id="clear" onclick='clear_canvas_rectangle ()'> 
</form> 
</div> 

</th> 

</tr>
</table>
</div> 

************************** JS ******************** ***********

$('.tools table tr th div').each(function() {
$(this).click(function () {
console.log($(this).attr('id
setCursor($(this).attr('id'));
});
});



function setCursor(id) {
console.log("init.jsCursor(): id: " + id);

switch (id) {
case 'brush':
shape = SHAPE_TYPE.LINE;
break;
case 'eraser':
shape = SHAPE_TYPE.ERASER;
break;
case 'fill':
shape = SHAPE_TYPE.FILL;
break;


}



console.log("image: " + 'cursor_' + id + '.png');

$('.canvas-boards').css('cursor', 'url(../assets/tools/cursor_' + id + '.png)0 130, auto');


$('.canvas-boards').css('cursor', 'url(../assets/tools/cursor_brush.png) 0 130, auto');
}

function setLine(){
console.log('init.jstLine(): brush');
shape = SHAPE_TYPE.LINE;
$('.canvas-boards').css('cursor', 'url(../assets/tools/cursor_brush.png)0 130, auto');
}

function setEraser(){
console.log('init.jstEraser(): eraser');
shape = SHAPE_TYPE.ERASER;
$('.canvas-boards').css('cursor', 'url(../assets/tools/cursor_eraser.png)0 130, auto');
}


function setFill(){
shape = SHAPE_TYPE.FILL;
$('.canvas-boards').css('cursor', 'url(../assets/tools/cursor_bucket.png)30 120, auto');
}

0 个答案:

没有答案