草庐IT

canvas-wrapper-with-gettransform

全部标签

javascript - 三个JS : Text Sprite's font size difference between WebGL renderer and Canvas renderer

我正在使用三个JS来开发3d图形。我想将图表的单位显示为THREE.SPRITE。为了创建SPRITE,我首先创建了一个Canvas元素并向其中添加了文本。然后我用之前创建的Canvas元素创建了THREE.Texture。使用纹理作为贴图创建THREE.SpriteMaterial,然后使用此SpriteMaterial创建THREE.SPRITE。将此SpriteMaterial添加到场景中。当渲染器是THREE.WebGLRenderer的实例时,文本的大小非常小,而当渲染器是THREE.CanvasRenderer的实例时,文本的大小非常大.以下是我用来创建Sprite的代码。

javascript - 在 HTML5 Canvas 上绘制 1 像素线的完整解决方案

在HTML5Canvas上绘制1像素线总是有问题。(引用http://jsbin.com/voqubexu/1/edit?js,output)绘制垂直/水平线的方法是x+0.5,y+0.5(引用Canvaslinebehaviourwhen0)。要在全局范围内执行此操作,ctx.translate(0.5,0.5);是个好主意。但是,当涉及到对Angular线时,这种方法就不起作用了。它总是给出一条2像素的线。有没有办法阻止这种浏览器行为?如果没有,是否有可以解决此问题的软件包? 最佳答案 您提到的“更宽”的线是由浏览器自动完成的抗

javascript - canvas getImageData 方法是否依赖于机器/浏览器?

一位客户需要有关提取产品图片主色的程序的帮助。我能够用Javascript快速实现它;下面的算法仅对图像上3x3网格的中心方block进行采样,以快速估计图像中的T恤颜色。varimage=newImage();image.onload=function(){try{//getdominantcolorbysamplingthecentralsquareofa3x3gridonimagevardominantColor=getDominantColor();//outputcolor$("#output").html(dominantColor);}catch(e){$("#outpu

javascript - Controller 已加载到 DOM 中,但 View 未加载且无法找到 Controller - oclazyload with jade(pugjs)

我正在为我的项目使用angular1.6,并使用angular-ui-routing为HTML模板使用PugJs进行路由。我正在尝试在我的应用程序中实现Lazyload,但不知何故它不起作用可能是由于jade。代码:varapp=angular.module('myApp',['ui.router','oc.lazyLoad']);app.config(['$ocLazyLoadProvider',function($ocLazyLoadProvider{$ocLazyLoadProvider.config({debug:true,modules:[{name:'js',files:[

javascript - 为什么 eval 不能访问 with 语句下的作用域变量?

为什么您不能在with语句下使用eval访问作用域变量?例如:(function(obj){with(obj){console.log(a);//printsoutobj.aeval("console.log(a)");//ReferenceError:aisnotdefined}})({a:"hello"})编辑:正如知识渊博的CMS所指出的,这似乎是一个浏览器错误(使用WebKit控制台的浏览器)。如果有人想知道我试图想出什么可憎的东西需要“邪恶的”eval和with--我想看看我是否可以让一个函数(用作回调)在另一个上下文中执行,而不是在它定义的上下文中执行。不,我可能(咳嗽)不

c# - Selenium 网络驱动程序 : how to deal with javascript onclick in C#

我正在使用seleniumWeb驱动程序C#测试一个网站。我的本意是检查返回200的HttpWebResponse。但是,该按钮是一个javascriptonclick事件。我想知道是否有人有过如何处理这种情况的经验。这是按钮的HTML: 最佳答案 尝试这样的事情:publicvoidJavaScriptClick(IWebElementelement){IJavaScriptExecutorexecutor=(IJavaScriptExecutor)driver;executor.ExecuteScript("arguments[

javascript - 链式 jQuery promises with abort

我目前正在编写API代码,其中包含多层深度的$.ajax()调用。一个要求是用户必须能够取消任何请求(例如,如果它花费的时间太长)。通常这是通过一些简单的事情来完成的,比如:varjqXHR=$.ajax(..);$(mycancelitem).click(function(){jqXHR.abort();});但是我的代码看起来更像这样:functionmyapicall(){varjqxhr=$.ajax(…);varprms=def.then(function(result){//modifytheresultherereturnresult+5;});returnprms;}这

javascript - 使用 Protractor 测试 Canvas 绘图

有没有办法测试绘图是否是使用Protractor在Canvas上绘制的?即我根据用户点击绘制了一个矩形:varshape=newcreatejs.Shape();shape.graphics.beginStroke("black");shape.graphics.drawRect(crd.x,crd.y,crd.width,crd.height);stage.addChild(shape)stage.update()现在我想制定一个规范来测试是否在指定坐标上绘制了一个矩形,并且作为一个加号,测试它的边框是否为黑色。这可以使用Protractor/WebDriverJSAPI吗?

javascript - 如何通过 javascript 将图像/HTML Canvas 切成两半?

我正在使用html2canvas将具有自定义功能的googlemapjavascriptAPI转换为Canvas,然后转换为图像。在所有浏览器上都能正常工作,除了在IE11上它会生成一个图像,图像右侧有额外的空白,等于(浏览器窗口的宽度-map宽度)。所以我的窗口越宽,右边的空间就越大,反之亦然。我怎样才能在实际图像(768像素宽)的边缘切分该图像(或HTMLcanvas)?我在这里找到了这段代码,但不知道如何为这个任务修改它:varimage=newImage();image.onload=cutImageUp;image.src='myimage.png';functioncutI

javascript - react -JS : Access a child's method through HOC wrapper

我有一个看起来像这样的Editor组件:classEditorCompextendsComponent{focus(){this.refs.input.focus();}render(){return();}}这样使用EditorComp的元素可以设置一个ref并调用它的focus方法并将焦点应用到较低级别的输入,如下所示:classParentextendsComponent{render(){return(this.refs.editor.focus()}>Focus);}}但是,当将EditorComp包装在高阶组件(如react-redux的connect())中时,Edito