html5画布上的画笔与dynamicjs不一致

Question

I want paint brush functionality on html5 canvas with kineticjs and after reading some tutorials found that a good way to do it is by creating rectangles as various points . 我想用dynamicjs在html5画布上使用画笔功能，并且在阅读了一些教程后发现，这样做的一个好方法是将矩形创建为各个点。 But this is creating inconsistency in the line formed . 但这在形成的行中造成了不一致。 It breaks a lot if mouse is moved fast . 如果快速移动鼠标会损坏很多东西。 Here is link to the fiddle . 这是小提琴的链接。 http://jsfiddle.net/9bGdr/1/ http://jsfiddle.net/9bGdr/1/

var stage = new Kinetic.Stage({
    container:'canvas',
    width:500,
    height:500
});

var layer = new Kinetic.Layer();

var painting = false ;

stage.add(layer);

var canvas = $(stage.getContent());
    var lineThickness = 5 ;

canvas.mousedown(function(e) { 
    painting = true;

});

canvas.mousemove(function(e) { 

  if (painting) {

rect = new Kinetic.Rect({
x:e.pageX,
y:e.pageY,
width:lineThickness,
height:lineThickness,
fill:'black',
        stroke: 'black',
        strokeWidth: lineThickness,
        lineJoin: 'round',
        lineCap: 'round'
});

layer.add(rect);
layer.batchDraw();

}

});

canvas.mouseup(function(e) {
painting = false ;
});

Answer 1

When your mousemove handler detects a drag distance greater than the size of a rect, you need to draw multiple rects to cover the entire dragged distance. 当鼠标移动处理程序检测到的拖动距离大于矩形的大小时，您需要绘制多个矩形以覆盖整个拖动距离。

Here's what to do during each mousemove: 这是每次鼠标移动期间要执行的操作：

Calculate how far the mouse moved during the drag. 计算鼠标在拖动过程中移动了多远。
Calculate how many rects are needed to cover that "drag-line". 计算覆盖该“拖线”需要多少个rect。
Draw multiple rects all along the drag-line using linear interpolation. 使用线性插值在拖动线上绘制多个矩形。

In the illustration below, I dragged the bottom of the T very quickly. 在下图中，我非常快速地拖动了T的底部。

Notice that the code filled in all parts of the drag-line with multiple rects. 请注意，代码在拖动线的所有部分都填充了多个矩形。

在此处输入图片说明

Here is code and a Fiddle: http://jsfiddle.net/m1erickson/D332T/ 这是代码和小提琴： http : //jsfiddle.net/m1erickson/D332T/

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script>
<style>
#canvas{
  border:solid 1px #ccc;
  margin-top: 0px;
  width:350px;
  height:350px;
}
</style>        
<script>
$(function(){

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

    var painting = false ;
    var lineThickness = 5 ;
    var startX,startY;

    $(stage.getContent()).on('mousedown', function (event) {
        var pos=stage.getMousePosition();
        startX=parseInt(pos.x);
        startY=parseInt(pos.y);
        painting = true;
    });


    $(stage.getContent()).on('mousemove', function (event) {
        if(!painting){return;}
        var pos=stage.getMousePosition();
        var mouseX=parseInt(pos.x);
        var mouseY=parseInt(pos.y);
        var dx=mouseX-startX;
        var dy=mouseY-startY;
        var rectCount=Math.sqrt(dx*dx+dy*dy)/lineThickness;

        if(rectCount<=1){
            rect = new Kinetic.Rect({
                x:mouseX,
                y:mouseY,
                width:lineThickness,
                height:lineThickness,
                fill:'black',
                stroke: 'black',
                strokeWidth: lineThickness,
                lineJoin: 'round',
                lineCap: 'round'
            });
            layer.add(rect);
        }else{
            for(var i=0;i<rectCount;i++){
                  // calc an XY between starting & ending drag points
                  var nextX=startX+dx*i/rectCount;
                  var nextY=startY+dy*i/rectCount;
                  // add a rect at the calculated XY
                  rect = new Kinetic.Rect({
                      x:nextX,
                      y:nextY,
                      width:lineThickness,
                      height:lineThickness,
                      fill:'red',
                      stroke: 'black',
                      strokeWidth: lineThickness,
                      lineJoin: 'round',
                      lineCap: 'round'
                  });
                  layer.add(rect);
            }
        }
        layer.draw();
        startX=mouseX;
        startY=mouseY;
    });

    $(stage.getContent()).on('mouseup', function (event) {
        startX=null;
        startY=null;
        painting = false;
    });

    $(stage.getContent()).on('mouseout', function (event) {
        startX=null;
        startY=null;
        painting = false;
    });


}); // end $(function(){});

</script>       
</head>

<body>
    <div id="canvas"></div>
</body>
</html>

[ Addition based on OP's need for more speed ] [根据OP的需要增加速度]

Alternatively, there's a faster and more efficient “sketching” alternative: 另外，还有一种更快，更有效的“速写”替代方法：

The efficiency is that you draw a single polyline instead of many rectangles to cover a drag-line. 效率是您绘制一条多段线而不是许多矩形来覆盖一条拖线。

Here's a Fiddle: http://jsfiddle.net/m1erickson/CCqhg/ 这是一个小提琴： http : //jsfiddle.net/m1erickson/CCqhg/

在此处输入图片说明

Here's code to sketch with a polyline: 这是要用折线绘制草图的代码：

In mousedown: create a new polyline starting at the mousedown coordinate 在mousedown中：从mousedown坐标开始创建一条新的折线

// a flag we use to see if we're dragging the mouse
var isMouseDown=false;
// a reference to the line we are currently drawing
var newline;
// a reference to the array of points making newline
var points=[];

// On mousedown
// Set the isMouseDown flag to true
// Create a new line,
// Clear the points array for new points
// set newline reference to the newly created line
function onMousedown(event) {
    isMouseDown = true;
    points=[];
    points.push(stage.getMousePosition());
    var line = new Kinetic.Line({
        points: points,
        stroke: "green",
        strokeWidth: 5,
        lineCap: 'round',
        lineJoin: 'round'
    });
    layer.add(line);
    newline=line;
}

In mousemove: add a segment to that line reaching to thecurrent mouse coordinate. 在mousemove中：在该行上添加一条线段，以到达当前鼠标坐标。

// on mousemove
// Add the current mouse position to the points[] array
// Update newline to include all points in points[]
// and redraw the layer
function onMousemove(event) {
    if(!isMouseDown){return;};
    points.push(stage.getMousePosition());
    newline.setPoints(points);
    // use layer.drawScene
    // This avoids unnecessarily updating the hit canva
    layer.drawScene();
}

html5画布上的画笔与dynamicjs不一致

问题描述

1 个解决方案

解决方案1
1 已采纳 2013-10-12 02:57:13

html5画布上的画笔与dynamicjs不一致

问题描述

1 个解决方案

解决方案1 1 已采纳 2013-10-12 02:57:13

解决方案1
1 已采纳 2013-10-12 02:57:13