标签: drawimage

在我的用户控件的绘图处理程序中,我遍历一组预定义的Bitmap对象,并将它们绘制到客户区:

C#版本:

private void Control_Paint(object sender, PaintEventArgs e) {
    Graphics g = e.Graphics;
    foreach (BitmapObj bmpObj in _bitmapObjCollection) {
        g.DrawImageUnscaled(bmpObj.Bitmap, bmpObj.Location);
    }
}

VB.NET版本:

Private Sub Control_Paint(ByVal sender As Object, ByVal e As PaintEventArgs) Handles MyBase.Paint
    Dim g As Graphics = e.Graphics

    For Each bmpObj As BitmapObj In _bitmapObjCollection
        g.DrawImageUnscaled(bmpObj.Bitmap, bmpObj.Location)
    Next
End Sub

代码工作正常但是当十几个对象添加到集合时开始陷入困境.我的问题是:有没有办法加快速度？是否可以使用Win32 bitblt函数替换DrawImageUnscaled？如果是这样怎么样？

谢谢!

注意:到目前为止,谷歌搜索BitBlt的使用仅产生了我的屏幕截图样本......

我正在使用这个脚本:

var canvas = new fabric.Canvas('game_canvas', { selection: false });

fabric.Image.fromURL('images/bg.jpg', function(img) {
  img.set('left', 1024/2).set('top', 600/2).set('zindex', 0);
  canvas.add(img);        
});

fabric.Image.fromURL('images/panel-2-bg-l-r.png', function(img) {
  img.set('left', 262/2).set('top', (390/2)+110).set('zindex', 1);
  canvas.add(img);        
});

fabric.Image.fromURL('images/player-board.png', function(img) {
  img.set('left', 254/2).set('top', (122/2)).set('zindex', 2);
  canvas.add(img);        
});

fabric.Image.fromURL('images/player-board-top-red.png', function(img) {
  img.set('left', 203/2).set('top', (109/2)).set('zindex', 3);
  canvas.add(img).bringToFront(img);          
});

第三张图像绘制工作正常,并显示一个在另一个之上.但是,如果我添加第4个,它就会隐藏在第3个之后.如果我指定图像的zindex,它仍然只在第3个.

这有什么问题？我在这里做错了吗？请帮忙.

谢谢
彼得

所以,这就是我要做的事情:我想将视频加载到视频元素中,但不要以"正常"方式播放.使用根据电影的帧速率计算的定时间隔,我想在每次迭代时使用

A.手动将视频推进到一个"帧"(或尽可能接近).
B.将该框架绘制到画布中.

从而使视频在画布内"播放".

这是一些代码:

<video width="400" height="224" id="mainVideo" src="urltovideo.mp4" type="video/mp4"></video>
<canvas width="400" height="224" id="videoCanvas"></canvas>

<script type="text/javascript">

var videoDom = document.querySelector("#mainVideo");
var videoCanvas = document.querySelector("#videoCanvas");
var videoCtx = null;
var interval = null;

videoDom.addEventListener('canplay',function() {
   // The video's framerate is 24fps, so we should move one frame each 1000/24=41.66 ms
   interval = setInterval(function() { doVideoCanvas(); }, 41.66);
});

videoDom.addEventListener('loadeddata',function() {
  videoCtx = videoCanvas.getContext('2d');
});

function doVideoCanvas() {
  videoCtx.drawImage(videoDom,0,0);
  //AFAIK and seen, currentTime is in seconds
  videoDom.currentTime += 0.0416;
}

</script> …

我在jsperf上写了一些与以下内容相关的测试用例:1.在屏幕外画布上绘图2.在屏幕画布上绘制drawImage

我发现如果源画布中的像素数(无论dst)小于~65776像素,性能要高得多.

(我预计这个性能限制为65536像素,如果它会是什么)

这是我的测试用例: http://jsperf.com/pixel-count-matters/2

http://jsperf.com/magic-canvas/2

我相信这个人提出了一个类似的问题: 如果画布大于255x220,为什么FPS会下降？

谢谢你的帮助!!!

我正在使用画布为我的游戏实现菜单系统（出于某些性能原因，我无法使用 HTML/CSS 来制作菜单）。我使用 JSON 配置了菜单，menuComponent 对象是使用它们各自的属性（x、y、宽度、高度、imagePath 等）创建的。我有一个菜单加载器，然后它遍历组件对象并调用 componentObjects 的 draw 方法（当然，所有图像都等待它们的 onload 事件首先触发）。

无论如何，我希望我的图像按照调用它们的 draw 方法的顺序绘制，以便它们以正确的顺序重叠。大多数时候这种行为是正确的，但偶尔他们会以错误的顺序绘制。

我的问题是 - 我可以相信 Canvas 按照为这些图像调用 drawMethod 的顺序绘制图像吗？假设我有图像 A，例如 10MB，图像 B 是 10kb。如果我调用绘制图像 A然后绘制图像 B ，那么图像 B 是否有可能首先加载，因为它是一个较小的图像？

我试图让我的代码变得聪明（在我的组件对象中嵌套了组件并递归调用 draw 方法），所以我的代码中可能存在一些竞争条件，我只想确认上述行为是正确的。如果我添加逻辑来强制我的对象等待设置就绪标志，那么它似乎可以工作。但不幸的是，这会减慢我的菜单加载时间。

我有一个带有画布覆盖的视频元素.然后我有一个绘图工具设置来绘制视频和一个保存按钮,从视频和画布执行drawImage以保存一个压缩帧.但是,我第一次按Save我只从画布drawImage获得结果,视频没有显示.在随后的保存中,我收到两个图像正确分层.我认为这可能是加载视频图像的问题,但是在我点击保存之前视频已经完全加载,甚至可以推进帧并使其在第二次保存时正常工作.

这是代码......

<div style="width:960px; height:540px; display:inline-block;">
    <video id="video" src="media/_tmp/AA_017_COMP_v37.mov" width="960" height="540" ></video>
</div>
<canvas id="canvas" width="960" height="540" style="position:absolute; top:40px; left:9px; z-index:100;"></canvas>
<input type="button" value="save" id="btn" size="30" onclick="save()" style="float:left; padding:4px; margin-right:4px;" >
<div id="saved" style="border:1px solid #000; position:absolute; top:626px; left:10px; bottom:40px; width:958px; overflow:auto;">SAVED:</div>


function save() {

    //COMP CANVAS OVER VIDEOFRAME
    var video = document.getElementById("video");
    var currentFrame = Math.floor((<?php echo $mov_frames ?> / video.duration) * video.currentTime);

    var compCanvas = document.createElement('canvas');
    compCanvas.width = video.width;
    compCanvas.height = video.height;
    compContext = compCanvas.getContext('2d');
    compContext.drawImage(video, 0, 0); …

我试图在Image上写入某些字节,例如:

"་.༉ᵒᵗᵗ͟ᵋ͟͟͟͟͟͟͟͟͟͟͟͟͟͟͟͟͟͟͟͟͟"

当我在图像上显示它但我得到以下代替...

图片:

我已经尝试更改字符串的编码类型,当我收到字节并且没有设置字体但我尝试了所有默认的Microsoft字体以及我在Internet上找到的一些自定义字体.我究竟做错了什么？

编辑:原来正在使用Graphics.DrawString.我试过TextRenderer了,结果几乎相同.

图片:

这是我用来生成图像的代码:

string text = "[rotten4pple]  ?????????  ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?. . .";

var font = new Font("Arial", 8, FontStyle.Regular);
var bitmap = new Bitmap(1, 1);
var size = Graphics.FromImage(bitmap).MeasureString(text, font);
bitmap = new Bitmap((int)size.Width + 4, (int)size.Height + 4);
using (var gfx = Graphics.FromImage(bitmap))
{
    gfx.Clear(Color.White);
    TextRenderer.DrawText(gfx, cmd.AllArguments, font, new Point(2, …

我开发了一个具有约160张图像的应用程序。我正在创建160 img元素并加载它们。加载后，我使用HTML5 canvas元素显示它们。我正在使用drawImage在画布上显示图像。

我的问题是，只有在谷歌浏览器中，内存总是在增加。在其他浏览器（例如firefox或IE11）中，我的应用使用了大约260-300 MB，但是在chrome中使用了大约1,4 GB，这太多了。当我调用drawImage方法时，内存仅在增加。我已经尝试过画布上下文的clearRect方法，并且还尝试过重新创建画布（删除+附加组合）。

我的问题有可能解决的办法吗？它是镀铬的虫子吗？我已经使用chrome的任务管理器对其进行了测试。我已经看到，图像缓存也在增加，但是这对我来说并不合逻辑，因为我只加载了1次图像，而我只是将它们与drawImage方法一起使用。

谢谢您的体会。

我有一个画布,我使用javascript函数来显示文本和几个图像.我遇到的问题是点击确实执行该功能并显示文本,但并不总是放置图像.如果再次单击,则会显示图像.此行为在所有浏览器中都是一致的.命令不慢,只是第一次无法显示图像.TIA

// JavaScript Document

    function manualsTxt() {
        var theCanvas = document.getElementById('Canvas1');
        if (theCanvas && theCanvas.getContext) {
            var ctx = theCanvas.getContext("2d");

            if (ctx) {
                var img1 = new Image();
                var img2 = new Image();
                var img3 = new Image();
                img1.src = "images/InRoads2004.png";
                img2.src = "images/XMUp.png";
                img3.src = "images/XM.png";

                //clear canvas
                ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);

                // .drawImage (src, posX, posY);
                ctx.drawImage (img1, 50, 325);
                ctx.drawImage (img2, 250, 325);
                ctx.drawImage (img3, 450, 325);

                ctx.textBaseline = 'bottom';
                ctx.font         = 'bold 30px sans-serif';
                ctx.fillStyle   = '#671420';
                ctx.fillText ('InRoads …

我有一个关于随机城市交通网络模拟的Java项目,我已经设法找到了实现这个项目的方法,所以我将每个交叉点划分为一个基本上是扩展JPanel类(名为Carrefour)的部分.一切都运转良好,直到我遇到如何画车并让它们通过道路.

所以我的问题是如何在另一幅图像(道路)上绘制图像(车辆图像)？