画布规模麻烦与css3(canvas scale trouble with css3)
我的代码包含一个占视图端口85%的div,它包含一个画布。 我目前已经使画布可以滚动点击,但出于某种原因我随时调用canvas.style.transform =“scale(2,2)”; 画布尺寸保持不变。 有帮助吗?
编辑 - 我正在scaleUp()函数中进行缩放调用
<!--Div to view, div to zoom, div to translate --> <div id="view-translate" style="height:85vh; background-color:#f2f2f2; overflow:hidden; "> <canvas id="ctx" height="4000" width="4000" oncontextmenu="return false;" style="background-color:#ffffff;"></canvas> </div> <p id="text"></p> <button onclick="scaleUp()">yes</button> <script src="https://cdn.socket.io/socket.io-1.4.5.js"></script> <script> //NETWORK VARIABLES var socket = io(); //GETTING HTML ITEMS BY ID var tran = document.getElementById("view-translate"); var canvas = document.getElementById("ctx"); ctx = canvas.getContext("2d"); //canvas.style.transform = "scale(2,2)"; //canvas.style.transform = "translate(0px,0px)"; var tx = 0,//release x and y ty = 0, cx = 0,//click x and y cy = 0, mx= 0,//move x and y my = 0, scale = 1, draggable = false; ctx.fillStyle="red"; ctx.fillRect(0,0,4,4); function scaleUp(){ } //GETTING THE MOUSE X AND Y function getMousePos(canvas, event){ var rect = canvas.getBoundingClientRect(); return { x:event.clientX - rect.left, y:event.clientY - rect.top }; } canvas.addEventListener('mousedown', function(event){ var pos = getMousePos(canvas, event); cx = pos.x; cy = pos.y; if(event.which === 3){ draggable = true; } if(event.which === 1){ alert(cx + " " + cy); } if(event.which === 2){ } }, false ); tran.addEventListener('mousedown', function(event){ var pos = getMousePos(tran, event); if(event.which === 3){ } if(event.which === 1){ } if(event.which === 2){ } }, false ); tran.addEventListener('mouseup', function(event){ if(event.which === 3){ draggable = false; } if(event.which === 1){ } if(event.which === 2){ } }, false ); tran.addEventListener('mousemove', function(event){ var pos = getMousePos(tran, event); mx = pos.x; my = pos.y; document.getElementById("text").innerHTML = mx + ", " + my + " size:" + canvas.height + " " + canvas.width; if(draggable){ tx = mx - cx; ty = my - cy; document.getElementById("text").innerHTML = "CLICK!" + tx + ", " + ty; canvas.style.transform = "translate(" + tx + "px, " + ty + "px)"; } }, false); </script> </html>
My code contains a div that is 85% of the view-port and it holds a canvas. I have currently made the canvas scroll-able on-click but for some reason anytime I call canvas.style.transform = "scale(2,2)"; the canvas remains the same size. Any help?
EDIT - i was making the call to scale in the scaleUp() function
<!--Div to view, div to zoom, div to translate --> <div id="view-translate" style="height:85vh; background-color:#f2f2f2; overflow:hidden; "> <canvas id="ctx" height="4000" width="4000" oncontextmenu="return false;" style="background-color:#ffffff;"></canvas> </div> <p id="text"></p> <button onclick="scaleUp()">yes</button> <script src="https://cdn.socket.io/socket.io-1.4.5.js"></script> <script> //NETWORK VARIABLES var socket = io(); //GETTING HTML ITEMS BY ID var tran = document.getElementById("view-translate"); var canvas = document.getElementById("ctx"); ctx = canvas.getContext("2d"); //canvas.style.transform = "scale(2,2)"; //canvas.style.transform = "translate(0px,0px)"; var tx = 0,//release x and y ty = 0, cx = 0,//click x and y cy = 0, mx= 0,//move x and y my = 0, scale = 1, draggable = false; ctx.fillStyle="red"; ctx.fillRect(0,0,4,4); function scaleUp(){ } //GETTING THE MOUSE X AND Y function getMousePos(canvas, event){ var rect = canvas.getBoundingClientRect(); return { x:event.clientX - rect.left, y:event.clientY - rect.top }; } canvas.addEventListener('mousedown', function(event){ var pos = getMousePos(canvas, event); cx = pos.x; cy = pos.y; if(event.which === 3){ draggable = true; } if(event.which === 1){ alert(cx + " " + cy); } if(event.which === 2){ } }, false ); tran.addEventListener('mousedown', function(event){ var pos = getMousePos(tran, event); if(event.which === 3){ } if(event.which === 1){ } if(event.which === 2){ } }, false ); tran.addEventListener('mouseup', function(event){ if(event.which === 3){ draggable = false; } if(event.which === 1){ } if(event.which === 2){ } }, false ); tran.addEventListener('mousemove', function(event){ var pos = getMousePos(tran, event); mx = pos.x; my = pos.y; document.getElementById("text").innerHTML = mx + ", " + my + " size:" + canvas.height + " " + canvas.width; if(draggable){ tx = mx - cx; ty = my - cy; document.getElementById("text").innerHTML = "CLICK!" + tx + ", " + ty; canvas.style.transform = "translate(" + tx + "px, " + ty + "px)"; } }, false); </script> </html>
原文:https://stackoverflow.com/questions/43263339
更新时间:2023-03-04 16:03
相关问答
更多-
我在Moose的一个自定义日志角色中执行此操作(删除了无关的复杂代码): package MyApp::Role::Log; use Moose::Role; use Log::Log4perl; my @methods = qw( log trace debug info warn error fatal is_trace is_debug is_info is_warn is_error is_fatal logexit logwarn error_warn logdie e ...
-
您没有提供足够的信息来诊断您的问题(例如什么是Method :: Delegation以及它如何连接到Log4perl),但我的蜘蛛侠意识告诉我您可能有一个包装器方法,您可以从中调用Log4perl方法。 你应该从这个包装器中增加$Log::Log4perl::caller_depth的值(并在调用Log4perl后减少它),这样就确定了正确的位置。 例如在Moose ,我使用: package MyApp::Role::Log; use MooseX::Role::Strict; use Log::Lo ...
-
如何在Log :: Log4perl配置文件中使用Perl变量?(How can I use a Perl variable in my Log::Log4perl config file?)[2019-07-11]
成功时print返回1,所以 sub { print "$av_std_LOGFILE"; } 返回1,而不是$av_std_LOGFILE的值。 您还必须在钩子中完全限定变量名称 ,这意味着您必须使$av_std_LOGFILE成为全局包。 将你的钩子更改为: sub { return $main::av_std_LOGFILE; } # double quotes are unnecessary 并在脚本中设置$av_std_LOGFILE (在调用Log::Log4perl::init ): ou ... -
您可以填充组成您的条目的单个字段。 例如[pid =%5P]总会给你至少5个字符的PID。 Log :: Log4perl :: Layout文档中的“量化占位符”部分提供了更多详细信息。 You can pad the single fields that make up your entries. For example [pid=%5P] will always give you at least 5 characters for the PID. The "Quantify Placeholders ...
-
在Log::Log4perl FAQ中有一个问题: 我不断收到重复的日志消息! 怎么了? 。 In the Log::Log4perl FAQ there is a question: I keep getting duplicate log messages! What's wrong?.
-
下面是一个Log :: Log4perl配置文件的例子,它定义了午夜(日期模式yyyy-MM-dd)的每日滚动,在WARN级别保留最多5个保存的日志文件,并将所有内容倾倒到屏幕上: log4perl.logger = TRACE, Screen, Logfile log4perl.appender.Logfile = Log::Dispatch::FileRotate log4perl.appender.Logfile.Thres ...
-
我想你可以使用Log :: Log4perl :: Appender :: String作为例子:它看起来很简单。 Log :: Log4perl :: Appender (基类)文档也许对您有用。 I think you could use Log::Log4perl::Appender::String as an example: it looks very simple. Also Log::Log4perl::Appender (base class) documentation may be us ...
-
use Log::Log4perl qw(get_logger); $SIG{__DIE__} = sub { if($^S) { # We're in an eval {} and don't want log # this message but catch it later return; } $Log::Log4perl::caller_depth++; my $logger = get_logger(""); ...
-
Log :: Log4perl :: Layout :: PatternLayout中的日期格式由Log :: Log4perl :: DateFormat实现 ,它支持时区偏移的Z说明符: use strict; use warnings 'all'; use Log::Log4perl; my $conf = <<'CONF'; log4perl.logger.Foo = INFO, perllog log4perl.appender.perllog = Log: ...
-
我怎样才能在Log4perl中将输出压缩到stdout和stderr?(How can I suppress output to stdout and stderr in Log4perl?)[2023-10-29]
我找到了。 我必须将这一行添加到我的sub: $userlogger->additivity(0); 我在这里找到了答案: log4perl FAQ I found it. I have to add this line to my sub: $userlogger->additivity(0); I found the answer here: log4perl FAQ