Question

我正在使用sketch.js html canvas库在我的电子书中的多个页面上绘画。在我的应用程序中，电子书页面在加载书籍时动态加载。所以我在一些页面中注入了多张画布，我应该这样绘制：

......//page content
$(pageContent).append('<canvas class="simple_sketch"  style="background: url(images/white.jpg);" width="400" height="600"></canvas>');

然后使用每个循环调用sketch函数

$('.simple_sketch').each(function() {
  $(this).sketch();
});

到目前为止这个效果很好，我可以在每个页面上绘制这幅画，但是当我尝试添加工具（标记大小，颜色，重置按钮）时，我的href锚标签不起作用。我的html标记看起来像这样：

<div class="paint_tools">
  <a href="#simple_sketch" data-size="3"><img src="images/pen-medium.png" width="49" alt=""></a>
  <a href="#simple_sketch" data-size="5"><img src="images/pen-medium.png" width="49" alt=""></a>
  <a href="#simple_sketch" data-size="10"><img src="images/pen-large.png" width="49" alt=""></a>
  <a class="colors" href="#simple_sketch" data-color="#8f395b" style="background: #8f395b;"></a>
  <a class="colors" href="#simple_sketch" data-color="#c44f4f" style="background: #c44f4f;"></a>
  <a class="colors" href="#simple_sketch" data-color="#ff66a2" style="background: #ff66a2;"></a> style="background: #46a843;"></a>
</div>

在这里，我正在取代id＆＃39;＃＆＃39;与班级＆＃39;。＆＃39;如

$('.paint_tools a').attr('href').replace('#','.');

但似乎它不起作用，任何人都可以指出我缺少的地方选择大小和颜色，顺便说一句，我喜欢只有这个作为书中所有画布的唯一工具集。

任何形式的帮助都非常感谢，许多人提前感谢。

Answer 1

问题解决了：这是我如何解决它：

我发现无需更换＃标签，所以我删除了那部分，我只是使用点击处理程序来更新我的标记大小和颜色，如：

$(function() {
        $('.paint_tools a').on('click', function() {
            var a = $(this).data('size');
            $('.simple_sketch').each(function(){
            $(this).sketch().set('size',a);
            })
      });
    });

        $(function() {
        $('.paint_tools a').on('click', function() {
            var a = $(this).data('color');
            $('.simple_sketch').each(function(){
            $(this).sketch().set('color',a);
            })
      });
    });

希望有人像我一样使用素描库。

href锚标签/ css选择器问题与canvas类而不是id

1 个答案: