Html 是否已经有针对 AngularJS 的画布绘图指令?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/16587961/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:26:09  来源:igfitidea点击:

Is there already a canvas drawing directive for AngularJS out there?

htmlcanvasangularjsdrawingpaint

提问by JustGoscha

Is there already a directive to draw/paint things on a canvas? So you can implement something like Paint or even something bigger like Photoshop etc., but a very basic example would suffice.

是否已经有在画布上绘制/绘制东西的指令?所以你可以实现像 Paint 这样的东西,甚至像 Photoshop 等更大的东西,但是一个非常基本的例子就足够了。

I haven't found one in my search and if there's already one that is considered best practice I would like to use it. Else I have to implement one myself.

我还没有在我的搜索中找到一个,如果已经有一个被认为是最佳实践的,我想使用它。否则我必须自己实现一个。

回答by JustGoscha

Ok I did one and it is actually pretty easy:

好的,我做了一个,实际上很简单:

app.directive("drawing", function(){
  return {
    restrict: "A",
    link: function(scope, element){
      var ctx = element[0].getContext('2d');

      // variable that decides if something should be drawn on mousemove
      var drawing = false;

      // the last coordinates before the current move
      var lastX;
      var lastY;

      element.bind('mousedown', function(event){
        if(event.offsetX!==undefined){
          lastX = event.offsetX;
          lastY = event.offsetY;
        } else { // Firefox compatibility
          lastX = event.layerX - event.currentTarget.offsetLeft;
          lastY = event.layerY - event.currentTarget.offsetTop;
        }

        // begins new line
        ctx.beginPath();

        drawing = true;
      });
      element.bind('mousemove', function(event){
        if(drawing){
          // get current mouse position
          if(event.offsetX!==undefined){
            currentX = event.offsetX;
            currentY = event.offsetY;
          } else {
            currentX = event.layerX - event.currentTarget.offsetLeft;
            currentY = event.layerY - event.currentTarget.offsetTop;
          }

          draw(lastX, lastY, currentX, currentY);

          // set current coordinates to last one
          lastX = currentX;
          lastY = currentY;
        }

      });
      element.bind('mouseup', function(event){
        // stop drawing
        drawing = false;
      });

      // canvas reset
      function reset(){
       element[0].width = element[0].width; 
      }

      function draw(lX, lY, cX, cY){
        // line from
        ctx.moveTo(lX,lY);
        // to
        ctx.lineTo(cX,cY);
        // color
        ctx.strokeStyle = "#4bf";
        // draw it
        ctx.stroke();
      }
    }
  };
});

And then you can use it on canvas like this:

然后你可以像这样在画布上使用它:

<canvas drawing></canvas>

Here's a demoon Plunkr: http://plnkr.co/aG4paH

这是Plunkr的演示http://plnkr.co/aG4paH

回答by ganaraj

Angular is ideally suited for writing applications in declarative style. Once you hit the canvas element you cannot go any further with declarative and you have to switch towards an imperative way of writing mechanism. If the majority of your application is providing UI, which you define in html in the rest of your application I would highly encourage you to use AngularJS. Its an amazing framework for that.

Angular 非常适合以声明式风格编写应用程序。一旦你点击了 canvas 元素,你就不能再使用声明式的了,你必须切换到一种命令式的编写机制。如果您的大部分应用程序都提供 UI,而您在应用程序的其余部分用 html 定义,我强烈建议您使用 AngularJS。它是一个惊人的框架。

On the other hand if the majority of your code is going to be inside the canvas element, then perhaps AngularJS is not the ideal tool for you. If you really insist on using AngularJS for the majority of your application I would suggest you to consider using something like D3 which is an excellent alternative and uses SVG behind the scenes ( which is declarative in nature and hence a great sidekick for AngularJS ).

另一方面,如果您的大部分代码都在 canvas 元素中,那么 AngularJS 可能不是您的理想工具。如果你真的坚持在你的大部分应用程序中使用 AngularJS,我建议你考虑使用像 D3 这样的东西,它是一个很好的替代品,并在幕后使用 SVG(它本质上是声明性的,因此是 AngularJS 的一个很好的搭档)。

回答by pwambach

Some time ago i built a configurable directive for that.

前段时间我为此构建了一个可配置的指令。

https://github.com/pwambach/angular-canvas-painter

https://github.com/pwambach/angular-canvas-painter

The directive creates the canvas element and adds handlers for mousedown/mousemove/mouseup events (and corresponding touch events) to the element. Mousedown and following mousemove events draw bezier curves with the canvasContext.quadraticCurveTo()method for smoother strokes (instead of just painting circles for every point). For details on the drawing algorithm have a look at this article: http://codetheory.in/html5-canvas-drawing-lines-with-smooth-edges/

该指令创建 canvas 元素并将 mousedown/mousemove/mouseup 事件(和相应的触摸事件)的处理程序添加到该元素。Mousedown 和跟随 mousemove 事件使用canvasContext.quadraticCurveTo()更平滑笔触的方法绘制贝塞尔曲线 (而不是只为每个点绘制圆圈)。有关绘图算法的详细信息,请查看本文:http: //codetheory.in/html5-canvas-drawing-lines-with-smooth-edges/

回答by Pablo Ascencao

That's a really nice implementation! I could add the method if you want to convert the canvas on an image

这是一个非常好的实现!如果您想在图像上转换画布,我可以添加该方法

    function convertCanvasToImage(canvas) {
       var image = new Image();
       image.src = canvas.toDataURL("image/png");
       return image;
    }

This will make you a image tag with the source as base64 element.

这将使您成为一个图像标记,源为 base64 元素。

Hope it helps you

希望对你有帮助