画笔

画笔

关注
发信
关注(28)粉丝(399)

SVG - 如何绘制画笔污渍?

本文介绍了SVG - 如何绘制画笔污渍?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用 paperjs 的库，我需要用 svg 路径的方向画一点画笔污点.

有没有办法做到这一点?

解决方案

我用 javascript 做了一个路径动画(也在 IE 上运行)你也可以以这种方式为您的图像制作动画.

对于画笔染色的旋转，取路径的下一个点并使用 transform:rotate(degree,x,y)

旋转你的画笔染色

 <头><meta charset="utf-8"><meta name="viewport" content="width=device-width"><title>纽博格林动画</title><meta name="author" content="Frank Wisniewski"><meta name="publisher" content="Frank Wisniewski"><meta name="copyright" content="Frank Wisniewski"><meta name="description" content="Auf dieser Seite wird eine kleine Animation des Nürburgrings um Adenau dargestellt.Die Animation wurde komplett in Javascript und SVG erstellt."><meta name="keywords" content="SVG, Animation, Webdesign, Adenau, Nürburgring, Eifel, Frank, Wisniewski, Programmierung, Grafik, Gestaltung, Kunst"><meta name="page-topic" content="Forschung Technik"><meta name="page-type" content="Karte Plan"><meta name="audience" content="Alle, Erwachsene, Fans"><meta http-equiv="content-language" content="de"><meta name="robots" content="index, follow"><meta name="DC.Creator" content="Frank Wisniewski"><meta name="DC.Publisher" content="Frank Wisniewski"><meta name="DC.Rights" content="Frank Wisniewski"><meta name="DC.Description" content="Auf dieser Seite wird eine kleine Animation des Nürburgrings um Adenau dargestellt.Die Animation wurde komplett in Javascript und SVG rtstellt."><meta name="DC.Language" content="de"><风格>body{font-family:"Calibri", "Helvetica", sans-serif;}.content{width:300px;margin-left:auto;margin-right:auto;}#svgG{width:200px;margin-left:auto;margin-right:auto;}SVG{宽度:200像素；高度:200像素；溢出:隐藏；}h1,p{text-align:center;}p{字体大小:8px;}.p10{font-size:14px;font-weight:bold;}</风格><身体><div class="内容"><div id="svgG"></div><小时><p>(c) Frank Wisniewski<br>Lohmühlenstraße 2</br>53518 Adenau</p>

<脚本>/* Programm und Grafiken sind geistiges Eigentum von Frank Wisniewski, Lohmühlenstraße 2, 53518 Adenau und dürfen ohne Genehemigung nicht genutzt werden */var carCount = 8;变量 i;var colours = ["Black", "Navy", "Blue", "BlueViolet", "CornFlowerBlue","Red", "LimeGreen", "IndianRed", "Sienna"];var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");var _create = function (type){return document.createElementNS("http://www.w3.org/2000/svg", type);}var _set = function (el,par){for (key in par) {el.setAttribute(key.replace('X','-'),par[key]);}svg.appendChild(el);}与(SVG){setAttribute('宽度', '250');setAttribute('高度', '250');setAttribute("viewBox", "0 0 250 250");setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink");}svg.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink");svgG.appendChild(svg);var adenaubullet = _create("circle");_set(adenaubullet,{r:7,fill:'#f00',stroke:'#f00',cx:110,cy:8,strokeXwidth:1});var pfad = _create("路径");pfad.setAttribute("d","M23.748,97.732c-4.235-2.956-3.875-3.774,0.149-6.424c4.415-2.912,9.246-4.657,13.445-3.875-3.774,13.445-3.796.79998.157-11.154c0.658-1.969,0.469-3.708,0.928-5.656c0.49-2.073,2.818-3.084,2.289-5.231c-1.943-1.943-7.2.192.5.23-1.943-7.2.719.5-7.8519.5.656-3.708-5.656c0.49.9.687-5.879-15.675c3.809-2.103,3.375-6.84,6.656-9.057c4.651-3.144,8.367,1.576,11.515,4.158c3.646.7,3.6649.7,3.6649.7,3.6649.8.7,3.646.8.68.656.8.679.6.656.8.367.710.073,3.112,11.988-0.465c1.826-3.412,1.65-7.33,6.191-8.478c4.341-1.098,8.877-0.364,12.739-3.823.6,3.12.739-3.823.6,3.823.6,3.8216,3.823.6,3.823.7.34,3.33.6.191-8.478c4.341.3.904-0.348,10.177,0.854,14.706c2.772,10.454,17.172,9.7,25.21,10.781c9.04,1.215,17.95,12.277,26.9.5.277,26.70.2.5-26.70.277-26.70.277-26.70.277-26.70.75-26.70.75-26.70264-0.15,7.907-1.917,7.61,0.729c-0.316,2.853-6.305,5.333-8.338,6.711c-4.479,3.022-0.753,6.298.2.59.16.28.28.16.18.298.28.16.18.28.298.2.853-6.305,5.333-8.338,6.711Cc3.836-2.448,4.706-5.857,5.413-9.774c1.985-10.859,17.365-0.166,21.786,3.753c4.462,3.959,0.835,10.39,3.10,3.19,3.16,3.19,3.81.39,3.19,3.81.39.835,10.859,17.365-0.166,21.786,4.706-5.857,5.413-9.774c1.985-10.859,17.365-0.166,21.786,3.753c4.462.,4.377c1.404,1.99,0.811,7.445-1.462,8.753c-3.792,2.168-6.586-2.64-9.273,2.805c-1.183,2.4-3.285,4.19-3.92,6.859,10,70,700-2.64,70,700-6.859-2.64-9.273,2.805c-1.183,2.4-3.285,4.19-3.92,6.859-10,700-6.859-2.64-9.273,2.805c-1.183,2.4.1.086,0.723-2.258,1.257-3.517,1.6c-1.907,1.228-3.592,3.089-5.258,4.608c-2.656,2.422-4.04,5.796,16.3.6.3.6.3.6.796-3.6.5.796-3.59.6-3.796-3.592,3.089-5.258,4.608c.c-1.563,0.396-3.123,0.396-4.681,0c-2.271-0.944-1.521-3.241-4.827-2.771c-2.364,0.319-6.657,3.103,16.4,16,16,14,34,16,14,16,14,34,16,16,14,34,16,16,14,34,1.521-3.563,0.396-3.123,0.396-4.681,0c-2.271-0.944-1.521-3.241-4.827-2.771c-211.852c-4.087,6.844-13.375,9.795-19.857,13.7c-7.564,4.557-15.104,9.15-22.606,13.8c-7.321,4.53-9.795-19.857,13.7c-7.564,4.557-15.104,9.15-22.606,13.8c-7.321,4.53-9.794.589-7.564,7.564,20.73-7.564.53-7.564.2.712.4,15.145c-2.264,1.35-1.265,4.361-4.132,5.722c-2.816,1.335-5.621-0.041-7.605-2.184c-0.949-1.45.32-1.482.35-1.482.35-1.482.35-1.45.327-1.482.35-1.45.275.234-8.833,5.743c-3.432,0.466-6.206-1.944-9.507-1.572c-3.674,0.413-5.729-0.104-7.561-3.373c-2.356-c.3525-c.3525-c.3525-c.507-1.572c-3.6755.549-4.272-8.34-7.002c-5.066-4.96-13.847-9.133-14.34-17.222c-0.215-3.656,2.038-7.426,2.379-c.391.37-c.391.37-c.371.37-c.13.37-13.847-9.133-14.34-17.222c-0.215-3.6563.801-3.489-7.284-4.994-11.039C29.209,99.368,26.926,99.928,23.748,97.732")；_set(pfad,{fill:'none',stroke:'#666',strokeXwidth:6});var bordstein=pfad.cloneNode(true);_set(bordstein,{stroke:'#ddd',strokeXwidth:4});var Grandprix = _create("path");Grandprix.setAttribute("d","M32.246,245.125c-2.99-2.644,4.779-6.693,6.57-8.077c3.212-2.479,6.842-4.163,5.87-8.894.94-8.894.87-8.94918c12.302c1.225-2.359,2.457-4.719,3.468-7.177c1.085-2.64,0.846-3.498-1.781-4.92c-2.916-1.579-8.0644,2.579-8.0643.73.73.73.73-2.73-8.085-2.64,0.846-3.498-1.781.11.752-11.297c3.277-2.547,7.475-2.651,11.457-3.249c1.722-0.26,13.399-0.733,13.39-2.918c-0.015-2.547,7.475-2.651,11.457-3.249c1.722-0.26,13.399-0.733,13.39-2.918c-0.015-8.261.75-3.75-3.76.75-3.761.056,5.688,1.308c0.445,2.497-1.268,3.257-2.928,4.664c-7.362,6.223-15.047,12.292-22.803,18.0594.50.3-2.57-2.928,4.664c-7.362,6.223-15.047,12.292-22.803,18.0594,3.50-3,50.3-2.57-2.928.3.50.3-5.3-5.3-5.3-5.3-40.5.3-75.225-8.695,1.275-11.084c-2.188-1.332-4.133-0.486-6.367,0.376c-1.574,0.607-5.299,1.734-6.084,2.10.84,2.59.84,2.59.84,2.59.840.069,3.515-1.991,3.427,0.323c-0.094,2.511,0.521,5.18-0.138,7.646c-0.792,2.955-2.661,5.646-4.29.2.6-4.29.2.6-4.29.2.7.646-4.29.2.6-4.29.2.7.646-4.29.3.2.6-3.29.2.789,2.563,4.673,2.549,5.777,4.88c1.078,2.279-4.431,3.46-5.976,4.184c-2.971,1.387-5.743,2.851-8.824.851-8.8273.851-8.8273.851-8.8273.851-8.272C35.841,244.419,34.963,247.523,32.246,245.125")；_set(grandprix,{fill:'none',stroke:'#000',strokeXwidth:4});var Grandprixbordstein=grandprix.cloneNode(true);_set(grandprixbordstein,{stroke:'#f00',strokeXwidth:3});var myText=_create("text");与(我的文本){setAttribute("font-family", "Arial, sans-serif");setAttribute("字体粗细", "粗体");setAttribute("字体样式", "斜体");setAttribute("文本锚点", "中间");}var myTextNode = document.createTextNode("");myText.appendChild(myTextNode);var nordschleife=myText.cloneNode(true);_set(nordschleife,{x:120,y:77,fontXsize:16});nordschleife.textContent="NORDSCHLEIFE";var Grandprixtext=nordschleife.cloneNode(true);_set(grandprixtext,{x:110,y:220,fontXsize:16});Grandprixtext.textContent="GRAND-PRIX";var Grandprixtext1=nordschleife.cloneNode(true);_set(grandprixtext1,{x:110,y:240,fontXsize:16});Grandprixtext1.textContent="STRECKE";var adenautext=nordschleife.cloneNode(true);_set(adenautext,{x:165,y:14,fontXsize:16});adenautext.textContent="ADENAU";var roundSquare=[];var mySquare=_create("rect");var roundBullet=[];var roundBulletText=[];for (i=1;i 1000){pos[i]=1;step[i]=speed+Math.random()/2;}如果 (lapPos[i]>1750){lapPos[i]=750;圈数[i]++;roundBulletText[i].textContent=laps[i];}pt=pfad.getPointAtLength(len/1000*pos[i])汽车[i].setAttribute("cx", pt.x);汽车[i].setAttribute("cy", pt.y);}//repeater = requestAnimationFrame(animate);中继器 = 设置超时(动画，1000/60)；}动画()；</html>

I'm working with paperjs's library, and I need to draw a little brush stain with svg path's directions.

Is there any way to do that?

解决方案

I have made an Path animation with javascript (also running on IE) You can alsoanimate your image in this way.

For the rotation of your brush stain, take the next points of the path and rotate your brush stain with transform:rotate(degree,x,y)

  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Nürburgring Animation</title>
    <meta name="author" content="Frank Wisniewski">
    <meta name="publisher" content="Frank Wisniewski">
    <meta name="copyright" content="Frank Wisniewski">
    <meta name="description" content="Auf dieser Seite wird eine kleine Animation des Nürburgrings um Adenau dargestellt. Die Animation wurde komplett in Javascript und SVG erstellt.">
    <meta name="keywords" content="SVG, Animation, Webdesign, Adenau, Nürburgring, Eifel, Frank, Wisniewski, Programmierung, Grafik, Gestaltung, Kunst">
    <meta name="page-topic" content="Forschung Technik">
    <meta name="page-type" content="Karte Plan">
    <meta name="audience" content="Alle, Erwachsene, Fans"><meta http-equiv="content-language" content="de">
    <meta name="robots" content="index, follow">
    <meta name="DC.Creator" content="Frank Wisniewski">
    <meta name="DC.Publisher" content="Frank Wisniewski">
    <meta name="DC.Rights" content="Frank Wisniewski">
    <meta name="DC.Description" content="Auf dieser Seite wird eine kleine Animation des Nürburgrings um Adenau dargestellt. Die Animation wurde komplett in Javascript und SVG rtstellt.">
    <meta name="DC.Language" content="de">

    
    <style>
      body{font-family:"Calibri", "Helvetica", sans-serif;}
      .content{width:300px;margin-left:auto;margin-right:auto;}
      #svgG{width:200px;margin-left:auto;margin-right:auto;}
      svg{width:200px;height:200px;overflow:hidden;}
      h1,p{text-align:center;}
      p{font-size:8px;}
      .p10{font-size:14px;font-weight:bold;}
    </style> 
  </head>
  <body>
    <div class="content">
    <div id="svgG"></div>
    <hr>
    <p>(c) Frank Wisniewski<br>Lohmühlenstraße 2</br>53518 Adenau</p>
    
    </div>
  <script>    
  /* Programm und Grafiken sind geistiges Eigentum von Frank Wisniewski, Lohmühlenstraße 2, 53518 Adenau und dürfen ohne Genehemigung nicht genutzt werden */

      var carCount = 8;
      var i;
      var colors = ["Black", "Navy", "Blue", "BlueViolet", "CornFlowerBlue","Red", "LimeGreen", "IndianRed", "Sienna"];
      var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
      var _create = function (type){return document.createElementNS("http://www.w3.org/2000/svg", type);}
      var _set = function (el,par){for (key in par) {el.setAttribute(key.replace('X','-'),par[key]);}svg.appendChild(el);}
      with(svg){ 
        setAttribute('width', '250');
        setAttribute('height', '250');
        setAttribute("viewBox", "0 0 250 250"); 
        setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink");
      } 
      svg.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink");
      svgG.appendChild(svg);
      var adenaubullet = _create("circle");
      _set(adenaubullet,{r:7,fill:'#f00',stroke:'#f00',cx:110,cy:8,strokeXwidth:1});
      var pfad = _create("path");
      pfad.setAttribute("d","M23.748,97.732c-4.235-2.956-3.875-3.774,0.149-6.424c4.415-2.912,9.246-4.657,13.445-7.991c3.775-2.997,6.616-6.559,8.157-11.154c0.658-1.969,0.469-3.708,0.928-5.656c0.49-2.073,2.818-3.084,2.289-5.231c-1.943-7.859,12.718-12.905,15.122-20.157c3.09-9.145-16.734-9.687-5.879-15.675c3.809-2.103,3.375-6.84,6.656-9.057c4.651-3.144,8.367,1.576,11.515,4.158c3.215,2.642,3.816-0.669,7.024-1.456c3.189-0.786,10.073,3.112,11.988-0.465c1.826-3.412,1.65-7.33,6.191-8.478c4.341-1.098,8.877-0.364,12.739-3.081c1.894-1.331,6.225-6.532,8.439-2.986c2.437,3.904-0.348,10.177,0.854,14.706c2.772,10.454,17.172,9.7,25.21,10.781c9.04,1.215,17.95,12.277,26.751,6.006c3.794-2.695,4.927-5.525,10.095-6.125c1.264-0.15,7.907-1.917,7.61,0.729c-0.316,2.853-6.305,5.333-8.338,6.711c-4.479,3.022-0.753,6.298,1.884,2.81c3.211-4.251,8.561-3.146,12.597-5.729c3.836-2.448,4.706-5.857,5.413-9.774c1.985-10.859,17.365-0.166,21.786,3.753c4.462,3.959,0.835,6.313,1.039,10.839c0.191,3.879,3.526,1.893,5.27,4.377c1.404,1.99,0.811,7.445-1.462,8.753c-3.792,2.168-6.586-2.64-9.273,2.805c-1.183,2.4-3.285,4.19-3.92,6.858c-0.735,3.091,1.969,7.785-0.122,10.477c-1.086,0.723-2.258,1.257-3.517,1.6c-1.907,1.228-3.592,3.089-5.258,4.608c-2.656,2.422-4.04,5.798-6.476,8.439c-3.986,4.336-10.271,6.805-16.063,7.526c-1.563,0.396-3.123,0.396-4.681,0c-2.271-0.944-1.521-3.241-4.827-2.771c-2.364,0.319-6.657,3.103-4.31,5.873c3.164,3.744,14.496,4.718,10.232,11.852c-4.087,6.844-13.375,9.795-19.857,13.7c-7.564,4.557-15.104,9.15-22.606,13.8c-7.321,4.53-16.081,8.639-22.572,14.298c-4.59,4.036-7.287,12.104-12.4,15.145c-2.264,1.35-1.265,4.361-4.132,5.722c-2.816,1.335-5.621-0.041-7.605-2.184c-0.949-1.027-2.493-4.413-4.188-2.536c-2.399,2.652-5.102,5.234-8.833,5.743c-3.432,0.466-6.206-1.944-9.507-1.572c-3.674,0.413-5.729-0.104-7.561-3.373c-1.255-2.242-3.559-3.075-5.613-4.396c-3.346-2.152-5.549-4.272-8.34-7.002c-5.066-4.96-13.847-9.133-14.34-17.222c-0.215-3.656,2.038-7.426,2.341-11.079c0.397-4.697-0.287-9.311-1.945-13.715c-1.431-3.801-3.489-7.284-4.994-11.039C29.209,99.368,26.926,99.928,23.748,97.732"); 
      _set(pfad,{fill:'none',stroke:'#666',strokeXwidth:6});
      var bordstein=pfad.cloneNode(true);
      _set(bordstein,{stroke:'#ddd',strokeXwidth:4});
      var grandprix = _create("path");
      grandprix.setAttribute("d","M32.246,245.125c-2.99-2.644,4.779-6.693,6.57-8.077c3.212-2.479,6.842-4.163,5.87-8.961c-0.891-4.404,1.944-8.48,3.929-12.302c1.225-2.359,2.457-4.719,3.468-7.177c1.085-2.64,0.846-3.498-1.781-4.92c-2.916-1.579-8.019-3.264-4.406-7.271c3.643-4.035,7.452-7.957,11.752-11.297c3.277-2.547,7.475-2.651,11.457-3.249c1.722-0.26,13.399-0.733,13.39-2.918c-0.015-3.294,6.497-2.777,8.654-3.153c1.517-0.266,5.267-1.056,5.688,1.308c0.445,2.497-1.268,3.257-2.928,4.664c-7.362,6.223-15.047,12.292-22.803,18.019c-0.534,0.395-8.754,5.805-8.457,3.525c0.423-3.213,5.225-8.695,1.275-11.084c-2.188-1.332-4.133-0.486-6.367,0.376c-1.574,0.607-5.299,1.734-6.084,3.411c-0.74,1.58,0.625,3.774,2.29,3.882c1.022,0.069,3.515-1.991,3.427,0.323c-0.094,2.511,0.521,5.18-0.138,7.646c-0.792,2.955-2.661,5.646-4.08,8.322c-0.9,1.696-3.023,4.913-2.296,7.02c0.89,2.563,4.673,2.549,5.777,4.88c1.078,2.279-4.431,3.46-5.976,4.184c-2.971,1.387-5.743,2.851-8.27,4.98c-1.822,1.534-3.684,3.438-5.079,5.381C35.841,244.419,34.963,247.523,32.246,245.125");
      _set(grandprix,{fill:'none', stroke:'#000', strokeXwidth:4});
      var grandprixbordstein=grandprix.cloneNode(true);
      _set(grandprixbordstein,{stroke:'#f00',strokeXwidth:3});
      var myText=_create("text");
      with (myText){
        setAttribute("font-family", "Arial, sans-serif");
        setAttribute("font-weight", "bold");
        setAttribute("font-style", "italic");
        setAttribute("text-anchor", "middle");
      }
      var myTextNode = document.createTextNode("");
      myText.appendChild(myTextNode);
      var nordschleife=myText.cloneNode(true);
      _set(nordschleife,{x:120,y:77,fontXsize:16});
      nordschleife.textContent="NORDSCHLEIFE";
      var grandprixtext=nordschleife.cloneNode(true);
      _set(grandprixtext,{x:110,y:220,fontXsize:16});
      grandprixtext.textContent="GRAND-PRIX";
      var grandprixtext1=nordschleife.cloneNode(true);
      _set(grandprixtext1,{x:110,y:240,fontXsize:16});
       grandprixtext1.textContent="STRECKE";
      var adenautext=nordschleife.cloneNode(true);
      _set(adenautext,{x:165,y:14,fontXsize:16});
      adenautext.textContent="ADENAU";
      var roundSquare=[];
      var mySquare=_create("rect");
      var roundBullet=[];
      var roundBulletText=[];
      for (i=1;i <= carCount;i++){
        
        roundBullet[i]=adenaubullet.cloneNode(true);
        _set(roundBullet[i],{r:5,strokeXwidth:0,fill:colors[i],stroke:colors[i],cx:180,cy:120+i*5*3});
        
        roundSquare[i]=mySquare.cloneNode(true);
        _set(roundSquare[i],{x:203,y:113+i*5*3,fill:'#ddd',stroke:'none',height:13,width:30});
        
        roundBulletText[i]=adenautext.cloneNode(true);
        _set(roundBulletText[i],{x:210,y:125+i*5*3,fontXsize:14,fontXstyle:'normal'});
        roundBulletText[i].textContent="0";
      }
      var lapsText=nordschleife.cloneNode(true);
      _set(lapsText,{x:217,y:122,fontXsize:14,fontXstyle:'normal'});
      lapsText.textContent="LAPS";
      var cars = [];
      var step=[];
      var laps=[];
      var len = pfad.getTotalLength();
      var speed = 1.5;
      var pos = [];
      var pt;
      var repeater;
      var lapPos = [];
      var carProto = _create("circle");
      with (carProto){
        setAttribute("r", 3);
        setAttribute("stroke-width", "1");
      }
      for(i = 1; i <= carCount; i++){
        cars[i]=carProto.cloneNode(true);
        pos[i]=i*5+750;
        laps[i]=0;
        lapPos[i]=750;
        pt=pfad.getPointAtLength(len/1000*pos[i])
        _set(cars[i],{cx:pt.x,cy:pt.y,stroke:colors[i],fill:colors[i]});
        step[i]=speed+Math.random()/1;
      }
      var animate=function(){
        for(i = 1; i <= carCount; i++){
          pos[i]+=step[i];
          lapPos[i]+=step[i];
          if(pos[i]>1000){
            pos[i]=1;
            step[i]=speed+Math.random()/2;  
          }
          if (lapPos[i]>1750){
            lapPos[i]=750;
            laps[i]++;
            roundBulletText[i].textContent=laps[i];
          }
          pt=pfad.getPointAtLength(len/1000*pos[i])
          cars[i].setAttribute("cx", pt.x);
          cars[i].setAttribute("cy", pt.y);
        }
        //repeater = requestAnimationFrame(animate);
        repeater = setTimeout(animate,1000/60);
      }
      animate();

  </script>
  </body>
  </html>

这篇关于SVG - 如何绘制画笔污渍?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

10-22 16:22
Powered by LMLPHP ©2024 画笔 0.004451