From 2087b70c8824fdeddb225abb0edd33c92fcd9394 Mon Sep 17 00:00:00 2001 From: "Artiom N." Date: Thu, 4 Dec 2025 22:52:14 +0300 Subject: [PATCH] Image drawing support added --- joy.js | 36 +++++++++++++++++++++++------------- joy.min.js | 2 +- 2 files changed, 24 insertions(+), 14 deletions(-) diff --git a/joy.js b/joy.js index 09608c4..90ab32b 100644 --- a/joy.js +++ b/joy.js @@ -76,6 +76,7 @@ var JoyStick = (function(container, parameters, callback) var title = (typeof parameters.title === "undefined" ? "joystick" : parameters.title), width = (typeof parameters.width === "undefined" ? 0 : parameters.width), height = (typeof parameters.height === "undefined" ? 0 : parameters.height), + image = parameters.image, internalFillColor = (typeof parameters.internalFillColor === "undefined" ? "#00AA00" : parameters.internalFillColor), internalLineWidth = (typeof parameters.internalLineWidth === "undefined" ? 2 : parameters.internalLineWidth), internalStrokeColor = (typeof parameters.internalStrokeColor === "undefined" ? "#003300" : parameters.internalStrokeColor), @@ -153,23 +154,32 @@ var JoyStick = (function(container, parameters, callback) */ function drawInternal() { - context.beginPath(); if(movedX canvas.width) { movedX = canvas.width-(maxMoveStick); } if(movedY canvas.height) { movedY = canvas.height-(maxMoveStick); } - context.arc(movedX, movedY, internalRadius, 0, circumference, false); - // create radial gradient - var grd = context.createRadialGradient(centerX, centerY, 5, centerX, centerY, 200); - // Light color - grd.addColorStop(0, internalFillColor); - // Dark color - grd.addColorStop(1, internalStrokeColor); - context.fillStyle = grd; - context.fill(); - context.lineWidth = internalLineWidth; - context.strokeStyle = internalStrokeColor; - context.stroke(); + + if (typeof image === "undefined") + { + context.beginPath(); + context.arc(movedX, movedY, internalRadius, 0, circumference, false); + // create radial gradient + var grd = context.createRadialGradient(centerX, centerY, 5, centerX, centerY, 200); + // Light color + grd.addColorStop(0, internalFillColor); + // Dark color + grd.addColorStop(1, internalStrokeColor); + context.fillStyle = grd; + context.fill(); + context.lineWidth = internalLineWidth; + context.strokeStyle = internalStrokeColor; + context.stroke(); + } + else + { + const image_data = document.getElementById(image); + context.drawImage(image_data, movedX - image_data.naturalWidth / 2, movedY - image_data.naturalHeight / 2, image_data.naturalWidth, image_data.naturalHeight); + } } /** diff --git a/joy.min.js b/joy.min.js index 98c4e7f..c6fcfbf 100644 --- a/joy.min.js +++ b/joy.min.js @@ -44,4 +44,4 @@ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * SOFTWARE. */ -let StickStatus={xPosition:0,yPosition:0,x:0,y:0,cardinalDirection:"C"};var JoyStick=function(t,e,i){var o=void 0===(e=e||{}).title?"joystick":e.title,n=void 0===e.width?0:e.width,a=void 0===e.height?0:e.height,r=void 0===e.internalFillColor?"#00AA00":e.internalFillColor,c=void 0===e.internalLineWidth?2:e.internalLineWidth,s=void 0===e.internalStrokeColor?"#003300":e.internalStrokeColor,d=void 0===e.externalLineWidth?2:e.externalLineWidth,u=void 0===e.externalStrokeColor?"#008000":e.externalStrokeColor,h=void 0===e.autoReturnToCenter||e.autoReturnToCenter;i=i||function(t){};var S=document.getElementById(t);S.style.touchAction="none";var f=document.createElement("canvas");f.id=o,0===n&&(n=S.clientWidth),0===a&&(a=S.clientHeight),f.width=n,f.height=a,S.appendChild(f);var l=f.getContext("2d"),k=0,g=2*Math.PI,x=(f.width-(f.width/2+10))/2,v=x+5,P=x+30,m=f.width/2,C=f.height/2,p=f.width/10,y=-1*p,w=f.height/10,L=-1*w,F=m,E=C;function W(){l.beginPath(),l.arc(m,C,P,0,g,!1),l.lineWidth=d,l.strokeStyle=u,l.stroke()}function T(){l.beginPath(),Ff.width&&(F=f.width-v),Ef.height&&(E=f.height-v),l.arc(F,E,x,0,g,!1);var t=l.createRadialGradient(m,C,5,m,C,200);t.addColorStop(0,r),t.addColorStop(1,s),l.fillStyle=t,l.fill(),l.lineWidth=c,l.strokeStyle=s,l.stroke()}function D(){let t="",e=F-m,i=E-C;return i>=L&&i<=w&&(t="C"),iw&&(t="S"),ep&&("C"===t?t="E":t+="E"),t}"ontouchstart"in document.documentElement?(f.addEventListener("touchstart",function(t){k=1},!1),document.addEventListener("touchmove",function(t){1===k&&t.targetTouches[0].target===f&&(F=t.targetTouches[0].pageX,E=t.targetTouches[0].pageY,"BODY"===f.offsetParent.tagName.toUpperCase()?(F-=f.offsetLeft,E-=f.offsetTop):(F-=f.offsetParent.offsetLeft,E-=f.offsetParent.offsetTop),l.clearRect(0,0,f.width,f.height),W(),T(),StickStatus.xPosition=F,StickStatus.yPosition=E,StickStatus.x=((F-m)/v*100).toFixed(),StickStatus.y=((E-C)/v*100*-1).toFixed(),StickStatus.cardinalDirection=D(),i(StickStatus))},!1),document.addEventListener("touchend",function(t){k=0,h&&(F=m,E=C);l.clearRect(0,0,f.width,f.height),W(),T(),StickStatus.xPosition=F,StickStatus.yPosition=E,StickStatus.x=((F-m)/v*100).toFixed(),StickStatus.y=((E-C)/v*100*-1).toFixed(),StickStatus.cardinalDirection=D(),i(StickStatus)},!1)):(f.addEventListener("mousedown",function(t){k=1},!1),document.addEventListener("mousemove",function(t){1===k&&(F=t.pageX,E=t.pageY,"BODY"===f.offsetParent.tagName.toUpperCase()?(F-=f.offsetLeft,E-=f.offsetTop):(F-=f.offsetParent.offsetLeft,E-=f.offsetParent.offsetTop),l.clearRect(0,0,f.width,f.height),W(),T(),StickStatus.xPosition=F,StickStatus.yPosition=E,StickStatus.x=((F-m)/v*100).toFixed(),StickStatus.y=((E-C)/v*100*-1).toFixed(),StickStatus.cardinalDirection=D(),i(StickStatus))},!1),document.addEventListener("mouseup",function(t){k=0,h&&(F=m,E=C);l.clearRect(0,0,f.width,f.height),W(),T(),StickStatus.xPosition=F,StickStatus.yPosition=E,StickStatus.x=((F-m)/v*100).toFixed(),StickStatus.y=((E-C)/v*100*-1).toFixed(),StickStatus.cardinalDirection=D(),i(StickStatus)},!1)),W(),T(),this.GetWidth=function(){return f.width},this.GetHeight=function(){return f.height},this.GetPosX=function(){return F},this.GetPosY=function(){return E},this.GetX=function(){return((F-m)/v*100).toFixed()},this.GetY=function(){return((E-C)/v*100*-1).toFixed()},this.GetDir=function(){return D()}}; \ No newline at end of file + let StickStatus={xPosition:0,yPosition:0,x:0,y:0,cardinalDirection:"C"};var JoyStick=function(t,e,i){var o=void 0===(e=e||{}).title?"joystick":e.title,n=void 0===e.width?0:e.width,a=void 0===e.height?0:e.height,r=e.image,c=void 0===e.internalFillColor?"#00AA00":e.internalFillColor,d=void 0===e.internalLineWidth?2:e.internalLineWidth,s=void 0===e.internalStrokeColor?"#003300":e.internalStrokeColor,u=void 0===e.externalLineWidth?2:e.externalLineWidth,h=void 0===e.externalStrokeColor?"#008000":e.externalStrokeColor,l=void 0===e.autoReturnToCenter||e.autoReturnToCenter;i=i||function(t){};var S=document.getElementById(t);S.style.touchAction="none";var f=document.createElement("canvas");f.id=o,0===n&&(n=S.clientWidth),0===a&&(a=S.clientHeight),f.width=n,f.height=a,S.appendChild(f);var g=f.getContext("2d"),k=0,v=2*Math.PI,x=(f.width-(f.width/2+10))/2,m=x+5,P=x+30,y=f.width/2,C=f.height/2,p=f.width/10,w=-1*p,L=f.height/10,E=-1*L,F=y,W=C;function T(){g.beginPath(),g.arc(y,C,P,0,v,!1),g.lineWidth=u,g.strokeStyle=h,g.stroke()}function D(){if(Ff.width&&(F=f.width-m),Wf.height&&(W=f.height-m),void 0===r){g.beginPath(),g.arc(F,W,x,0,v,!1);var t=g.createRadialGradient(y,C,5,y,C,200);t.addColorStop(0,c),t.addColorStop(1,s),g.fillStyle=t,g.fill(),g.lineWidth=d,g.strokeStyle=s,g.stroke()}else{const t=document.getElementById(r);g.drawImage(t,F-t.naturalWidth/2,W-t.naturalHeight/2,t.naturalWidth,t.naturalHeight)}}"ontouchstart"in document.documentElement?(f.addEventListener("touchstart",(function(t){k=1,G=t.targetTouches[0].identifier}),!1),document.addEventListener("touchmove",(function(t){1===k&&t.targetTouches[0].target===f&&(F=t.targetTouches[0].pageX,W=t.targetTouches[0].pageY,"BODY"===f.offsetParent.tagName.toUpperCase()?(F-=f.offsetLeft,W-=f.offsetTop):(F-=f.offsetParent.offsetLeft,W-=f.offsetParent.offsetTop),g.clearRect(0,0,f.width,f.height),T(),D(),StickStatus.xPosition=F,StickStatus.yPosition=W,StickStatus.x=((F-y)/m*100).toFixed(),StickStatus.y=((W-C)/m*100*-1).toFixed(),StickStatus.cardinalDirection=R(),i(StickStatus))}),!1),document.addEventListener("touchend",(function(t){if(t.changedTouches[0].identifier!==G)return;k=0,l&&(F=y,W=C);g.clearRect(0,0,f.width,f.height),T(),D(),StickStatus.xPosition=F,StickStatus.yPosition=W,StickStatus.x=((F-y)/m*100).toFixed(),StickStatus.y=((W-C)/m*100*-1).toFixed(),StickStatus.cardinalDirection=R(),i(StickStatus)}),!1)):(f.addEventListener("mousedown",(function(t){k=1}),!1),document.addEventListener("mousemove",(function(t){1===k&&(F=t.pageX,W=t.pageY,"BODY"===f.offsetParent.tagName.toUpperCase()?(F-=f.offsetLeft,W-=f.offsetTop):(F-=f.offsetParent.offsetLeft,W-=f.offsetParent.offsetTop),g.clearRect(0,0,f.width,f.height),T(),D(),StickStatus.xPosition=F,StickStatus.yPosition=W,StickStatus.x=((F-y)/m*100).toFixed(),StickStatus.y=((W-C)/m*100*-1).toFixed(),StickStatus.cardinalDirection=R(),i(StickStatus))}),!1),document.addEventListener("mouseup",(function(t){k=0,l&&(F=y,W=C);g.clearRect(0,0,f.width,f.height),T(),D(),StickStatus.xPosition=F,StickStatus.yPosition=W,StickStatus.x=((F-y)/m*100).toFixed(),StickStatus.y=((W-C)/m*100*-1).toFixed(),StickStatus.cardinalDirection=R(),i(StickStatus)}),!1)),T(),D();let G=null;function R(){let t="",e=F-y,i=W-C;return i>=E&&i<=L&&(t="C"),iL&&(t="S"),ep&&("C"===t?t="E":t+="E"),t}this.GetWidth=function(){return f.width},this.GetHeight=function(){return f.height},this.GetPosX=function(){return F},this.GetPosY=function(){return W},this.GetX=function(){return((F-y)/m*100).toFixed()},this.GetY=function(){return((W-C)/m*100*-1).toFixed()},this.GetDir=function(){return R()}};