javascript - How do I implement multi-touch interaction with paper.js? -

-

तो paper.js एक शानदार पुस्तकालय है। मैं वर्तमान में एक मल्टी टच वाइटबोर्ड / ड्राइंग वेबएप बनाने के लिए इसका उपयोग करने का प्रयास कर रहा हूं जो कि अंततः एक सर्वर पर सहयोगी होगा।

मैं पेपर के साथ मल्टी-टच को कैसे लागू करूं?

मेरा रोडब्लॉक झूठ है मैं प्रत्येक स्पर्श के लिए कई रास्ते बनाने के लिए paper.js को अनुमति देने का एक रास्ता खोजने में असमर्थ हूं।

अब तक मैंने Google के माध्यम से बहुत कुछ शोध किया है, हालांकि मेरा शोध दोषपूर्ण हो सकता है, मेरे पास है पेपर.जेएस के साथ ब्राउज़र टचवेवेंट्स का उपयोग करने का प्रयास किया, और मैंने प्रत्येक ईवेंट को अलग करने के लिए एक नया कैनवास बनाकर उन्हें संभालने का प्रयास किया है।

अगर यहां कोई भी है जो सफलतापूर्वक paper.js , या इस ऐप के लिए पेपर की तुलना में बेहतर सिफारिश है, मुझे सुनने में खुशी होगी।

मैंने यह किया है जो कागज के साथ हथौड़ा। जेएस लाइब्रेरी का उपयोग कर रहा है।

मैं प्रत्येक संभावित उंगलियों के लिए एक रास्ता बना देता हूं। जब टच ईवेंट उठाया जाता है, तो मैं सभी छूओं की गणना करता हूं और प्रत्येक पथ के लिए अंक जोड़ता हूं। हालांकि मैं जावास्क्रिप्ट के साथ पेपरज एस का उपयोग करता हूं और पेपर्सस्क्रिप्ट के टैग में नहीं हूं, इसके अलावा मैं अपने ब्राउज़र में परीक्षण के लिए हैमर। जेएस के टच-इम्यूलेटर का उपयोग करता हूं।

मैं आपको हम्मरजेएस के साथ एक उदाहरण दे सकता हूं:

यहां देखें

javascript फ़ाइलें आयात करें 

  & lt; script src = "js / libs / jquery / jquery.js" & gt; & lt; / लिपि & gt; & Lt; script src = "js / libs / hammer.js / touch-emulator.js" & gt; & lt; / स्क्रिप्ट & gt; & LT; स्क्रिप्ट & gt; TouchEmulator (); & Lt; / स्क्रिप्ट & gt; & Lt; script src = "js / libs / hammer.js / hammer.js" & gt; & lt; / स्क्रिप्ट & gt; & Lt; script src = "js / libs / hammer.js / jquery.hammer.js" & gt; & lt; / स्क्रिप्ट & gt; & Lt; script src = "js / libs / paper / paper-full.js" & gt; & lt; / स्क्रिप्ट & gt;

टच-इम्यूलेटर मल्टीटाच का अनुकरण है जब आप Shift दबाते हैं, तो यह दो उंगली के स्पर्श का अनुकरण करता है इस एमुलेटर को हैमर.जेएस द्वारा प्रदान किया गया है ( महत्वपूर्ण : आयात के बाद आपको TouchEmulator () फ़ंक्शन निष्पादित करना होगा।)

कैनवास 

  & lt; कैनवास आईडी = "MyCanvas" width = "1500" height = "1500" शैली = "पृष्ठभूमि रंग: # 000;" & gt;

पेपरजेएस स्थापना 

  var कैनवास; Var mypaths = []; // पेपरजेएस स्थापना पेपर .स्टॉल (विंडो); Window.onload = function () {// सेटअप PaperJS कैनवास = document.getElementById ('myCanvas'); paper.setup (this.canvas); // पथों की सरणी को परिभाषित करें (मैं 12 चुनता हूं क्योंकि मेरी मल्टीटाच तालिका अधिकतम 12 स्पर्श को स्वीकार करती है) (var i = 0; i & lt; 12; i ++) {myPath = new paper.Path (); MyPath.strokeColor = '# 00ff00'; MyPath.strokeWidth = 2; myPaths.push (myPath); }}; Var myCanvas = document.getElementById ('myCanvas');

जब आप इसे पेपरस्क्रिप्ट के टैग के बाहर का उपयोग करते हैं तो पेपरजेएस की स्थापना आवश्यक होती है यहां मैं अपने मार्गों को इनिशियलाइज़ करता हूं।

एमुलेटर की घटनाओं को सुनें 

  // एकीकरण के लिए multitouch घटना document.body.addEventListener ('touchstart', टच स्टार्ट, झूठी); Document.body.addEventListener ('टचमोव', टचमोव, झूठी); Document.body.addEventListener ('touchend', स्पर्श करें, गलत);  
  प्रत्येक उंगलियों के स्पर्श के लिए प्रत्येक पथ को ट्रेस करें   
  var स्पर्श = गलत; फ़ंक्शन टचस्टार्ट () {स्पर्श = सच; } फ़ंक्शन स्पर्शएन्ड () {स्पर्श = गलत; // सभी पाथों को समाप्त करें myPaths = []; (Var i = 0; i & lt; 12; i ++) के लिए {myPath = new paper.Path (); MyPath.strokeColor = '# 00ff00'; MyPath.strokeWidth = 2; myPaths.push (myPath); }} Function touchmove (ev) {यदि (! स्पर्श) रिटर्न; // प्रत्येक स्पर्श के लिए पथ को आकर्षित करें (var i = 0; i & lt; ev.changedTouches.length; i ++) {var x1, y1; X1 = ev.changedTouches [i] .pageX; Y1 = ev.changedTouches [i] .pageY; Mypaths [i] .add (नया बिंदु (x1, y1)); paper.view.draw (); } Console.log (ev); }  
 
 अंत में, प्रत्येक स्पर्श के अनुरूप प्रत्येक पथ के अंक जोड़ते हैं। 
 
  चेतावनी: ऊपर देखें, यह उदाहरण स्पर्श-एमुलेटर का उपयोग करें टच-इम्यूलेटर का इवेंट ऑब्जेक्ट "ईव", हैमर। जेएस की इवेंट ऑब्जेक्ट से थोड़ा अलग है।  
 
 Hammer.js के लिए, ऐसा कुछ है: 
 
  $ ('# myCanvas')। हथौड़ा ()। ("खींचें", फ़ंक्शन (ev) {for (var i = 0; i & lt; ev.gesture.touches.length; i ++) {var x1, Y1; x1 = ev.gesture.touches [i] .pageX; y1 = ev.gesture.touches [i] .pageY; मायपाथ [i] .add (नया बिंदु (x1, y1)); paper.view.draw ( );}});  
 
 मैं सही अंग्रेजी लिखने के लिए अपनी पूरी कोशिश कर रहा हूं, मुझे आशा है कि यह समझ में आता है।

Comments

Post a Comment

Popular posts from this blog

apache - 504 Gateway Time-out The server didn't respond in time. How to fix it? -

-
Using a form submission on an embedded iframe , the customer downloads a compressed log file Requested. The request was sent to the server, which is the compressed log files, perform some database operations and returns a compressed file. After just 2 minutes, 504 gateway time-out server did not respond timely message on browser net panel How to fix this error? The log files were taking a long time to compress, and timeout was set to 2min The error was fixed by extending the file file: # # timeout: The number of seconds before getting the time out. # # # Timeout 120 timeout 600
Read more

c# - .net WebSocket: CloseOutputAsync vs CloseAsync -

-
We have a working ASP.NET Web API REST service, which is one of the methods of our controller, HTTPTTEX. .) Socket handler code looks something like this ... Public async task socket handler (AspNetWebSocketContext context) {_webSocket = context.WebSocket; ... while (! Cts.IsCancellationRequested) {WebSocketReceiveResult Results = _webSocket.ReceiveAsync (Input Segment, cts.Token) .Result; WebSocketsStateCollusocketState = _webSocket.State; If (result.MessageType == WebSocketMessageType.Close || currentSocketState == WebSocketState.CloseReceived) {// What should I use. CloseAysnc () or. CloseOutputAsync ()? _webSocket.CloseOutputAsync (WebSocketCloseStatus.NormalClosure, "Client Requested", cts.Token). Wait (); } If (currentSocketState == WebSocketState.Open) {...}}} .What is the difference between .CooseAsync () and CloseOutputAysnc ()? I tried both of them and they both seemed to work fine but some difference should be the same they both describe very similar to...
Read more

c++ - How to properly scale qgroupbox title with stylesheet for high resolution display? -

-
I am trying to apply a stylesheet for QGroupBox (QT4.8), which works on the normal screen ( 96 dpi) high resolution screen (Yoga 2 Pro, 3200x1800, 275 dpi, windows 8.1). The following style looks good on the 275 dpi screen, but the top margins on a regular 96 dpi screen are far too big. QGroupBox {border: 1px solid red; Range radius: 7px; Margin-top: 12x; } QGroupBox :: Title {subcontrol-origin: margin; Subcontrol-position: left above; Padding-left: 10px; Padding-right: 10px; } Changing the top-margin has an effect, but I did not get a proper setting which works on both screens. If I shorten the value, the content of the group box overlaps with the title on 275 dpi screen. I was also playing with units "East", "PX", "MX", "PT". Reading the document I would have guessed, "2 X" was the correct solution, which should be scaled with different screen resolutions. Without the stylesheet, the groupbox works well on both screens. ...
Read more