个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我试图在按下空格键时获得钟面的阴影痕迹以跟随钟针。每个刻度都会重新绘制:
var stage, cont, arrow, cursorWedge, spacebarState, cursorWedgeStart, fired;
var msg = document.getElementById('state-msg');
var KEYCODE_SPACEBAR = 32;
spacebarState = false; // for cursor shadow wedge
stage = new createjs.Stage("canvas");
cont = stage.addChild(new createjs.Container());
cont.x = stage.canvas.width / 2;
cont.y = 250;
cont.rotation -= 90;
var circle = new createjs.Shape();
circle.graphics.beginFill("DeepSkyBlue").drawCircle(0, 0, 150);
circle.x = 0;
circle.y = 0;
cont.addChild(circle);
cont.setChildIndex(circle, 0);
arrow = new createjs.Shape();
arrow.graphics.beginFill("black").drawRect(0, 0, 150, 2);
cont.addChild(arrow);
cursorWedge = new createjs.Shape();
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener("tick", tick);
document.body.addEventListener('keydown', function(e) {
msg.textContent = 'keydown:' + e.keyCode;
keyDown(e);
});
document.body.addEventListener('keyup', function(e) {
msg.textContent = 'keyup:' + e.keyCode;
keyUp(e);
});
function tick() {
arrow.rotation += 1;
if (spacebarState === true) {
cursorWedge.graphics.moveTo(0, 0);
cursorWedge.graphics.arc(0, 0, 150, cursorWedgeStart * Math.PI / 180, arrow.rotation * Math.PI / 180);
}
stage.update();
}
function keyDown(event) {
switch (event.keyCode) {
case KEYCODE_SPACEBAR:
if (!fired) { //avoiding repeated events
fired = true;
cursorWedge.graphics.f(createjs.Graphics.getRGB(0, 0, 0, 0.25));
spacebarState = true;
cursorWedgeStart = arrow.rotation;
cont.addChild(cursorWedge);
cont.setChildIndex(cursorWedge, cont.getNumChildren() - 1);
}
}
}
function keyUp(event) {
switch (event.keyCode) {
case KEYCODE_SPACEBAR:
fired = false;
spacebarState = false;
cursorWedge.graphics.clear();
cont.removeChild(cursorWedge);
}
}<head>
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
</head>
<body>
Keyboard message: <span id="state-msg"></span>
<canvas id="canvas" width="500" height="400"> </canvas>
</body>有没有什么方法可以在长时间按住按键后重新绘制圆弧而不明显减慢速度？
最佳答案
在您的代码中，您将在每个刻度中添加图形。这意味着每个帧都会绘制前一帧的图形以及新帧的图形。这是累加性的，因此到第 100 帧时，您将在每个刻度处绘制 100 个圆弧，等等。
如果您不想创建附加效果，只需在重新绘制图形之前清除图形即可:
cursorWedge.clear()
.graphics.arc(0, 0, 150, cursorWedgeStart * Math.PI / 180, arrow.rotation * Math.PI / 180);
另一种方法是存储 graphics command ，然后只需在勾选上修改即可。当舞台重绘时，它将使用图形更新的值。
// In the init (at the top in your example)
var arcCommand = cursorWedge.graphics.moveTo(0,0)
.graphics.arc(0, 0, 150, Math.PI / 180, 0).command; // returns the last command
// In your tick
arcCommand.endAngle = arrow.rotation * Math.PI / 180;
如果你想要一个附加效果(我不相信你在这种情况下)添加每个刻度的图形仍然非常昂贵。您可以改为缓存形状所在的容器，然后只需在每个刻度中添加新图形命令，并更新缓存。查看Cache Update演示，也可以在 GitHub 中找到。
关于javascript - 重绘EaselJS圆段而不放慢速度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49387412/
26
4
0
是否可以减慢 setAttribute() 的速度？例如，我有以下代码: function hide(i) { var previewDiv = document.getElementById
我有一个动画，我一直试图放慢速度，但到目前为止我一直没有成功，我尝试了持续时间并在最后添加时间，但动画似乎以相同的速度运行。 任何帮助都会很棒。 $("document").ready(functio
我已经将 Redis 与 Laravel 连接起来用于排队电子邮件，一切都很好......但在开发环境中，我使用 mailtrap.io(免费版)。 问题是 mailtrap 每秒只允许接收 2 封电
我正在尝试使用 canvas 制作一些东西，我可以在其中传递一个数字，该数字等于某个度数 0-360，并且一条线将从其当前位置到我设置的度数的任何位置进行动画处理。 现在，我的路线可以达到我想要的任何
我是一名优秀的程序员,十分优秀！