将Canvas像素映射到css top属性提供的像素 [英] Mapping Canvas pixels to pixel provided by css top attribute
问题描述
好的，我整个上午一直在尝试这个但是没有用。
我有一个滑块元素，其滑动区域的高度约为420px。我有一个高度为400px的画布元素宽度为215像素，如下所示：
Ok i have been trying this all morning but to no avail.
I am having a slider element whose slide area is about 420px in height.I am having a canvas element whose height is 400px and width is 215 px as below:
<div class="maincontent"><!--maincontent-->
<div class="table"><!--table-->
<div class=""></div><!--gr1highlight-->
<div id="distanceSliderContainer">
<div id="distanceSliderHolderArea">
<div id="distanceSliderDrag">
<div id="sliderBar" class="distanceSlider-bar"> </div>
<div id="slidertext" class="distanceSlider-text">24</div>
</div>
</div>
</div>
<canvas id="myCanvas" class="canvas-bg"></canvas><!--canvas-bg-->
<div id="amplitudeSliderContainer">
<div id="amplitudeSliderHolderArea">
<div id="amplitudeSliderDrag">
<div id="amplitudeSliderbar" class="amplitudeSlider-bar"> </div>
<div id="amplitudeSlidertext" class="amplitudeSlider-text">24</div>
</div>
</div>
</div>
</div><!--table-->
</div><!--maincontent-->
现在我要做的是将画布'的一个像素映射到css属性顶部返回的像素，所以当滑块滑动时，我可以动态地从独立点到点画一条线，直到现在我能够获得线但是它落后于滑块。所以我的问题是如何将画布的一个像素映射到滑块'的顶部属性返回的一个像素，以便与滑块一致地绘制线，下面是我绘制线的代码：
Now what i want to do is map canvas''s one pixel to pixel returned by css attribute top,so that i can dynamically draw a line from a standalone point to the point as the slider slides,till now i am able to get the line but its lagging behind the slider. So my question is how can i map the one pixel of canvas to one pixel returned by slider''s top attribute so that the line is drawn consistently with the slider,below is my code for drawing line:
var globalObject;
function CanvasLinePainter(){
globalObject=this;
this.y=136
this.rotate=0.03;
this.previousOffsetTop=356;
this.canvas = document.getElementById('myCanvas');
this.context = this.canvas.getContext('2d');
this.context.beginPath();
this.context.moveTo(75,136);
this.context.lineTo(220,136) ;
this.context.lineWidth = 1.5;
this.offsetPixelCount=0;
this.tempFifteen=0;
// set line color
this.context.strokeStyle = '#00FF00';
this.context.stroke();
$("#clickMe").on("click",this.getCordinates);
}
CanvasLinePainter.prototype.drawLineForDistance=function(offsetTop){
this.context.beginPath();
if(offsetTop){
if(offsetTop<this.previousOffsetTop){
this.offsetPixelCount++;
console.log("current offsetTop:"+offsetTop);
console.log("previous offsetTop:"+this.previousOffsetTop);
this.previousOffsetTop=offsetTop;
console.log("new previous offsetTop"+this.previousOffsetTop);
if(this.offsetPixelCount==3){
this.offsetPixelCount=0;
if(offsetTop){
this.context.canvas.width =globalObject.context.canvas.width;
this.context.rotate(0.03);
this.context.moveTo(75,this.y--)//(85,135);
console.log("new this.y--->"+this.y);
this.context.lineTo(220,136)//(220,125) ;
}
}
}
}
this.context.lineWidth = 1.5;
// set line color
globalObject.context.strokeStyle = '#00FF00';
globalObject.context.stroke();
}
来自我的计算我能够得到，如果滑块向上移动三个像素我必须将y坐标递减单个像素，以便线向上移动，但问题是如果我快速移动滑块线条滞后。当我的滑块移动时，上面的线条图代码被调用。
P.S.我使用了draggable作为我的滑块而不是jquery ui'的滑块元素
From my calculation i am able to get that if slider moves three pixels up i have to decrement the y co-ordinate by single pixel so the line shifts up,but the problem is that if i move the slider fast the line lags behind. The above line drawing code gets called when my slider moves.
P.S. i have used draggable as my slider and not jquery ui''s slider element
推荐答案
（ < span class =code-string>＃clickMe）。on（ click， this .getCordinates）;
}
CanvasLinePainter.prototype.drawLineForDistance = function （offsetTop）{
this .context.beginPath（）;
if （offsetTop）{
if （offsetTop< this .previousOffsetTop）{
this .offsetPixelCount ++;
console .log（ current offsetTop： +的offsetTop）;
console .log（ previous offsetTop： + this.previousOffsetTop）;
this .previousOffsetTop = offsetTop;
console .log（ new previous offsetTop + this.previousOffsetTop）;
if （ this .offsetPixelCount == 3 ）{
此 .offsetPixelCount = 0 ;
if （offsetTop）{
this .context.canvas.width = globalObject .context.canvas.width;
此 .context.rotate（ 0 。 03 ）;
此 .context.moveTo（ 75 ，这 .y - ） // （85,135）;
console .log（ new this.y- - >中 + this.y）;
此 .context.lineTo（ 220 ， 136 ） // （220,125）;
}
}
}
}
此。 context.lineWidth = 1 。 5 ;
// 设置线条颜色
globalObject.context.strokeStyle = ' ＃00FF00';
globalObject.context.stroke（）;
}
("#clickMe").on("click",this.getCordinates); } CanvasLinePainter.prototype.drawLineForDistance=function(offsetTop){ this.context.beginPath(); if(offsetTop){ if(offsetTop<this.previousOffsetTop){ this.offsetPixelCount++; console.log("current offsetTop:"+offsetTop); console.log("previous offsetTop:"+this.previousOffsetTop); this.previousOffsetTop=offsetTop; console.log("new previous offsetTop"+this.previousOffsetTop); if(this.offsetPixelCount==3){ this.offsetPixelCount=0; if(offsetTop){ this.context.canvas.width =globalObject.context.canvas.width; this.context.rotate(0.03); this.context.moveTo(75,this.y--)//(85,135); console.log("new this.y--->"+this.y); this.context.lineTo(220,136)//(220,125) ; } } } } this.context.lineWidth = 1.5; // set line color globalObject.context.strokeStyle = '#00FF00'; globalObject.context.stroke(); }
来自我的计算我能够得到，如果滑块向上移动三个像素我必须将y坐标递减单个像素，以便线向上移动，但问题是如果我快速移动滑块线条滞后。当我的滑块移动时，上面的线条图代码被调用。
P.S.我使用draggable作为我的滑块而不是jquery ui'的滑块元素
From my calculation i am able to get that if slider moves three pixels up i have to decrement the y co-ordinate by single pixel so the line shifts up,but the problem is that if i move the slider fast the line lags behind. The above line drawing code gets called when my slider moves.
P.S. i have used draggable as my slider and not jquery ui''s slider element
这篇关于将Canvas像素映射到css top属性提供的像素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
