天道酬勤,学无止境

如何使画布文本可选?(How to Make Canvas Text Selectable?) 相关文章

原文信息:如何使画布文本可选?(How to Make Canvas Text Selectable?)

问题 任何建议都将受到高度赞赏。 回答1 文本选择具有许多视觉上的,一些非视觉上的组成部分。 首先,使文本成为可选文本,您必须保留一个数组,该数组包含文本的位置,文本的含义以及所使用的字体。 您将通过Canvas函数measureText使用此信息。 通过使用measureText和文本字符串,您可以确定单击图像时光标应落在哪个字母上。 ctx.fillText("My String", 100, 100); textWidth = ctx.measureText("My String").width; 您仍然必须从“字体”属性解析字体高度,因为该属性当前未包含在文本指标中。 画布文本默认情况下与基线对齐。 有了这些信息,您现在有了一个边界框,可以对其进行检查。 如果光标位于边界框内,那么您现在将承担推论一下故意选择了哪个字母的不幸任务。 光标的起始位置。 这可能涉及多次调用measureText。 到那时,您知道光标应该移到哪里了。 当然,您需要将文本字符串作为文本字符串存储在变量中。 一旦定义了范围的起点和终点,就必须绘制一个选择指示器。 这可以在新的图层(第二个画布元素)中完成,也可以使用XOR合成模式绘制一个矩形来完成。 也可以通过简单地清除和重绘填充矩形上方的文本来完成此操作。 总而言之,在Canvas中进行文本选择,文本编辑非常费力,并且重新使用已经编写的组件是明智的


更多相关搜索:点击搜索查看



确定HTML5画布中字符串的宽度(Determine width of string in HTML5 canvas)
问题 我正在图像(模因生成器)顶部的HTML5画布中绘制文本。 我想计算一个字体大小,以便该字符串跨越画布的整个宽度。 因此,基本上,JavaScript中是否有一种方法可以确定对于给定宽度的某种字体的某些字符串我应该使用哪种字体大小? 回答1 fillText()方法有一个可选的第四个参数,它是呈现字符串的最大宽度。 MDN的文档说... maxWidth 可选的; 绘制的最大宽度。 如果指定了该字符串,并且计算出的字符串的宽度大于此宽度,则将字体调整为使用水平方向更紧凑的字体(如果可用,或者可以通过水平缩放当前字体来合成合理可读的字体)或更小字体。 但是,在撰写本文时,跨浏览器还不支持该参数,这导致第二种解决方案使用measureText()来确定字符串的尺寸而不渲染它。 var width = ctx.measureText(text).width; 这是我可能会做的... var canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d'); // Font sizes must be in descending order. You may need to use `sort()` // if you can't guarantee this, e.g. user input. var

2021-04-19 03:09:12    分类:技术分享    javascript   html   text   canvas   fonts

HTML5画布中的居中(比例字体)文本(Center (proportional font) text in an HTML5 canvas)
问题 我希望能够在可以计算的矩形区域内将单行文本居中。 我期望在画布上的2D几何图形中做的一件事就是将宽度未知的东西居中。 作为一种解决方法,我听说可以在HTML容器中创建文本,然后调用jQuery的width()函数,但是我不是正确地处理了文档主体中的瞬时添加吗? 宽度为0 如果我只有一行文字,比填满屏幕大部分宽度的文字短得多,如何知道以我知道的字体大小在画布上的宽度? 回答1 如果您不需要文本的宽度,而只想居中,则可以 canvas_context.textBaseline = 'middle'; canvas_context.textAlign = "center"; 哪个应该使文本在垂直和水平居中。 回答2 您可以使用measureText来做到这一点 var canvas = document.getElementById("canvas"), ctx = canvas.getContext("2d") canvas.width = 400; canvas.height = 200; ctx.fillStyle = "#003300"; ctx.font = '20px sans-serif'; var textString = "Hello look at me!!!", textWidth = ctx.measureText(textString ).width

2021-04-23 20:34:06    分类:技术分享    javascript   jquery   html   canvas   fonts

画布文本渲染(模糊)(Canvas text rendering (blurry))
问题 我知道这个问题已经被问过很多次了,但是我尝试了几乎所有可以在网上找到的东西,但是无论我尝试了什么(以及使用什么组合),仍然无法在画布上正确呈现文本。 对于模糊的线条和形状问题,只需将+ 0.5px添加到坐标即可解决该问题:但是,此解决方案似乎不适用于文本渲染。 注意:我从不使用CSS来设置画布的宽度和高度(只尝试过一次以检查在HTML和CSS中设置大小属性是否会改变任何内容)。 同样的问题似乎与浏览器无关。 我试过了 : 用HTML创建画布,然后用javascript而不是html创建画布在HTML元素中设置宽度和高度,然后使用JS,然后同时使用HTML和JS 使用所有可能的组合将0.5px添加到文本坐标更改字体系列和字体大小更改字体大小单位(px,pt,em) 使用不同的浏览器打开文件以检查是否有任何更改使用canvas.getContext('2d', {alpha:false})禁用Alpha通道canvas.getContext('2d', {alpha:false})这只是使我的大多数图层消失而没有解决问题 在此处查看canvas和html字体渲染之间的比较:https://jsfiddle.net/balleronde/1e9a5xbf/ 甚至有可能使画布中的文本像dom元素中的文本一样呈现吗? 任何意见或建议将不胜感激 回答1 画布上的DOM质量文本。 仔细看看

2021-04-15 14:42:45    分类:技术分享    javascript   html   canvas   text   rendering

有什么办法可以使WPF文本块成为可选的?(Any way to make a WPF textblock selectable?)
问题 如何允许TextBlock的文本是可选的? 我试图通过使用只读的TextBox来显示文本,使其看起来像文本块,从而使其正常工作,但是在我的情况下,这是不起作用的,因为TextBox没有内联。 换句话说,如何使其成为可选择的? 回答1 而是使用具有这些设置的TextBox使其只读并看起来像TextBlock控件。 <TextBox Background="Transparent" BorderThickness="0" Text="{Binding Text, Mode=OneWay}" IsReadOnly="True" TextWrapping="Wrap" /> 回答2 这里的所有答案都只是使用TextBox或尝试手动实现文本选择,这会导致性能不佳或非本地行为( TextBox插入记号闪烁,手动实现中不支持键盘等)。 经过数小时的研究和阅读WPF源代码,我发现了一种为TextBlock控件(或实际上是任何其他控件)启用本机WPF文本选择的方法。 围绕文本选择的大多数功能是在System.Windows.Documents.TextEditor系统类中实现的。 要为控件启用文本选择,您需要做两件事: 一次调用TextEditor.RegisterCommandHandlers()以注册类事件处理程序为类的每个实例创建一个TextEditor实例,然后将System

2021-03-26 12:53:17    分类:技术分享    wpf   xaml   textbox   textblock

使用Javascript获取画布中的最大字体大小(Use Javascript to get Maximum font size in canvas)
问题 我正在绘制需要在整个可用屏幕上(100%的宽度和高度)的画布。 我像这样使用javascript设置画布的宽度和高度 var w = window.innerWidth; var h = window.innerHeight; var canvas = document.getElementById("myCanvas"); canvas.width = w; canvas.height = h; 设置画布后,我需要在其中绘制一些文本,以获取最大可用字体大小。 请帮助我找到如何显示最大字体大小的文本的方法。 文本可以包含单个字符(大写和小写)或字符串,也可以包含数字。 我需要用JavaScript而不是jquery来做。 感谢您的帮助。 回答1 挑战 由于canvas的measureText当前不支持测量高度(上升+下降),因此我们需要做一些DOM技巧来获取行高。 由于字体(或字体)的实际高度不一定(很少)与字体大小相对应,因此我们需要一种更准确的度量方式。 解决方案 小提琴演示 结果将是垂直对齐的文本,该文本始终适合画布的宽度。 该解决方案将自动获得字体的最佳大小。 第一个功能是包装measureText以支持高度。 如果文本指标的新实现不可用,请使用DOM: function textMetrics(ctx, txt) { var tm = ctx.measureText

2021-04-06 22:58:30    分类:技术分享    javascript   canvas   font-size   max

将文本分成页面并单独显示(HTML5)(Split text into pages and present separately (HTML5))
问题 假设我们有一个长文本,例如Romeo&Juliet,我们想在一个简单的电子阅读器中显示它(没有动画,只有页面和自定义字体大小)。 有什么方法可以做到这一点? 到目前为止,我想出了什么: 使用css3列,可以将整个文本加载到内存中,使其样式化,使单个列占据整个页面的大小。 这样做很难控制,并且需要将整个文本加载到内存中。 使用css3区域(在任何主要浏览器中均不支持)将构成与先前解决方案相同的基本概念,主要区别在于控制起来不会那么困难(因为每个“列”都是一个自包含的元素)。 在画布上绘制文本可以使您确切地知道文本的结尾,从而在此基础上绘制下一页。 优点之一是您只需要将所有文本加载到当前页面即可(仍然很差,但是更好)。 缺点是无法与文本进行交互(例如选择文本)。 将每个单词放置在一个元素内,并为每个元素赋予唯一的ID(或在javascript中保留逻辑引用),然后使用document.elementFromPoint查找页面上最后一个元素(单词),并从下开始显示下一页这个词。 尽管这是唯一对我而言似乎实际可行的方法,但这样做所产生的开销却是巨大的。 然而,这些似乎都不是可以接受的(第一个没有给予足够的控制甚至无法使其正常工作,第二个还不被支持,第三个是困难且没有文本选择,第四个给出了可笑的开销),所以任何好的方法我尚未考虑过解决上述方法的一个或多个缺点的方法(是的

2021-04-22 03:09:16    分类:技术分享    javascript   html   css   html5-canvas

如何在HTML5 canvas元素上编写文本?(How can I write text on a HTML5 canvas element?)
问题 是否可以在HTML5 canvas上编写文本? 回答1 var canvas = document.getElementById("my-canvas"); var context = canvas.getContext("2d"); context.fillStyle = "blue"; context.font = "bold 16px Arial"; context.fillText("Zibri", (canvas.width / 2) - 17, (canvas.height / 2) + 8); #my-canvas { background: #FF0; } <canvas id="my-canvas" width="200" height="120"></canvas> 回答2 在画布上绘制文本 标记: <canvas id="myCanvas" width="300" height="150"></canvas> 脚本(有几个不同的选项): <script> var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.font = 'italic 18px Arial'; ctx.textAlign = 'center'; ctx

2021-04-14 16:16:43    分类:技术分享    html   canvas

在HTML5画布上绘制旋转文本(Drawing rotated text on a HTML5 canvas)
问题 我正在开发的Web应用程序的一部分要求我创建条形图以显示各种信息。 我认为,如果用户的浏览器具有功能,则可以使用HTML5 canvas元素绘制它们。 我没有为我的图形绘制线条和条形的问题,但是当涉及到标注轴,条形或线的标签时,我遇到了麻烦。 如何将旋转的文本绘制到画布元素上,使其与要标记的项目对齐? 几个示例包括: 逆时针旋转文本90度以标记y轴逆时针旋转文本90度以在垂直条形图上标记条形图任意旋转文本以标记折线图上的线 任何指针将不胜感激。 回答1 就像其他人提到的那样,您可能想看看重用现有的图形解决方案,但是旋转文本并不是太困难。 (对我而言)有些令人困惑的一点是,您旋转了整个上下文然后在其上进行绘制: ctx.rotate(Math.PI*2/(i*6)); 角度以弧度为单位。 该代码取自该示例,我相信该示例是为MDC画布教程的转换部分制作的。 请参阅下面的答案以获取更完整的解决方案。 回答2 发布此信息是为了帮助有类似问题的其他人。 我通过五步方法解决了这个问题-保存上下文,转换上下文,旋转上下文,绘制文本,然后将上下文还原为其保存状态。 我认为平移和转换为上下文是操纵覆盖在画布上的坐标网格。 默认情况下,原点(0,0)从画布的左上角开始。 X从左到右增加,Y从上到下增加。 如果您用左手的食指和拇指做一个“ L”,并在您的拇指向下的情况下将其按住在您的面前

2021-04-12 09:01:27    分类:技术分享    javascript   html   canvas

如何修复HTML5画布中的模糊文本?(How do I fix blurry text in my HTML5 canvas?)
问题 我总的n00b HTML5和我有工作canvas渲染形状,颜色和文字。 在我的应用程序中,我有一个视图适配器,可以动态创建画布,并用内容填充它。 效果非常好,除了我的文本非常模糊/模糊/拉伸。 我还看到了许多其他文章,说明为什么在CSS定义宽度和高度会导致此问题,但我在javascript都定义了这些内容。 相关代码(查看小提琴): var width = 500;//FIXME:size.w; var height = 500;//FIXME:size.h; var canvas = document.createElement("canvas"); //canvas.className="singleUserCanvas"; canvas.width=width; canvas.height=height; canvas.border = "3px solid #999999"; canvas.bgcolor = "#999999"; canvas.margin = "(0, 2%, 0, 2%)"; var context = canvas.getContext("2d"); ////////////////// //// SHAPES //// ////////////////// var left = 0; //draw zone 1 rect context

2021-03-26 14:19:29    分类:技术分享    javascript   html   html5-canvas

画布上的Android Center文本(Android Center text on canvas)
问题 我正在尝试使用下面的代码显示文本。 问题是文本没有水平居中。 当我设置drawText的坐标时,它将在此位置设置文本的底部。 我希望绘制文本,以便文本也水平居中。 这是进一步显示我的问题的图片: @Override protected void onDraw(Canvas canvas) { // TODO Auto-generated method stub super.onDraw(canvas); //canvas.drawRGB(2, 2, 200); Paint textPaint = new Paint(); textPaint.setARGB(200, 254, 0, 0); textPaint.setTextAlign(Align.CENTER); textPaint.setTypeface(font); textPaint.setTextSize(300); canvas.drawText("Hello", canvas.getWidth()/2, canvas.getHeight()/2 , textPaint); } 回答1 请尝试以下操作: Paint textPaint = new Paint(); textPaint.setTextAlign(Paint.Align.CENTER); int xPos = (canvas.getWidth() /

2021-04-03 16:22:18    分类:技术分享    java   android   android-activity   android-canvas   drawtext

如何找到HTML画布上文本的高度?(How can you find the height of text on an HTML canvas?)
问题 规范中有一个context.measureText(text)函数,该函数将告诉您打印该文本需要多少宽度,但是我找不到找到高度的方法。 我知道它是基于字体的,但是我不知道将字体字符串转换为文本高度。 回答1 更新-作为此工作的示例,我在Carota编辑器中使用了此技术。 继ellisbben的回答之后,这是一个增强版本,可从基线获得上升和下降,即与Win32的GetTextMetric API返回的tmAscent和tmDescent相同。 如果您想用不同字体/大小的跨度进行文字包装的文本,则需要这样做。 上面的图像是在Safari中的画布上生成的,红色是指示画布绘制文本的最上面一行,绿色是基线,蓝色是底部(所以红色到蓝色是完整高度)。 使用jQuery简洁: var getTextHeight = function(font) { var text = $('<span>Hg</span>').css({ fontFamily: font }); var block = $('<div style="display: inline-block; width: 1px; height: 0px;"></div>'); var div = $('<div></div>'); div.append(text, block); var body = $('body'); body

2021-03-26 11:00:21    分类:技术分享    javascript   text   canvas

如何使tkinter画布动态调整为窗口宽度?(How to get tkinter canvas to dynamically resize to window width?)
问题 我需要在tkinter中获得一个画布,以将其宽度设置为窗口的宽度,然后在用户使窗口变小/变大时动态调整画布的大小。 有什么办法(轻松)吗? 回答1 我以为我会添加一些额外的代码来扩展@fredtantini的答案,因为它不涉及如何更新在Canvas上绘制的小部件的形状。 为此,您需要使用scale方法并标记所有小部件。 下面是一个完整的示例。 from Tkinter import * # a subclass of Canvas for dealing with resizing of windows class ResizingCanvas(Canvas): def __init__(self,parent,**kwargs): Canvas.__init__(self,parent,**kwargs) self.bind("<Configure>", self.on_resize) self.height = self.winfo_reqheight() self.width = self.winfo_reqwidth() def on_resize(self,event): # determine the ratio of old width/height to new width/height wscale = float(event.width)/self

2021-04-10 02:09:35    分类:技术分享    python   canvas   python-3.x   tkinter   autoresize

HTML5画布与SVG与div(HTML5 Canvas vs. SVG vs. div)
问题 即时创建元素并能够四处移动的最佳方法是什么? 例如,假设我要创建一个矩形,圆形和多边形,然后选择这些对象并四处移动。 我了解HTML5提供了三个使之成为可能的元素:svg,canvas和div。 对于我想做什么,这些元素中的哪一个将提供最佳性能? 为了比较这些方法,我正在考虑创建三个视觉上相同的网页,每个网页中都有页眉,页脚,小部件和文本内容。 第一页中的小部件将完全使用canvas元素创建,第二页将完全使用svg元素创建,而第三页将使用纯div元素HTML和CSS创建。 回答1 简短的答案: SVG对您来说将更加容易,因为已经内置了选择和移动它的功能。SVG对象是DOM对象,因此它们具有“ click”处理程序等。 DIV可以,但是笨重,并且在大量情况下具有糟糕的性能加载。 Canvas具有最佳的性能,但是您必须自己实现托管状态(对象选择等)的所有概念,或者使用库。 长答案: HTML5 Canvas只是位图的绘图表面。 您设置进行绘制(用颜色和线条粗细说),绘制该东西,然后Canvas不知道该东西:它不知道它在哪里或刚刚绘制的是什么,它是只是像素。 如果要绘制矩形并使其移动或可以选择,则必须从头开始编写所有代码,包括要记住已绘制矩形的代码。 另一方面,SVG必须维护对其呈现的每个对象的引用。 您创建的每个SVG / VML元素都是DOM中的真实元素。 默认情况下

2021-04-03 21:20:37    分类:技术分享    javascript   html   svg   html5-canvas

iOS 7中的UITextView链接检测(UITextView link detection in iOS 7)
问题 我有一个UITextView ,它是通过Interface Builder管理的。 作为数据检测,我检查了“链接”。 在iOS 6中,一切正常,链接突出显示并且可以单击。 但是,在iOS 7中,所有链接都只是纯文本。 未选中可编辑和可选复选框。 可能令人担心的是, UITextView是容器视图的子视图,该视图又位于UIScrollView 。 回答1 似乎在iOS 7中,只有在UITextView是可选的情况下,链接检测才起作用。 因此,使我的UITextView不可选择停止了链接检测的工作。 我也在iOS 6中对此进行了测试,并且可以确认在iOS 6中,即使无法选择UITextView ,链接检测也可以正常工作。 回答2 我今天在电话号码检测方面遇到了一些问题。 在我将文本设置为其他内容之后,UITextView似乎会保留旧的电话号码并突出显示文本。 我发现,如果在将文本设置为新字符串之前先设置setText:nil,它将重置textview,并且电话号码将像往常一样突出显示。 我想知道这是否是iOS 7.0中的UITextView的某种错误 无论哪种方式,这确实对我有用。 回答3 当iOS7首次问世时,这困扰了我,我在此线程中找到了答案(在设置实际值之前将UITextView的text属性设置为nil可以解决问题)。 然后突然,问题

2021-04-07 02:51:47    分类:技术分享    ios   objective-c   ios6   uitextview   ios7

如何在画布的边界内绘制geom_text图(How to make geom_text plot within the canvas's bounds)
问题 使用geom_text标记散点图的外围点。 根据定义,这些点往往靠近画布边缘:通常至少有一个单词与画布边缘重叠,从而使它无用。 显然,在以下情况下,可以使用+ xlim(c(1.5, 4.5))手动解决此问题: # test df <- data.frame(word = c("bicycle", "tricycle", "quadricycle"), n.wheels = c(2,3,4), utility = c(10,6,7)) ggplot(data=df, aes(x=n.wheels, y=utility, label=word)) + geom_text() + xlim(c(1.5, 4.5)) 不过这并不理想,因为 它不是自动化的,因此如果要生产许多样地,则会减慢该过程这是不准确的,这意味着单词的边缘和画布的边缘之间的距离在每种情况下都不相等。 搜索此问题不会发现任何解决方案,并且Hadley Wickham似乎对ggplot2的帮助页面中的标签减少了一半感到满意(我知道Hadley,它们只是一个示例;) 回答1 ggplot 2.0.0引入了针对geom_text() hjust和vjust新选项,可能有助于剪切,尤其是"inward" 。 我们可以做: ggplot(data=df, aes(x=n.wheels, y=utility, label

2021-04-06 21:22:36    分类:技术分享    r   text   plot   ggplot2

在fabricJS中如何使用transformMatrix转换点?(How does transforming points with a transformMatrix work in fabricJS?)
问题 我试图将点(通过fabric.Circle )放置在fabric.Polygon的角上。 多边形可以由用户移动,缩放或旋转。 但是,每次修改后,我都希望具有多边形的新坐标以将我的圆放置在那里。 在深入研究该主题时,我发现了转换矩阵的出色解释。 我认为这是我想要实现的完美解决方案。 但是,正如您在小提琴中看到的那样,我的点总是偏离多边形。 由于我对几何变换等并不坚定。我希望有人能找到我的错误并告诉我我所缺少的东西:)谢谢。 var canvas = new fabric.Canvas("c", {selection: false}); var polygon = new fabric.Polygon([ new fabric.Point(200, 50), new fabric.Point(250, 150), new fabric.Point(150, 150) ]); polygon.on("modified", function () { var matrix = this.calcTransformMatrix(); var transformedPoints = this.get("points").map(function(p){ return fabric.util.transformPoint(p, matrix); }); var circles =

2021-04-15 11:43:14    分类:技术分享    javascript   transform   fabricjs   transformation

从文本html画布中提取路径(extract path from text html canvas)
问题 无论如何,是否有从html 5的文本字母中提取路径,然后沿该路径抓取(x,y)坐标,以便该字母可以由沿该字母路径的圆圈组成? 我想采用x,y坐标,并在其位置应用形状,以使其类似于“像素化”格式的文本字符串,并带有一些动画效果。 关于在画布上沿字符路径获取某种x,y坐标的任何建议都是很好的。 编辑:我本质上是试图自动生成坐标以执行类似于此的操作:http://www.html5canvastutorials.com/labs/html5-canvas-google-bouncing-balls/ 回答1 像素缩放 一种简单的方法是执行以下操作: 使用小字体,使用纯色绘制文本迭代所有像素。 任何alpha = 255的像素,存储到数组中,但x和y随直径缩放 现在,您有了代表文本的粗略的“球”阵列,并且可以进行动画处理。 在字母间距方面,它不是超级准确,但应该针对给定的目的进行操作(您始终可以测量每个字母,并在分隔点处使用额外的增量值来增加x的末尾值)。 较大的字体可以提高质量,但也会产生更多的磅数。 与下面的演示中使用的通用字体不同的字体类型也可能有益于整体外观(实验!)。 您还可以调整Alpha阈值,以包括不完全固定但有影响力的像素。 最后,不同的浏览器以不同的方式呈现文本,因此您可能也需要牢记这一点(请参阅上文中有关测量每个字母以在它们之间添加额外空间的内容)。 演示版

2021-04-22 14:18:20    分类:技术分享    html   text   canvas

如何使生成的内容可选?(How can I make generated content selectable?)
问题 我可以让CSS通过使用生成的内容来显示元素的ID,如下所示: <style> h2:hover:after { color: grey; content: "#" attr(id); float: right; font-size: smaller; font-weight: normal; } </style> <h2 id="my-id">My ID</h2> <p>Pellentesque habitant morbi tristique senectus et netus et.</p> 如何使生成的内容(“#my-id”)可选,以便用户突出显示和复制它? 回答1 您无法选择伪元素,因为它在DOM中不存在。 5.10伪元素和伪类伪元素或伪类都不会出现在文档源或文档树中。 回答2 伪元素不存在于DOM中。 因此,您无法选择它们。

2021-04-07 04:45:55    分类:技术分享    css   pseudo-element

Fabric.js-如何使用自定义属性在服务器上保存画布(Fabric.js - how to save canvas on server with custom attributes)
问题 我希望能够将当前canvas的状态保存为服务器端数据库(可能作为JSON字符串),然后再使用loadFromJSON还原它。 通常,使用以下方法可以轻松实现此目的: var canvas = new fabric.Canvas(); function saveCanvas() { // convert canvas to a json string var json = JSON.stringify( canvas.toJSON() ); // save via xhr $.post('/save', { json : json }, function(resp){ // do whatever ... }, 'json'); } 进而 function loadCanvas(json) { // parse the data into the canvas canvas.loadFromJSON(json); // re-render the canvas canvas.renderAll(); // optional canvas.calculateOffset(); } 但是,我还使用内置的Object#set方法在要添加到画布上的结构对象上设置了一些自定义属性: // get some item from the canvas var item = canvas

2021-04-03 16:45:58    分类:技术分享    database   json   savechanges   fabricjs

在画布上绘制多行文字(Draw multi-line text to Canvas)
问题 一个希望很快的问题,但是我似乎找不到任何示例...我想通过Canvas将多行文本写到自定义View ,并且在onDraw()我有: ... String text = "This is\nmulti-line\ntext"; canvas.drawText(text, 100, 100, mTextPaint); ... 我希望这会导致换行,但我看到的是\n所在的隐秘字符。 任何指针表示赞赏。 保罗 回答1 不幸的是,Android不知道\n是什么。 您需要做的是去除\n ,然后偏移Y以使您的文本显示在下一行。 所以像这样: canvas.drawText("This is", 100, 100, mTextPaint); canvas.drawText("multi-line", 100, 150, mTextPaint); canvas.drawText("text", 100, 200, mTextPaint); 回答2 我发现了使用静态布局的另一种方法。 该代码在这里供任何人参考: TextPaint mTextPaint=new TextPaint(); StaticLayout mTextLayout = new StaticLayout(mText, mTextPaint, canvas.getWidth(), Alignment.ALIGN_NORMAL, 1

2021-04-04 00:04:16    分类:技术分享    android   android-canvas

Android中如何使用StaticLayout?(How is StaticLayout used in Android?)
问题 我需要构建自己的自定义TextView因此我一直在学习有关StaticLayout以便在画布上绘制文本。 这比直接使用Canvas.drawText()更可取,因此文档会说。 但是,文档没有提供任何有关此操作的示例。 只是模糊地引用了StaticLayout.Builder,这是更新的方法。 我在这里找到了一个例子,但似乎有些过时了。 我终于做了工作,但是我在下面添加了我的解释。 回答1 StaticLayout (类似于DynamicLayout和BoringLayout)用于在画布上布局和绘制文本。 通常用于以下任务: 测量布局后多行文本的大小。 在位图图像上绘制文本。 制作一个可处理其自己的文本布局的自定义视图(与使用嵌入式TextView制作一个复合视图相反)。 TextView本身在内部使用StaticLayout 。 测量文字大小 单线 如果只有一行文本,则可以使用Paint或TextPaint进行测量。 String text = "This is some text." TextPaint myTextPaint = new TextPaint(); mTextPaint.setAntiAlias(true); mTextPaint.setTextSize(16 * getResources().getDisplayMetrics().density)

2021-04-16 04:17:57    分类:技术分享    android   canvas   text   android-custom-view   staticlayout

我应该如何使用jcrop在客户端裁剪图像并上传?(How should I crop the image at client side using jcrop and upload it?)
问题 我正在开发一个具有文件上传HTML控件的组件,使用该控件选择图像后,该图像将呈现在HTML5 Canvas元素上 这是带有示例代码的JSFiddle:https://jsfiddle.net/govi20/spmc7ymp/ id = target是jcrop图像目标 id = photograph是文件上传控件 id = preview是画布元素 id = clear_selection是一个可以清除画布的按钮 使用的第三方JS库: <script src="./js/jquery.min.js"></script> <script src="./js/jquery.Jcrop.js"></script> <script src="./js/jquery.color.js"></script> 设置JCrop: <script type="text/javascript"> jQuery(function($){ var api; $('#target').Jcrop({ // start off with jcrop-light class bgOpacity: 0.5, keySupport: false, bgColor: 'black', minSize:[240,320], maxSize:[480,640], onChange : updatePreview

2021-04-14 09:56:13    分类:技术分享    javascript   jquery   css   image   jcrop

将HTML画布设置为页面背景(Set HTML Canvas as page background)
问题 我制作了一个JS动画,希望作为主页的背景:http://geotheory.co.uk/。 但是我对Web开发还是很陌生,还不清​​楚如何停止canvas元素是页面上的“内联”对象,并将其设置在其他HTML元素之后。 非常感谢您的指教。 HTML是: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>geotheory.co.uk</title> <style> canvas:focus{outline:none;} * { margin: 0; padding: 0; } h1 {color:#fff;} p {color:#fff;} </style> </head> <body id="home" bgcolor="black"> <!-- style="overflow:hidden;" --> <h1>Heading</h1> <p>paragraph 1</p> <p>paragraph 2</p> <script src="processing-1.4.1.min.js"></script> <div id="canvasContainer"> <canvas data-processing-sources="rectangles.pde"></canvas> <

2021-04-24 05:49:23    分类:技术分享    css   html

在Tkinter中向一组小部件添加滚动条(Adding a scrollbar to a group of widgets in Tkinter)
问题 我正在使用Python解析日志文件中的条目,并使用Tkinter显示条目内容,到目前为止,它非常出色。 输出是一个标签小部件的网格,但有时行的数量超出了屏幕上可以显示的数量。 我想添加一个滚动条,它看起来应该很简单,但是我无法弄清楚。 该文档暗示只有“列表”,“文本框”,“画布”和“条目”小部件支持滚动条界面。 这些似乎都不适合显示小部件的网格。 可以在Canvas小部件中放置任意小部件,但是您似乎必须使用绝对坐标,因此我将无法使用网格布局管理器? 我尝试将小部件网格放入框架中,但这似乎不支持滚动条界面,因此这行不通: mainframe = Frame(root, yscrollcommand=scrollbar.set) 任何人都可以提出解决此限制的方法吗? 我讨厌不得不在PyQt中重写并增加可执行映像的大小,以增加滚动条! 回答1 概述 您只能将滚动条与一些小部件关联,并且根小部件和Frame不是该小部件组的一部分。 最常见的解决方案是创建一个画布小部件,并将滚动条与该小部件相关联。 然后,将包含标签小部件的框架嵌入到该画布中。 确定框架的宽度/高度,并将其输入到canvas scrollregion选项中,以使滚动区域与框架的尺寸完全匹配。 为什么将小部件放在框架中而不是直接放在画布中? 附加到画布的滚动条只能滚动使用create_方法之一创建的项目。

2021-03-26 15:42:10    分类:技术分享    python   tkinter   tkinter.scrollbar

如何在html5中制作透明画布?(How do I make a transparent canvas in html5?)
问题 如何使画布透明? 我需要这样做是因为我想将两个画布彼此叠放。 回答1 默认情况下,画布是透明的。 尝试设置页面背景图像,然后在其上放置画布。 如果画布上未绘制任何内容,则可以完全看到页面背景。 可以将画布想像成在玻璃板上绘画。 回答2 我相信您正在尝试完全按照我的意愿去做:我想要两张堆叠的画布……最下面的一个具有静态图像,最上面的一个包含动画精灵。 由于动画的原因,您需要在渲染每个新帧的开始时将顶层的背景清除为透明的。 我终于找到了答案:它没有使用globalAlpha,也没有使用rgba()颜色。 简单有效的答案是: context.clearRect(0,0,width,height); 回答3 如果您希望特定的<canvas id="canvasID">始终是透明的,则只需设置 #canvasID{ opacity:0.5; } 相反,如果希望画布区域内的某些特定元素是透明的,则在绘制时必须设置透明性,即 context.fillStyle = "rgba(0, 0, 200, 0.5)"; 回答4 只需将画布的背景设置为透明即可。 #canvasID{ background:transparent; } 回答5 将您的两个画布绘制到第三个画布上。 我遇到了同样的问题,这里没有解决方案可以解决我的问题。 我有一个不透明的画布,上面有另一个透明的画布。

2021-04-19 05:41:15    分类:技术分享    html   canvas

绘图文字到 @ font-face第一次无法使用(Drawing text to <canvas> with @font-face does not work at the first time)
问题 当我在具有通过@ font-face加载的字体的画布中绘制文本时,该文本无法正确显示。 它根本不显示(在Chrome 13和Firefox 5中),或者字体错误(Opera 11)。 这种类型的意外行为仅在带有字体的第一个图形上发生。 之后,一切正常。 这是标准行为还是什么? 谢谢你。 PS:以下是测试用例的源代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>@font-face and <canvas></title> <style id="css"> @font-face { font-family: 'Press Start 2P'; src: url('fonts/PressStart2P.ttf'); } </style> <style> canvas, pre { border: 1px solid black; padding: 0 1em; } </style> </head> <body> <h1>@font-face and <canvas></h1> <p> Description: click the button several times, and you will see the problem. The first line won't show at all, or

2021-04-10 09:35:21    分类:技术分享    html   canvas   font-face

CSS3不透明度渐变?(CSS3 opacity gradient?)
问题 我正在尝试创建这样的效果,但是我的网站具有动态的background-color 。 请注意,此示例使用白色叠加层,该叠加层无法在不同背景下使用。 p { width: 300px; overflow: hidden; height: 50px; line-height: 50px; position: relative; } p:after { content: ""; width: 100px; height: 50px; position: absolute; top: 0; right: 0; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,1)); } 我希望做的是设置CSS不透明度渐变。 这种工作,但是代码太乱了。 看第二个例子,我可以在jQuery中实现它,但是有什么方法可以完全在CSS中做到这一点? 回答1 您可以在CSS中完成此操作,但当前除了现代版本的Chrome,Safari和Opera外,浏览器中没有太多支持。 Firefox当前仅支持SVG掩码。 有关更多信息,请参见Caniuse结果。 CSS: p { color: red; -webkit-mask-image: -webkit-gradient(linear, left top, left

2021-04-06 16:10:58    分类:技术分享    css

Canvas 2D详解
大家好,我是石璞东。 在我书的第六章中有一个关于MNIST手写数字的例子,当数据集加载完成之后,用户可以在<canvas/>上输入手写数字,点击「预测」按钮之后,浏览器会弹出经模型预测之后的结果;在我书的第九章和第十章中,分别有关于目标检测和人体姿态检测的案例,当关键点的得分符合一定要求时,会通过<canvas/>将关键部分绘制出来,请看效果: 图1 - MNIST手写数字案例 图2 - 人体姿态检测案例 图3 - 目标检测案例 接下来,我们将在本文中详细讲解一下上述三个模块均用到的一个技术<canvas/>。 参考资料 MDN Web Docs:https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API《JavaScript高级程序设计(第三版)》《HTML5权威指南》 1.canvas概述 HTML5最受欢迎的功能就是<canvas>元素,Canvas API提供了一个通过JavaScript和HTML的<canvas>元素来绘制图形的方式,可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面,该API主要聚焦于2D图形,我们也可以使用WebGL API绘制硬件加速的2D和3D图形。 2.基本用法 使用<canvas>大概可以分为两个步骤: 在HTML中定义<canvas>标签;获取<canvas

2021-03-31 10:09:00    分类:博客    

有没有办法使用CSS3 / Canvas来弯曲/弧形文本(Is there a way to curve / arc text using CSS3 / Canvas)
问题 我正在尝试使用CSS3,HTML Canvas甚至是SVG来制作弯曲的文本效果(例如,请参见下图)? 这可能吗? 如果是这样,我怎么能达到这种效果? 更新:澄清:以这种方式设置样式的文本将是动态的。 回答1 SVG直接支持路径上的文本,尽管它不会沿路径“弯曲”单个字形。 这是如何创建它的示例: ... <defs> <path id="textPath" d="M10 50 C10 0 90 0 90 50"/> </defs> <text fill="red"> <textPath xlink:href="#textPath">Text on a Path</textPath> </text> ... 回答2 您当然可以在canvas上进行操作,请尝试以下代码作为示例: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Testing min-width and max-width</title> <style type="text/css"> </style> </head> <body> <canvas id="cnv"></canvas> <script type="text/javascript" charset="utf-8"> cnv = document

2021-04-10 12:56:22    分类:技术分享    javascript   html   canvas   css

Android,canvas:如何清除(删除)位于surfaceView中的画布(=位图)的内容?(Android, canvas: How do I clear (delete contents of) a canvas (= bitmaps), living in a surfaceView?)
问题 为了制作一个简单的游戏,我使用了一个模板来绘制带有位图的画布,如下所示: private void doDraw(Canvas canvas) { for (int i=0;i<8;i++) for (int j=0;j<9;j++) for (int k=0;k<7;k++) { canvas.drawBitmap(mBits[allBits[i][j][k]], i*50 -k*7, j*50 -k*7, null); } } (画布在“ run()”中定义,/ SurfaceView位于GameThread中。) 我的第一个问题是如何清除(或重新绘制)整个画布以形成新的布局? 其次,如何仅更新屏幕的一部分? // This is the routine that calls "doDraw": public void run() { while (mRun) { Canvas c = null; try { c = mSurfaceHolder.lockCanvas(null); synchronized (mSurfaceHolder) { if (mMode == STATE_RUNNING) updateGame(); doDraw(c); } } finally { if (c != null) { mSurfaceHolder

2021-04-03 21:00:54    分类:技术分享    android   android-canvas   surfaceview

如何从画布上清除图表以使悬停事件无法触发?(How to clear a chart from a canvas so that hover events cannot be triggered?)
问题 我正在使用Chartjs来显示折线图,并且可以正常工作: // get line chart canvas var targetCanvas = document.getElementById('chartCanvas').getContext('2d'); // draw line chart var chart = new Chart(targetCanvas).Line(chartData); 但是,当我尝试更改图表的数据时,就会出现问题。 我通过使用新的数据点创建图表的新实例来更新图形,然后重新初始化画布。 这很好。 但是,当我将鼠标悬停在新图表上时,如果碰巧经过了与旧图表上显示的点相对应的特定位置,则仍将触发悬停/标签,并且突然可以看到旧图表。 当我的鼠标位于该位置时,它仍然可见,而从该点移开时,它便消失了。 我不希望显示旧图表。 我想将其完全删除。 在加载新画布之前,我已尝试清除画布和现有图表。 喜欢: targetCanvas.clearRect(0,0, targetCanvas.canvas.width, targetCanvas.canvas.height); 和 chart.clear(); 但是到目前为止,这些方法都没有起作用。 关于如何阻止这种情况发生的任何想法? 回答1 我对此有很大的问题 首先我想.clear()然后,我尝试.destroy(

2021-04-10 05:37:50    分类:技术分享    javascript   html   charts   chart.js

如何在Tkinter画布上创建按钮?(How do you create a Button on a tkinter Canvas?)
问题 我创建了一个框架,然后创建了一个画布。 我接下来要做的是在画布上添加一个按钮。 但是,当我打包按钮时,我看不到画布! 这是我尝试过的: from Tkinter import Tk, Canvas, Frame, Button from Tkinter import BOTH, W, NW, SUNKEN, TOP, X, FLAT, LEFT class Example(Frame): def __init__(self, parent): Frame.__init__(self, parent) self.parent = parent self.initUI() def initUI(self): self.parent.title("Layout Test") self.config(bg = '#F0F0F0') self.pack(fill = BOTH, expand = 1) #create canvas canvas1 = Canvas(self, relief = FLAT, background = "#D2D2D2", width = 180, height = 500) canvas1.pack(side = TOP, anchor = NW, padx = 10, pady = 10) #add quit button button1 =

2021-04-21 18:14:48    分类:技术分享    python   user-interface   button   tkinter

如何知道字体(@ font-face)是否已经加载?(How to know if a font (@font-face) has already been loaded?)
问题 我使用的是Font-Awesome,但未加载字体文件时,图标显示为。 因此,我希望这些图标在没有加载文件时display:none 。 @font-face { font-family: "FontAwesome"; src: url('../font/fontawesome-webfont.eot'); src: url('../font/fontawesome-webfont.eot?#iefix') format('eot'), url('../font/fontawesome-webfont.woff') format('woff'), url('../font/fontawesome-webfont.ttf') format('truetype'), url('../font/fontawesome-webfont.svg#FontAwesome') format('svg'); font-weight: normal; font-style: normal; } 我怎么知道这些文件已经加载,我终于可以显示图标了? 编辑:我不是在说页面何时被加载(onload),因为字体可以在整个页面之前被加载。 回答1 现在在GitHub上:https://github.com/patrickmarabeas/jQuery-FontSpy.js 本质上

2021-03-26 11:52:37    分类:技术分享    javascript   jquery   css   font-face   font-awesome

Fabric.js画布上的多个剪切区域(Multiple clipping areas on Fabric.js canvas)
问题 为了制作Photo Collage Maker,我使用具有基于对象的裁剪功能的fabric js。 此功能很棒,但是无法缩放,移动或旋转该裁剪区域内的图像。 我想要一个固定位置的裁剪区域,并且图像可以根据用户需要定位在固定裁剪区域内。 我用谷歌搜索,找到非常接近的解决方案。 var canvas = new fabric.Canvas('c'); var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.rect(10,10,150,150); ctx.rect(180,10,200,200); ctx.closePath(); ctx.stroke(); ctx.clip(); Fabric JS画布上的多个剪切区域 一个剪辑区域的图像已出现在另一个剪辑区域中。 我如何避免这种情况,还是有另一种使用Fabric JS完成此操作的方法。 回答1 这可以通过Fabric使用clipTo属性来完成,但是您必须在clipTo函数中“反转”转换(缩放和旋转)。 当您在Fabric中使用clipTo属性时,缩放和旋转将在裁剪后应用,这意味着裁剪将随图像缩放和旋转。 您必须通过在clipTo属性函数中应用与转换完全相反的方式来对此进行反击。 我的解决方案涉及让Fabric.Rect用作剪辑区域的“占位符”(这是有优势的

2021-04-06 18:40:51    分类:技术分享    html5-canvas   photo   fabricjs   image-clipping

如何在JavaFX中计算字符串的像素宽度?(How to calculate the pixel width of a String in JavaFX?)
问题 在Java FX 2.2中似乎没有API调用来计算文本字符串的宽度(以像素为单位)。 在其他论坛上也有解决方法的建议,但是我创建或查找使用默认字体或其他方式返回String宽度的任何代码的工作都失败了。 任何帮助,将不胜感激。 回答1 如果仅在不使用CSS的情况下测量默认字体,请执行以下操作: 将要测量的字符串放置在Text对象中。 获取Text对象的布局范围的宽度。 如果您需要应用CSS: 将要测量的字符串放置在Text对象中。 创建一个一次性场景,然后将Text对象放置在场景中。 拍摄文本快照(如果您使用的是Java 7)或调用适用于Java 8的applyCss。 获取Text对象的布局范围的宽度。 之所以有效,是因为它在Text上强制执行布局传递,以计算其布局范围。 步骤2中的场景是必需的,因为这只是CSS处理器的工作方式(它需要一个节点位于Scene中才能执行其工作)。 如果您想进一步了解处理过程,请务必阅读适用于applyCss的链接Javadoc。 样例代码 import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.control.*; import javafx.scene.text.Text; import javafx.stage.Stage

2021-04-03 22:18:08    分类:技术分享    java   javafx-2   javafx

单击div进入基础元素(Click through div to underlying elements)
问题 我有一个具有background:transparent以及border的div 。 在这个div之下,我还有更多元素。 当前,当我在overlay div之外单击时,我可以单击基础元素。 但是,当直接单击overlay div时,我无法单击基础元素。 我希望能够单击此div以便可以单击基础元素。 回答1 是的,你可以做到这一点。 使用pointer-events: none与IE11一起使用的CSS条件语句(在IE10或更低版本中不起作用),您可以获得针对此问题的跨浏览器兼容解决方案。 使用AlphaImageLoader ,您甚至可以将透明.PNG/.GIF放置在叠加div并使点击流到下面的元素。 CSS: pointer-events: none; background: url('your_transparent.png'); IE11有条件: filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_transparent.png', sizingMethod='scale'); background: none !important; 这是带有所有代码的基本示例页面。 回答2 是的,你可以强制重叠层通过(忽略)点击事件。 再加上你可以有从这种行为排除特定的孩子

2021-03-26 16:03:56    分类:技术分享    css

设置文本属性后,将重置UITextView样式(UITextView style is being reset after setting text property)
问题 我有UITextView *_masterText并且在调用方法setText属性字体被重置之后。 我更改sdk 7后就发生了这种情况。_masterText是IBOutlet ,全局,属性在情节提要中设置。 只有我还是这是一般的SDK错误? @interface myViewController : UIViewController { IBOutlet UITextView *_masterText; } @implementation myViewController -(void)viewWillAppear:(BOOL)animated { [_masterText setText:@"New text"]; } 回答1 坐了几个小时,我发现了这个错误。 如果属性“ Selectable” = NO,则在使用setText时将重置字体和字体颜色。 因此,将Selectable设为ON,该错误将消失。 回答2 我遇到了相同的问题(在Xcode 6.1上),尽管John Cogan的答案对我有用,但我发现用类别扩展UITextView类对于我的特定项目是更好的解决方案。 界面 @interface UITextView (XcodeSetTextFormattingBugWorkaround) - (void)setSafeText:(NSString *

2021-04-07 02:57:45    分类:技术分享    ios   cocoa-touch   fonts   uitextview

拖放到Fabric.js画布中(Drag and Drop into Fabric.js canvas)
问题 如何将项目(例如图像或其他画布中的其他对象)拖放到受fabricjs管理的画布中? 我发现了很多示例如何在画布内移动项目,但我想将项目从外部元素拖放到画布中。 回答1 既然您要求一个示例,而我还没有自己尝试过,那么这里是: 小提琴的例子 标记 <div id="images"> <img draggable="true" src="http://i.imgur.com/8rmMZI3.jpg" width="250" height="250"></img> <img draggable="true" src="http://i.imgur.com/q9aLMza.png" width="252" height="295"></img> <img draggable="true" src="http://i.imgur.com/wMU4SFn.jpg" width="238" height="319"></img> </div> <div id="canvas-container"> <canvas id="canvas" width="800" height="600"></canvas> </div> JS故障 1. Fabric.canvas实例 首先,我们当然要我们的画布: var canvas = new fabric.Canvas('c'); 2.功能检测(可选)

2021-04-23 23:51:01    分类:技术分享    drag-and-drop   fabricjs

SwiftUI官方示例入门
SwiftUI项目下载地址 Section 1 Create a New Project and Explore the Canvas 创建一个新项目并探索画布 Create a new Xcode project that uses SwiftUI. Explore the canvas, previews, and the SwiftUI template code. To preview and interact with views from the canvas in Xcode, ensure your Mac is running macOS Catalina 10.15 创建一个使用SwiftUI的新Xcode项目。浏览画布、预览和SwiftUI模板代码。 要在Xcode中预览和与来自画布的视图交互,请确保您的Mac运行macOS Catalina 10.15 Step 1 Open Xcode and either click Create a new Xcode project in Xcode’s startup window, or choose File > New > Project. 打开Xcode,在Xcode的启动窗口中单击Create a new Xcode project,或者选 File > New > Project. Step 2 In

2021-04-07 13:02:04    分类:博客    

如何将两个相同尺寸的画布彼此堆叠?(How can I stack two same-sized canvas on top of each other?)
问题 下面是代码。 我想在画布下面放一个motionCanvas。 <html> <head> <script type="text/javascript" src="game.js"></script> </head> <body> <canvas id="canvas" width="710" height="597" style="border:1px solid #c3c3c3;"> <p>Your browser doesn't support canvas!</p> </canvas> <canvas id="movementCanvas" width="710" height="597" style="border:1px solid #c3c3c3;"> </canvas> </body> </html> 第二个问题。 在更高的级别上,我正在尝试隐藏下面的画布。 运动画布是一种颜色编码的地图,在其中单击时我将查找其中的值,并且访问像素的唯一方法是使用HTML5画布和上下文。 顶部的“画布”是前端,应该看起来不错。 听起来这是理智的方法吗? 回答1 使用CSS的position: absolute 。 将以下CSS添加到您的页面: canvas { position: absolute; top: 0; left: 0; } 这会将两个画布放在同一位置:最左上角的部分

2021-04-19 00:56:52    分类:技术分享    css   html

如何获得在画布元素上单击鼠标的坐标?(How do I get the coordinates of a mouse click on a canvas element?)
问题 将click事件处理程序添加到canvas元素(将返回click的x和y坐标(相对于canvas元素))的最简单方法是什么? 不需要旧版浏览器兼容性,Safari,Opera和Firefox都可以。 回答1 编辑2018:这个答案很老了,它使用检查不再需要的旧浏览器,因为clientX和clientY属性在所有当前浏览器中都有效。 您可能想查看Patriques Answer,以获得更简单,最新的解决方案。 原始答案: 正如我当时发现的一篇文章中所述,但不再存在: var x; var y; if (e.pageX || e.pageY) { x = e.pageX; y = e.pageY; } else { x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; } x -= gCanvasElement.offsetLeft; y -= gCanvasElement.offsetTop; 对我来说工作得很好。 回答2 如果您喜欢简单性,但仍然想要跨浏览器功能,那么我发现此解决方案最适合我。 这是

2021-03-26 16:43:48    分类:技术分享    javascript   canvas

如何在html 5画布上旋转单个对象?(How do I rotate a single object on an html 5 canvas?)
问题 我试图弄清楚如何在html 5画布上旋转单个对象。 例如:http://screencast.com/t/NTQ5M2E3Mzct-我希望这些卡中的每一张都以不同的角度旋转。 到目前为止,我所看到的只是文章和示例,它们演示了旋转整个画布的方法。 现在,我猜测我必须先旋转画布,绘制图像,然后再将画布旋转回到其原始位置,然后再绘制第二个图像。 如果是这样,那就让我知道! 我只是有另一种感觉。 有人知道吗 提前致谢! 回答1 不幸的是,在HTML5 canvas元素中,您不能旋转单个元素。 动画的工作方式类似于在MS Paint中进行绘制:您绘制一些东西,创建一个屏幕..使用橡皮擦删除一些东西,以不同的方式绘制一些东西,创建一个屏幕..在顶部绘制其他东西,创建一个屏幕..等等。 如果画布上已有项目,则必须将其擦除(例如,使用ctx.fillRect()或clearRect() ),然后绘制旋转的对象。 如果不确定在开始绘制时如何旋转它: ctx.save(); ctx.rotate(0.17); // draw your object ctx.restore(); 回答2 我在最近的一个项目中遇到了同样的问题(在那里我踢到各处旋转外星人)。 我只是使用了这个不起眼的功能,它执行相同的功能,并且可以与ctx.rotate相同的方式使用,但可以传递一个角度。 对我来说很好。

2021-04-10 08:18:51    分类:技术分享    javascript   animation   html   canvas

H5 - Canvas 技术详解
文章目录 1. 介绍2. 基本用法2.1 替代内容(不支持时显示)2.2 获取 2D 渲染上下文:getContext()2.3 代码模板 3. 绘制形状3.1 画布栅格 及 坐标空间3.2 唯一可以原生绘制的图形:矩形3.3 绘制路径3.4 各种 子路径类型 的绘制方法3.4.1 使用 二次贝塞尔曲线,画对话气泡:quadraticCurveTo()3.4.2 使用 三次贝塞尔曲线,画心形:bezierCurveTo()3.4.3 子路径 综合使用,画 经典游戏吃豆人 的静态界面 3.5 缓存路径:Path2D 对象3.5.1 Path2D 对象的使用示例3.5.2 使用 SVG paths 作为 Path2D对象 的参数,进行路径缓存 4. 添加颜色 和 样式4.1 色彩属性4.1.1 画出渐变色板:fillStyle 属性4.1.2 画出渐变圆形组:strokeStyle 属性 4.2 透明度:globalAlpha 属性4.3 线型属性(线宽,末端样式,节点样式,虚线设置)4.4 渐变:canvasGradient 对象4.4.1 线性渐变 示例:createLinearGradient()4.4.1 径向渐变 示例:createRadialGradient() 4.5 背景图案:createPattern()4.6 阴影属性 5. 绘制文本5.1 基本使用5.2 文本样式

2021-04-21 10:50:57    分类:博客    

输入类型文本(不是文本区域)中的插入位置(以像素为单位)(Caret position in pixels in an input type text (not a textarea) [duplicate])
问题 这个问题已经在这里有了答案: 如何在文本框中获取插入符号的(x,y)像素坐标? (3个答案) 7年前关闭。 更新:获取输入元素的获取光标或文本位置(以像素为单位)的重复。 TL; DR-使用令人难以置信的轻便且健壮的textarea-caret-position组件库,该库现在也支持<input ype="text"> 。 演示在http://jsfiddle.net/dandv/aFPA7/ 有没有办法知道插入符号在HTML文本字段内的位置? <input type='text' /> 我想根据插入符号的位置以像素为单位(并重新定位)div。 注意:我不想知道字符或<textarea> 。 我想知道<input>元素中像素的位置。 回答1 使用不可见的人造元素 您可以通过使用绝对定位的不可见(使用visibility不display )人造元素来实现此目的,该元素具有与输入文本框相同的CSS属性(字体,左边框和左填充)。 这个非常简短易懂的JSFiddle是该脚本应如何工作的起点。 它可以在Chrome和Firefox中直接使用。 似乎它也应该在IE9 +中运行。 Internet Explorer 8(及更低版本)将需要一些其他代码才能从输入文本框中的文本开始获取插入位置。 我什至在顶部添加了一个仪表,以每10像素显示一条线,以便您查看其是否正确测量。 请注意,线条位于1

2021-04-23 11:16:35    分类:技术分享    javascript   html   textinput   caret

如何在NSAttributedString中创建可点击的链接?(How can I make a clickable link in an NSAttributedString?)
问题 使超链接在UITextView可单击很简单。 您只需在IB中的视图上设置“检测链接”复选框,它就会检测HTTP链接并将其转换为超链接。 但是,这仍然意味着用户看到的是“原始”链接。 RTF文件和HTML都允许您设置带有字符串“后”的用户可读字符串。 将属性文本安装到文本视图(或UILabel或UITextField )很容易。但是,当该属性文本包含链接时,则不可单击。 有没有一种方法可以使用户可读的文本在UITextView , UILabel或UITextField可单击? SO上的标记是不同的,但这是一般的想法。 我想要的是这样的文字: 此变形是使用Face Dancer生成的,单击可在应用商店中查看。 我唯一能得到的是: 此变体是使用Face Dancer生成的,请单击http://example.com/facedancer在应用商店中查看。 回答1 使用NSMutableAttributedString。 NSMutableAttributedString * str = [[NSMutableAttributedString alloc] initWithString:@"Google"]; [str addAttribute: NSLinkAttributeName value: @"http://www.google.com" range

2021-03-29 00:12:02    分类:技术分享    ios   objective-c   hyperlink   uitextview   nsattributedstring

一次单击即可选择所有DIV文本(Select all DIV text with single mouse click)
问题 当用户单击DIV时如何突出显示/选择DIV标签的内容...这个想法是所有文本都被突出显示/选择,因此用户不需要用鼠标手动突出显示文本,并且可能错过了一点文字? 例如,假设我们有一个DIV,如下所示: <div id="selectable">http://example.com/page.htm</div> ...并且当用户单击该URL中的任何URL时,整个URL文本将突出显示,以便他们可以轻松地在浏览器中四处拖动所选文本,或单击鼠标右键复制完整的URL。 谢谢! 回答1 function selectText(containerid) { if (document.selection) { // IE var range = document.body.createTextRange(); range.moveToElementText(document.getElementById(containerid)); range.select(); } else if (window.getSelection) { var range = document.createRange(); range.selectNode(document.getElementById(containerid)); window.getSelection().removeAllRanges()

2021-03-26 11:22:25    分类:技术分享    javascript   css

是否检测HTML画布中某些点的鼠标悬停?(Detect mouseover of certain points within an HTML canvas?)
问题 我已经为Canvas构建了一个分析数据可视化引擎,并被要求在数据元素上添加类似于工具提示的悬停,以在光标下方显示该数据点的详细指标。 对于具有简单正方形区域或特定兴趣点的简单条形图和盖恩特图,树形图和节点图,我可以通过将绝对定位的DIV与:hover属性叠加来实现此目的,但是还有一些更复杂的可视化效果,例如饼图还有一个交通流渲染图,该渲染图具有由bezeir曲线定义的数百个独立区域。 当用户将鼠标悬停在特定的闭合路径上时,是否可以以某种方式附加覆盖或触发事件? 需要为其指定悬停的每个区域定义如下: context.beginPath(); context.moveTo(segmentRight, prevTop); context.bezierCurveTo(segmentRight, prevTop, segmentLeft, thisTop, segmentLeft, thisTop); context.lineTo(segmentLeft, thisBottom); context.bezierCurveTo(segmentLeft, thisBottom, segmentRight, prevBottom, segmentRight, prevBottom); /* * ...define additional segments... */ // <dream>

2021-04-22 03:14:23    分类:技术分享    javascript   canvas

Android-如何在textview上显示文本选择?(Android- How can I show text selection on textview?)
问题 我正在实施一个epub阅读应用程序,其中使用textview显示epub文本。 我想在用户长按textview时从textview中选择文本,然后对textview的选定文本进行多种操作,例如高亮显示等。因此,如何向用户显示这些光标以选择用户想要的文本。 *我不想使用EditText并使它看起来像textview。 可能优先于textview。 *我已附上屏幕截图,以解释我要寻找的内容- 回答1 这是很久以前问的,当时我自己也遇到这个问题。 我为自己的应用程序Jade Reader制作了一个Selectable TextView。 我已经将解决​​方案托管到GitHub。 (BitBucket上的代码与应用程序绑定在一起,但是更加完整和完善。) 可选TextView(在GitHub上) 玉器(在BitBucket上) 使用以下代码将使您的TextView可选。 package com.zyz.mobile.example; import android.app.Activity; import android.os.Bundle; import android.view.MotionEvent; import android.view.View; public class MainActivity extends Activity { private

2021-04-03 19:07:52    分类:技术分享    android   textview   android-edittext   textselection

SVG和HTML5 Canvas有什么区别?(What is the difference between SVG and HTML5 Canvas?)
问题 SVG和HTML5 Canvas有什么区别? 他们似乎都对我做同样的事情。 基本上,它们都使用坐标点绘制矢量插图。 我想念什么? SVG和HTML5 Canvas之间的主要区别是什么? 为什么我要选择一个? 回答1 参见Wikipedia:http://en.wikipedia.org/wiki/Canvas_element SVG是用于在浏览器中绘制形状的较早标准。 但是,SVG从根本上来说是较高的级别,因为每个绘制的形状都被记住为场景图或DOM中的对象,随后将其渲染为位图。 这意味着,如果更改了SVG对象的属性,则浏览器可以自动重新渲染场景。 在上面的示例中,一旦绘制了矩形,系统就会忘记绘制矩形的事实。 如果要更改其位置,则需要重新绘制整个场景,包括可能已被矩形覆盖的所有对象。 但是在等效的SVG情况下,只需更改矩形的位置属性,浏览器就会确定如何重绘矩形。 也可以在图层中绘制画布,然后重新创建特定的图层。 SVG图像以XML表示,可以使用XML编辑工具创建和维护复杂的场景。 SVG场景图使事件处理程序可以与对象相关联,因此矩形可以响应onClick事件。 为了获得与画布相同的功能,必须手动将鼠标单击的坐标与绘制的矩形的坐标相匹配,以确定是否单击了该矩形。 从概念上讲,canvas是可以在其上构建SVG的较低级别协议。[需要引用]但是,(通常)情况并非如此-它们是独立的标准

2021-04-19 07:52:24    分类:技术分享    html   canvas   svg

如何在浏览器中通过Javascript压缩图像?(How to compress an image via Javascript in the browser?)
问题 TL; DR; 上传之前,有没有一种方法可以直接在浏览器端压缩图像(主要是jpeg,png和gif)? 我很确定JavaScript可以做到这一点,但是我找不到实现它的方法。 这是我要实现的完整方案: 用户访问我的网站,并通过input type="file"元素选择图片, 该图片是通过JavaScript检索的,我们进行了一些验证,例如正确的文件格式,最大文件大小等, 如果一切正常,则会在页面上显示图像的预览, 用户可以执行一些基本操作,例如将图像旋转90°/ -90°,按照预定义的比例进行裁剪等,或者用户可以上传其他图像并返回到第1步当用户满意时,然后将编辑后的图像压缩并本地“保存”(不保存到文件中,而是保存在浏览器的内存/页面中),- 用户使用姓名,年龄等数据填写表单, 用户单击“完成”按钮,然后将包含数据和压缩图像的表单发送到服务器(不使用AJAX), 直到最后一步的整个过程都应该在客户端完成,并且应该与最新的Chrome和Firefox,Safari 5+和IE 8+兼容。 如果可能的话,应该只使用JavaScript(但我很确定这是不可能的)。 我现在还没有编写任何代码,但是我已经考虑过了。 可以通过File API在本地读取文件,可以使用Canvas元素完成图像预览和编辑,但是我找不到找到图像压缩部分的方法。 根据html5please.com和caniuse

2021-03-26 13:38:20    分类:技术分享    javascript   image   cross-browser   compression

如何使Matplotlib图形在Tkinter GUI中正确滚动+调整大小(How to get a Matplotlib figure to scroll + resize properly in a Tkinter GUI)
问题 我有一个Tkinter GUI,它显示Matplotlib图(带有Matplotlib 1.2.0rc2的Python 2.7.3),并允许用户配置图的某些方面。 地块往往会变大,因此该地物被包裹在滚动画布中。 配置图的一方面是更改其大小。 现在,虽然图一方面可以正确滚动,而另一方面大小调整也可以,但是这两种操作无法结合使用。 下面是演示效果的脚本。 (很抱歉,长度太短了,我无法缩短它。)您可以滚动显示图(使用滚动条),也可以将其放大和缩小(使用按钮)。 但是,无论何时滚动,图形都将重置为其原始大小。 显然,我希望图形的大小不因使用滚动条而改变。 import math from Tkinter import Tk, Button, Frame, Canvas, Scrollbar import Tkconstants from matplotlib import pyplot as plt from matplotlib.backends.backend_tkagg import FigureCanvasTkAgg def addScrollingFigure(figure, frame): # set up a canvas with scrollbars canvas = Canvas(frame) canvas.grid(row=0, column=0, sticky

2021-04-23 10:16:26    分类:技术分享    python   matplotlib   tkinter

HTML5 Canvas相机/视口-实际如何做?(HTML5 Canvas camera/viewport - how to actually do it?)
问题 我确定这是在1000年前解决的:我得到了一个960 * 560大小的画布和一个5000 * 3000大小的房间,根据玩家所在的位置,总是只能绘制960 * 560的房间。 玩家应该始终处于中间位置,但是当靠近边界时-应该计算出最佳视角)。 播放器可以使用WASD或箭头键完全自由移动。 并且所有对象都应该移动-而不是我移动除玩家以外的所有其他物体,以创建玩家移动的错觉。 我现在找到了这两个问题: HTML5-为画布创建视口,但是仅对于这种类型的游戏,我无法为我复制代码。 更改html5画布的视图“中心”似乎更有希望,也可以执行,但是我仅理解它是为了相对于播放器正确绘制所有其他对象,而不是如何相对于播放器滚动画布视口,我想要首先要实现。 我的代码(简化了-游戏逻辑是单独的): var canvas = document.getElementById("game"); canvas.tabIndex = 0; canvas.focus(); var cc = canvas.getContext("2d"); // Define viewports for scrolling inside the canvas /* Viewport x position */ view_xview = 0; /* Viewport y position */ view_yview = 0; /*

2021-04-06 20:22:03    分类:技术分享    javascript   html   canvas   html5-canvas   viewport

Android中的垂直(旋转)标签(Vertical (rotated) label in Android)
问题 我需要2种在Android中显示垂直标签的方法: 水平标签逆时针旋转90度(侧面字母) 带有一个字母在另一个字母下方的水平标签(例如商店的招牌) 我是否需要针对这两种情况(一种情况)开发自定义小部件,是否可以使TextView以这种方式呈现,并且如果我需要完全自定义,那么做这样的事情的一种好方法是什么? 回答1 这是我优雅而简单的垂直文本实现,扩展了TextView。 这意味着可以使用所有标准样式的TextView,因为它是TextView的扩展。 public class VerticalTextView extends TextView{ final boolean topDown; public VerticalTextView(Context context, AttributeSet attrs){ super(context, attrs); final int gravity = getGravity(); if(Gravity.isVertical(gravity) && (gravity&Gravity.VERTICAL_GRAVITY_MASK) == Gravity.BOTTOM) { setGravity((gravity&Gravity.HORIZONTAL_GRAVITY_MASK) | Gravity.TOP); topDown = false

2021-03-26 12:06:48    分类:技术分享    android   label   textview   vertical-alignment

使画布与父级一样宽和一样高(make canvas as wide and as high as parent)
问题 我想制作一个矩形画布来模拟进度条,但是当我将画布的宽度和高度设置为100%时,它并没有真正使它与父对象一样高和那么宽 请参见下面的示例 http://jsfiddle.net/PQS3A/ 甚至可以制作非正方形的画布吗? 我不想对画布的高度和宽度进行硬编码,因为在更大或更小的屏幕(包括移动设备)上查看时,画布应该动态更改 回答1 这是一个解决问题的可行示例: http://jsfiddle.net/PQS3A/7/ 您的示例遇到了几个问题: <div>没有height或width属性。 您需要通过CSS进行设置。 即使div的大小正确,它也会使用默认的position:static ,这意味着它不是任何子级的定位父级。 如果希望画布与div大小相同,则必须将div设置为position:relative (或absolute或fixed )。 画布上的width和height属性指定要绘制的数据像素数(如图像中的实际像素),并且与画布的显示大小分开。 这些属性必须设置为整数。 上面链接的示例使用CSS设置div大小并将其设置为父级。 它创建了一个JS函数(如下所示),将画布设置为与其放置的父对象相同的显示尺寸,然后调整内部的width和height属性,使其像素数与显示的相同。 var canvas = document.querySelector('canvas')

2021-04-03 14:13:40    分类:技术分享    javascript   css   html   canvas

如何在Android中使用textview显示上下颠倒的文字?(How can you display upside down text with a textview in Android?)
问题 如何在Android中使用textview显示上下颠倒的文字? 就我而言,我有一个2人游戏,他们彼此对战。 我想向面向他们的第二位玩家展示测试。 这是我在AaronMs的建议下实施的解决方案 进行重写的类bab.foo.UpsideDownText package bab.foo; import android.content.Context; import android.graphics.Canvas; import android.util.AttributeSet; import android.widget.TextView; public class UpsideDownText extends TextView { //The below two constructors appear to be required public UpsideDownText(Context context) { super(context); } public UpsideDownText(Context context, AttributeSet attrs) { super(context, attrs); } @Override public void onDraw(Canvas canvas) { //This saves off the matrix that the

2021-04-10 06:29:46    分类:技术分享    android   textview

获取鼠标在画布中的位置[重复](Getting mouse location in canvas [duplicate])
问题 这个问题已经在这里有了答案: 如何获得在画布元素上单击鼠标的坐标? (22个答案) 1年前关闭。 有没有一种方法可以将位置鼠标放入<canvas>标记内? 我想要相对于<canvas>右上角的位置,而不是整个页面的位置。 回答1 最简单的方法可能是将onmousemove事件侦听器添加到canvas元素,然后您可以从事件本身获取相对于画布的坐标。 如果您只需要支持特定的浏览器,则完成此任务很简单,但是f.ex之间存在差异。 Opera和Firefox。 像这样的东西应该适用于这两个: function mouseMove(e) { var mouseX, mouseY; if(e.offsetX) { mouseX = e.offsetX; mouseY = e.offsetY; } else if(e.layerX) { mouseX = e.layerX; mouseY = e.layerY; } /* do something with mouseX/mouseY */ } 回答2 接受的答案并非每次都有效。 如果不使用相对位置,则offsetX和offsetY属性可能会引起误解。 您应该使用canvas API中的功能canvas.getBoundingClientRect() 。 function getMousePos(canvas, evt) { var

2021-04-03 16:26:01    分类:技术分享    javascript   html   canvas

Unity从脚本创建UI控件(Unity Create UI control from script)
问题 我通过代码创建了一个切换开关,但是它不会显示。 此外,我无法更改文本字段的位置。 我尝试了很多,但没有任何效果。 这是我当前的版本,也许您看到了错误。 我是Unity的新手,很难。 public class Game : MonoBehaviour { public GameObject canvas; void Start () { GameObject newGO = new GameObject("myTextGO"); newGO.transform.SetParent(this.transform); newGO.transform.position = new Vector3(0, 0, 0); Text myText = newGO.AddComponent<Text>(); myText.text = "Ta-dah!"; Font ArialFont = (Font)Resources.GetBuiltinResource(typeof(Font),"Arial.ttf"); myText.font = ArialFont; myText.material = ArialFont.material; myText.color = Color.black; myText.transform.position = new Vector3(0, 10, 0)

2021-04-16 00:08:25    分类:技术分享    c#   unity3d   toggle   unity5

前端理论知识(1)
前端理论知识(1) html doctype 的作用是什么?标准模式与兼容模式各有什么区别? 你知道多少种Doctype文档类型 DOCTYPE的作用是告知浏览器的解析器用什么文档标准解析这个文档。 标准模式的以该浏览器支持的最高标准运行。 在兼容模式中,模拟老式浏览器的行为以防止站点无法工作。 简单的说,就是尽可能的显示能显示的东西给用户看。 XHTML 1.0中有3种文档类型定义分别是过渡的(Transitional)、严格的(Strict)和框架的(Frameset)。 html5为什么只需要写<!doctype html>? 需要doctype来规范浏览器的行为 行内元素有哪些?块级元素有哪些? 行内块元素有那些? 行内元素有: a b span strong i 块级元素有:div ul ol li h1…h6 hr form p td th 行内块元素有:img, input, textarea 请说出五种html5的特性 特性一:语义标签 特性二:本地存储 特性三:canvas画布 特性四:视频音频 特性五: 定位 请写出至少5个HTML块元素标签。 块级元素有:div ul ol li h1…h6 hr form p td th a标签在新窗口打开链接怎么加属性? 给a标签添加target=_blank属性 请列举几个html新增的标签? html5新增的标签

2021-04-16 12:07:18    分类:博客    

如何使标题框的宽度跨整个图?(How do I make the width of the title box span the entire plot?)
问题 考虑下面的熊猫系列s和情节 import pandas as pd import numpy as np s = pd.Series(np.random.lognormal(.001, .01, 100)) ax = s.cumprod().plot() ax.set_title('My Log Normal Example', position=(.5, 1.02), backgroundcolor='black', color='white') 如何获得包含标题的框以跨越整个图? 回答1 当然,有可能获得标题的边界框,即Text元素。 这可以用 title = ax.set_title(...) bb = title.get_bbox_patch() 原则上,然后可以例如通过bb.set_width(...)操作边界框。 但是,一旦matplotlib将标题绘制到画布上,所有设置都会丢失。 至少这就是我解释Text的draw()方法的方式。 我不知道设置边界框的其他方法。 例如,可以通过设置legend的边界框 plt.legend(bbox_to_anchor=(0., 1.02, 1., .102), loc=3, mode="expand")使其在整个轴范围内扩展(请参见此处)。 对Text也具有相同的选项将非常有用。 但是就目前而言,我们还没有。

2021-04-15 19:46:40    分类:技术分享    python   pandas   matplotlib

在不使用画布的情况下在JavaScript中调整Base-64图像的大小(Resize a Base-64 image in JavaScript without using canvas)
问题 我需要一种无需使用HTML元素即可在JavaScript中调整图片大小的方法。 我的移动HTML应用程序捕获照片,然后将它们转换为base64字符串。 此后,在将它们发送到API之前,我需要调整它们的大小,以节省存储空间。 我正在寻找一种比使用canvas元素更不同且更合适的调整大小的方法,有没有办法? 回答1 避免主HTML受到影响的一种方法是创建一个屏幕外的画布,该画布不在DOM树之内。 这将提供位图缓冲区和本地编译代码以对图像数据进行编码。 直接这样做: function imageToDataUri(img, width, height) { // create an off-screen canvas var canvas = document.createElement('canvas'), ctx = canvas.getContext('2d'); // set its dimension to target size canvas.width = width; canvas.height = height; // draw source image into the off-screen canvas: ctx.drawImage(img, 0, 0, width, height); // encode image to data-uri with

2021-04-07 15:08:26    分类:技术分享    javascript   canvas   resize   html5-canvas   base64