Question

我不熟悉jquery和canvas，我想制作一个橡皮擦（就像在photoshops或paint中使用橡皮擦工具），擦除画布上的一些线条。

标记 - 触发开始绘制
重置 - 清除画布橡皮擦 - 擦除不必要的线条/草图（我想做什么）

以下是我使用不同来源的代码，我想包含 ERASER

$(function() {
    $.each(['#f00', '#ff0', '#0f0'], function() {
    
      $('#colors_demo').append("<a href='#colors_sketch' data-color='" + this + "' style='width: 30px;height: 30px;display:inline-block; background: " + this + ";'></a> ");
    });
    $('#colors_sketch').sketch();
    $('#colors_sketch').sketch({defaultColor: "#ff0"});
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="http://intridea.github.io/sketch.js/lib/sketch.js"></script>

<div id="colors_demo" class="tools">
  
</div>
<div class="tools">
  <a href="#colors_sketch" data-tool="marker">Marker</a>
  <a href="#colors_sketch" data-tool="eraser">Eraser</a>
</div>
<canvas id="colors_sketch" width="800" height="300"></canvas>

我很难在线搜索，因为它只显示重置或撤消希望有人可以帮助我。非常感谢!!!!

Answer 1

为什么不绕过并使用背景颜色作为橡皮擦工具

以下示例sniipet：

$(function() {
    $.each(['#f00', '#ff0', '#0f0'], function() {
    
      $('#colors_demo').append("<a href='#colors_sketch' data-color='" + this + "' style='width: 30px;height: 30px;display:inline-block; background: " + this + ";'></a> ");
    });
    var color = getBackground($('#colors_sketch'));
    //console.log(color);
    $("#eraser").attr('data-color',color);
    $('#colors_sketch').sketch();
    $('#colors_sketch').sketch({defaultColor: "#ff0"});
});

function getBackground(jqueryElement) {
  var color = jqueryElement.css("backgroundColor");
  if(color == "transparent"){
    color = jqueryElement.parent().css("backgroundColor") == "transparent" ? "#fff" : jqueryElement.parent().css("backgroundColor");
    //alert(color)
  }
  return hexc(color);
}

function hexc(colorval) {
    var parts = colorval.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    delete(parts[0]);
    for (var i = 1; i <= 3; ++i) {
        parts[i] = parseInt(parts[i]).toString(16);
        if (parts[i].length == 1) parts[i] = '0' + parts[i];
    }
    color = '#' + parts.join('');

    return color;
}

#colors_sketch {
  border:1px solid black;
  background-color:#999;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="http://intridea.github.io/sketch.js/lib/sketch.js"></script>

<div id="colors_demo" class="tools">
  
</div>
<div class="tools">
  <a href="#colors_sketch" data-tool="marker">Marker</a>
  <a id="eraser" href='#colors_sketch' data-color=''>Eraser</a>
  <a href="#colors_sketch" data-tool="eraser">Clear</a>
</div>
<canvas id="colors_sketch" width="800" height="300"></canvas>

HTML5 Canvas擦除线条

1 个答案: