Question

这是网页设计应用程序的入门模板。（几乎除了绘图问题外）

元素被绘制到舞台上。

// Handles Drawable Elements
$("#canvas").on('mousedown touchstart', function(e) {
  if(drawable) {
    drawing = true;
    mS.x = e.pageX;
    mS.y = e.pageY;
    dBox = $("<" + $('.draw-elements input[type=radio]:checked').val() + " class='box' />")
            .html("Certains textes");
    $(this).append(dBox);

    // Do not select text when drawing
    return false;
  }
});
$(document).on('mousemove touchmove', function(e) {
  if(drawing && drawable){
    var mPos = {x:e.pageX, y:e.pageY};
    var css = {};
      css.position   = 'absolute';
      css.left       = (mPos.x > mS.x) ? mS.x : mPos.x;
      css.top        = (mPos.y > mS.y) ? mS.y : mPos.y;
      css.width      = Math.abs(mPos.x - mS.x);
      css.height     = Math.abs(mPos.y - mS.y);
      css.border = '1px dotted rgb(0, 34, 102)';
      dBox.css(css);

    // Do not select text when drawing
    return false;
  }
}).on('mouseup touchend', function(e) {
  drawing  = false;
});

只要没有调用我的选择工具，我就可以毫无问题地绘制元素，但是当它被调用并且我回来绘制div时，我不能再将元素绘制到舞台上。

经过一些修补后，我注意到问题在于我的拖动功能对于每个被选中的元素。

var HandleSelectedElement = function() {
  if ($(".select-tool.activetool").is(":visible")) {
    if(elmstyle) {
      $('#canvas').children().drag("start",function( ev, dd ){
      dd.attrc = $( ev.target ).prop("className");
      dd.attrd = $( ev.target ).prop("id");
      dd.width = $( this ).width();
      dd.height = $( this ).height();
    })
    .drag(function( ev, dd ){
      var props = {};
      if ( dd.attrc.indexOf("E") > -1 ){
        props.width = Math.max( 32, dd.width + dd.deltaX );
      }
      if ( dd.attrc.indexOf("S") > -1 ){
        props.height = Math.max( 32, dd.height + dd.deltaY );
      }
      if ( dd.attrc.indexOf("W") > -1 ){
        props.width = Math.max( 32, dd.width - dd.deltaX );
        props.left = dd.originalX + dd.width - props.width;
      }
      if ( dd.attrc.indexOf("N") > -1 ){
        props.height = Math.max( 32, dd.height - dd.deltaY );
        props.top = dd.originalY + dd.height - props.height;
      }
      if ( dd.attrd.indexOf("stylethis") > -1 ){
        props.top = dd.offsetY;
        props.left = dd.offsetX;
      }
      $('#stylethis').css( props );
    }, {relative:true});
  }
};

我不明白什么是错的。

非常感谢任何帮助或帮助。

Answer 1

我无法找到如何解决最初的问题。所以我决定做一个工作。

这里是小提琴：http://liveweave.com/g2aKlD

我决定每次点击工具时刷新画布。我使用画布的HTML并将其设置为textarea的值。然后我将textarea的值设置为画布的html。

$("#code").val($("#canvas").html());
$("#canvas").html($("#code").val());

这样就可以完全删除所谓的初始错误。但是，上次我这样做的所有空格变成 ，也称为non-breakable space（我也看到这也会在不需要时添加不必要的换行符和段落）

我还是不明白为什么我的绘图功能在关闭拖动时不起作用。

我真的很讨厌必须这样做（刷新画布），因为那里的元素越多，刷新越多，它使用的ram就越多，这使得浏览器更难以处理cpu。

我希望有人能找到更好的解决方案。

为什么我不能在舞台上画元素？

1 个答案: