天道酬勤,学无止境

canvas

jquery tipsy tooltip not working with d3.js circles

Here is my d3.js code var circles = vis.selectAll("circle").data(data) circles .enter() .append("svg:circle") .attr("stroke", "black") .attr("cx", function (d) { return xRange(d.year); }) .attr("cy", function (d) { return yRange(d.count); }) .style("fill", function(d,i){return color(i);}) .append("svg:title") .text(function (d) { return d.corpus; }) In the end i have appended a tooltip to the circles.I tried to attach jquery tipsy tooltip to the circles but did'nt work.Here is how i did it(i followed http://bl.ocks.org/1373263) var circles = vis.selectAll("circle").data(data) circles .enter()

2021-09-24 04:25:13    分类:问答    javascript   jquery   canvas   d3.js   tipsy

WebGL Fillstyle

I currently have a canvas to which I am rendering a ThreeJS scene. Everything is working fine, however, I would like to display a transparent fill over it. With a normal canvas, I would simply do canvas = document.getElementById('canvas'); context = canvas.getContext('2d'); This, of course, doesn't work because I'm using WebGL and the context is different. But I try to apply fillStyle to renderer.context Nothing happens. I checked via console and the property does appear in the context as so WebGLRenderingContext {fillStyle: "rgba(204, 61, 202, 0.7 )", canvas: canvas#canvas, drawingBufferWidth

2021-09-24 04:24:12    分类:问答    canvas   three.js   webgl

Java 图形全屏模式不注册键盘输入(Java Graphics Full Screen Mode not Registering Keyboard Input)

问题 我正在尝试编写一个接受键盘输入的全屏应用程序。 我已经尝试将键盘监听器添加到我的 JFrame,现在添加到 JFrame 中的画布并将它们都设置为可聚焦,但它似乎根本没有注册任何东西。 在全屏模式下我有什么特别的事情要让它注册我的 keyEvents 吗? 非常感谢任何帮助。 (显示只是 JFrame 的扩展,目前还没有变化) public class chanceCore implements Runnable, KeyListener, MouseListener { boolean isRunning = true; display frame; Canvas canvas; GraphicsDevice device; GraphicsEnvironment environment; public chanceCore() { setUp(); run(); } public void setUp() { frame = new display("CGE"); canvas = new Canvas(); frame.getContentPane().add(canvas); frame.setUndecorated(true); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); canvas

2021-09-24 03:27:17    分类:技术分享    java   canvas   awt   paint   keylistener

Chart.js line 2686 Error

I want lineChart of Chart.js in my sinatra application. But firefox console says `TypeError:this.scale is undefined(Chart.js:2686)` and, lineChart is not displayed.I wrote following code. @hello.erb <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script> <script src="Chartjs/Chart.js" type="text/javascript"></script> <script src="script.js" type="text/javascript"></script> </head> <body> <canvas id="line" height="450" width="600"></canvas> </body> </html> @script.js $(function(){ var lineChartData = { labels : ["hoge","fuga"]

2021-09-24 03:01:15    分类:问答    javascript   canvas   charts   sinatra   erb

Drawing multiple lines on canvas with delay in between

after few months i finally managed to create my first non trivial app. Now I want to add some nice animation (not sure it is a proper term), like step-by-step drawing my graph. Gif below explains what I need. At this point my app draw the graph at once, without any delaying. In MyFragment class there is FrameLayout where custom View (my graph) is added: public class MyFragment extends Fragment{ ... FrameLayout mFL; MyDraw mydraw = new MyDraw(getContext(),floatArray_coord_X,floatArray_coord_Y); mFL.addView(mydraw); ... } Then in my custom view class some calc are made and lines are drawn

2021-09-24 01:58:09    分类:问答    android   canvas   android-bitmap   ondraw

我将如何用图像填充矩形?(How would I fillRect with an image?)

问题 通常,您可以使用ctx.fillStyle = "whatever color here"填充画布中的矩形,然后使用ctx.fillRect(cords and length and width here) 。 有没有语法可以说ctx.fillRect(someImagePathHere, xOfTopLeft, yofTopLeft) 如果没有,我还能如何实现这一目标? 回答1 下面是一个关于如何使用drawImage将图像绘制到画布的快速示例。 左边的元素是图像,右边的元素是画布上绘制的图像。 JSFiddle:https://jsfiddle.net/gw8ncg7g/ window.onload = function() { var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); var img = document.getElementById("image"); ctx.drawImage(img, 0, 0); } canvas { border:1px solid #d3d3d3; } <img id="image" width="300" height="300" src="http://i.imgur.com/LDR6AWn.png?1"> <canvas id=

2021-09-24 00:57:09    分类:技术分享    javascript   image   canvas

HTML Canvas - 动态更改文本(HTML Canvas - change text dynamically)

问题 当我在输入文本字段中键入时,我试图更改 html 画布上的文本。 但是,我可以添加文本,如果我删除并再次键入,新文本将添加到旧文本的顶部。 JSFIDDLE document.getElementById('title').addEventListener('keyup', function() { var stringTitle = document.getElementById('title').value; console.log(stringTitle); ctx.fillStyle = '#fff'; ctx.font = '60px sans-serif'; var text_title = stringTitle; ctx.fillText(stringTitle, 15, canvas.height / 2 + 35); }); 回答1 这有效。 您只需在每次更新时清除画布。 document.getElementById('title').addEventListener('keyup', function() { var stringTitle = document.getElementById('title').value; console.log(stringTitle); ctx.fillStyle = '#0e70d1'; ctx.fillRect

2021-09-23 23:45:18    分类:技术分享    javascript   jquery   html   canvas

如何在图形的悬停转折点上显示 Y 轴值(How To Show Y-axis value, on hover turning point of graph)

问题 我正在使用 java 脚本和画布制作图表。 下面是jsfiddle链接 http://jsfiddle.net/ghan_123/n0r796ae/ 我想在悬停气泡(转折点)上显示值,例如 8 月 1 日价格 2100 脚本 var CanvasChart = function () { var ctx; var margin = { top: 40, left: 75, right: 0, bottom: 75 }; var chartHeight, chartWidth, yMax, xMax, data; var maxYValue = 0; var ratio = 0; var renderType = { lines: 'lines', points: 'points' }; var render = function(canvasId, dataObj) { data = dataObj; getMaxDataYValue(); var canvas = document.getElementById(canvasId); chartHeight = canvas.getAttribute('height'); chartWidth = canvas.getAttribute('width'); xMax = chartWidth - (margin.left +

2021-09-23 23:25:25    分类:技术分享    javascript   jquery   html   canvas   graph

javascript视频画布(javascript video canvas)

问题 我正在测试画布和视频,我已经阅读了很多示例,但是当我按下视频画布上的播放按钮时,我遇到了一个小问题,它不能播放视频,它只显示一个快照。 我不明白为什么它不能同时播放。 这是我在 javascript 中的代码。 function draw() { var ctx3 = document.getElementById('c3'); var ctx1 = document.getElementById('c1'); var conts = ctx3.getContext('2d'); var videos = document.getElementById('video'); var frames = conts.getImageData(0,0,300,300); videos.addEventListener("play", function () { conts.drawImage(videos, 0, 0, 300, 300); var l = frames.data.length/4; for (var i = 0; i<1; i++){ var r = frames.data(i * 4 + 0); var g = frames.data(i * 4 + 1); var b = frames.data(i * 4 + 2); if (g > 100 && r >

2021-09-23 23:05:01    分类:技术分享    javascript   video   canvas

在特定时间在 HTML5 画布上绘制 SVG 文件(Drawing a SVG file on a HTML5 canvas at a specific time)

问题 我找到了关于渲染 SVG 的主题在 HTML5 画布上绘制 SVG 文件。 有没有办法在特定时间绘制 SVG 动画文件? 我的意思是,如何更改代码 var img = new Image(); img.onload = function() { ctx.drawImage(img, 0, 0); // define time at here: time="1.3sec" } img.src = "myfile.svg"; 这样img在特定时间包含 svg? 文件 myfile.svg 包含以下内容: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" id="svg2"> <g transform="translate(100, 100)"> <path transform="matrix(0.99982594,0.01865711,-0.01865711,0.99982594,0,0)" style="opacity:1;fill:#28b327;fill-opacity:1;stroke:#000000;stroke-width:1.5;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" d=

2021-09-23 21:32:18    分类:技术分享    javascript   animation   canvas   svg   canvg