31:[] 2f:{"title":"Usando arquivos SVG","cells":[{"id":0,"value":"md`# Usando arquivos SVG`","pinned":true,"hidden":false,"mode":"ojs"},{"id":89,"value":"md`## 1a Opção: Imagens e canvas`","pinned":true,"hidden":false,"mode":"ojs"},{"id":77,"value":"comment('Função para importar um svg como uma imagem')","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"/**\n * From \n * \"@mbostock/cross-origin-images\"\n **/\nfunction fetch_image(src, cors=true) {\n return new Promise((resolve, reject) => {\n const image = new Image;\n if (cors) image.crossOrigin = \"anonymous\";\n image.src = src;\n image.onload = () => resolve(image);\n image.onerror = reject;\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":80,"value":"comment('Um svg contendo o desenho de uma cápsula de remédio')","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"pillUrl = \"https://www.svgrepo.com/show/41104/pill.svg\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"image = fetch_image(pillUrl,false)","pinned":true,"hidden":false,"mode":"ojs"},{"id":83,"value":"comment('Função para gerar uma outra imagem recolorida,rodada e escalada')","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"tintedRotatedScaledImage = function(image,tint=\"yellow\",angle=Math.PI/3,scale=0.5) {\n let w = image.width;\n let h = image.height;\n const ctx = DOM.context2d(w*scale,h*scale,1);\n ctx.scale(scale,scale)\n ctx.translate(w/2,h/2);\n ctx.rotate(angle);\n ctx.translate(-w/2,-h/2);\n \n ctx.fillStyle = tint;\n ctx.fillRect(0,0,w,h);\n ctx.globalCompositeOperation = \"destination-in\";\n ctx.drawImage(image, 0, 0);\n return (ctx.canvas)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":38,"value":"tintedRotatedScaledImage(image,\"green\",Math.PI/3,0.3);","pinned":true,"hidden":false,"mode":"ojs"},{"id":86,"value":"comment('100 cápsulas coloridas')","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"{\n const height = width*9/16;\n const ctx = DOM.context2d(width,height,1);\n const scale = 0.1;\n const h = image.height * scale;\n const w = image.width * scale;\n for (let i = 0; i < 100; i++) {\n let x = Math.random() * (width - 200) + 100 - w/2; \n let y = Math.random() * (height - 200) + 100 - h/2; \n let ang = Math.PI * Math.random();\n let tint = `rgb(${~~(Math.random()*255)},${~~(Math.random()*255)},${~~(Math.random()*255)})`;\n ctx.drawImage(tintedRotatedScaledImage(image,tint,ang,scale),x,y)\n }\n return ctx.canvas\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":93,"value":"md`## Segunda opção: usando svg inline`","pinned":true,"hidden":false,"mode":"ojs"},{"id":140,"value":"comment('Apenas o `path` que nos interessa')","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"pillPath = ``","pinned":true,"hidden":false,"mode":"ojs"},{"id":150,"value":"comment('Coloca-se o path numa seção `` de um svg e instancia-se com ``')","pinned":true,"hidden":false,"mode":"ojs"},{"id":108,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":176,"value":"comment(\"Várias cápsulas coloridas usando `d3`\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":153,"value":"{\n const height = width*9/16;\n const svgNode = html``\n const svg = d3.select(svgNode);\n const w = 520;\n const h = 520;\n const scale = 0.1;\n for (let i = 0; i < 100; i++) {\n let x = Math.random() * (width - 200) + 100 - w*scale/2; \n let y = Math.random() * (height - 200) + 100 - h*scale/2; \n let ang = 180 * Math.random();\n let tint = `rgb(${~~(Math.random()*255)},${~~(Math.random()*255)},${~~(Math.random()*255)})`;\n svg.append('use')\n .attr(\"xlink:href\", \"#pill\")\n .attr(\"fill\", tint)\n .attr(\"transform\", `translate(${x} ${y}) scale(${scale}) rotate(${ang} 260 260)`)\n }\n return svgNode\n}\n ","pinned":true,"hidden":false,"mode":"ojs"},{"id":70,"value":"md`## Bibliotecas`","pinned":true,"hidden":false,"mode":"ojs"},{"id":105,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":73,"value":"import {comment,util_style} from \"@esperanc/notebook-css-utilities\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":75,"value":"util_style","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}