Question

有一个与我here非常相似的问题。我发布这个的原因是因为链接中的一半问题从未得到解答。我正处于线条始终如一的地步，但你无法看到你在绘画时所做的事情。代码是这样的：

canvas.addEventListener('mousedown', function(e) {
    ctx.beginPath();
    ctx.moveTo(mouse.x, mouse.y);
    canvas.addEventListener('mousemove', onPaint, false);
}, false);

canvas.addEventListener('mouseup', function() {
    canvas.removeEventListener('mousemove', onPaint, false);
    ctx.stroke();
    ctx.closePath();
}, false);

var onPaint = function() {
    ctx.lineTo(mouse.x, mouse.y);
};

这很有效，除了我无法看到我画的是什么。我看到有些人谈论使用临时画布明显地绘制，然后将笔画复制到主画布，但我还没有看到一个实际有用的例子。

Answer 1

以下是kinetic.js的代码：

Html：

<html>
  <head>
    <META http-equiv="Content-Type" content="text/html; charset=utf-16">
    <script src="jquery-2.0.3.js" type="text/javascript"></script>
    <script src="cn.js" type="text/javascript"></script>
    <script src="kinetic.js" type="text/javascript"></script>
    <style>  
  </style>
</head>
<body>
<div id="container"  height="300px" style="width:300px;height:300px;border:3px solid"></div>
</body>
</html>

cn.js：

$(function()
{

    var lineSx,lineSy,lineFx,lineFy;
    var ismouseDown=false;
    var line;
    var layerList=new Array();


    setInterval(function(){// for clearing the temp layer 

        var l=null,topLayer;
        var i=1;
        l=layerList.pop();      
        while(l){
            //console.log(l);
            if(i!=1){
                l.destroy();
                l=null; 
            }
            else{
                topLayer=l;
            }           
            l=layerList.pop();
            i++;
        }
        layerList.push(topLayer);

    },2);

    var stage = new Kinetic.Stage({
        container: 'container',
        width: 300,
        height: 300
      });
      var layer = new Kinetic.Layer();


      var rect = new Kinetic.Rect({
        x: 0,
        y: 0,
        width: 300,
        height: 300,
        fill: 'black',        
      });    
    rect.on("mousedown",function(e){

        console.log(e);
        ismouseDown=true;
        lineSx=e.clientX;   
        lineSy=e.clientY;   
    });
    rect.on("mousemove",function(e){

        if(ismouseDown){

            console.log(e);
            var cx=e.clientX;   
            var cy=e.clientY;

            var tempLayer = new Kinetic.Layer();

            //stage.remove(tempLayer);
            line=createLine(lineSx,lineSy,cx,cy);
            tempLayer.add(line);
            stage.add(tempLayer);       
            layerList.push(tempLayer);                      
        }

    });
    rect.on("mouseup",function(e){
        ismouseDown=false;
        console.log(e);
        lineFx=e.clientX;   
        lineFy=e.clientY;

        line=createLine(lineSx,lineSy,lineFx,lineFy);
        layer.add(line);
         stage.add(layer);  
    });

    layer.add(rect);    
    stage.add(layer);


});
function createLine(sx,sy,fx,fy){
    var line = new Kinetic.Line({
        points: [sx,sy,fx,fy],
        stroke: 'white',
        strokeWidth: 3,
        lineCap: 'round',
        lineJoin: 'round'
     });
     return line;

}

使用鼠标在画布上绘制具有不透明度的线条

1 个答案: