javascript - Implementing an eraser with paperjs -


I have checked, similar questions have been asked, but partly answered or not answered .

I need to create an Eraser tool with PaperJS which is capable of erasing existing amounts, without erasing the image.

The image may be located on the first layer, and the second one. View with JSFiddle: which shows two attempts: 

  paperinstol (window); Var canvas = document. GetElementById ("myCanvas"); Paper.setup (canvas); // Yellow background (can also be a background image), which var rect = new rectangle (new point (0, 0), new point (paper.view.size.width, paper.view.size.height) Should not go); Var rectpath = new path Context (rect); RectPath.fillColor = 'yellow'; // Black Line er first = paper.project.activeLayer First attempt to erase; Var seconds = new layer (); = New from point (50, 0); Var to = new point (50, 100); Var path1 = new path Line (from, to); Path1.strokeColor = 'black'; Path1.strokeWidth = 40; = Var from new point (0, 50); Var to = new point (100, 50); Var path2 = new path Line (from, to); Path2.strokeColor = 'green'; // I have also tried other colors, it seems irrelevant path2.strokeWidth = 40; Path2.blendMode = 'Destination-Out'; // So I saw this path - new compound path ({children: [new path cycles ({center: new point (200, 50), radius: 30}), new path cycles ({center: new point (200) , 50), radius: 10})], fill color: 'black', selected: true}); // second attempt // I really want to wipe out a line through several paths, it is not sure how to apply it along this path = new compound path ({children: [new path line ({from: [350, 0], [400, 50], strokewidth: [350, 100], stroke width: 30, stroke color: 'green' // seems irrelevant)), new path. 30, stroke color: 'white' // it seems irrelevant}), stroke color: 'black', selected: true, strokeweight: 20}); Paper.view.draw ();  
  & lt; Script src = "http://tmantechblog.com/testpaperjs/js/libs/paper.js"></script> & Lt; Canvas ID = "Mikevas" Height = '500' width = '500' & gt; It does not support the HTML5 canvas & lt; / Canvas & gt;

  • The first attempt tries to use blendMode = 'destination-out', but instead of a transparent path Leaves a white mark
  • The second implementation tries to duplicate the pathfinder path available there, but where the path crosses, a hole is produced. Apart from this, I am unsure of how it can be used in many ways to implement an Eraser.

Any advice will be given about how to proceed. Otherwise I have to shut down my entire project to do basic HTML 5 canvas or FabricJs, or something like that.


Comments

Post a Comment

Popular posts from this blog

python - Overriding the save method in Django ModelForm -

I'm having trouble overriding a ModelForm save method. I get this error I'm: Exception type: TypeErier Exception Value: Save () found an unexpected keyword argument 'committed' My intentions include a form 3 fields Submit several values ​​for, then create an object for each combination of those areas, and to save each object file models.py class collarsult type (models.Model): id = model. AutoField (db_column = 'icontact_result_code_type_id', primary_key = true) callResult = models.ForeignKey ( 'CallResult', db_column = 'icontact_result_code_id') campaign = models.ForeignKey ( 'campaign', db_column = 'icampaign_id') CALLTYPE = models.ForeignKey ( 'CALLTYPE', db_column = 'icall_type_id') agent = models.BooleanField (db_column = 'bagent', default = true) teamLeader = models.BooleanField (db_column = 'bTeamLeader', default = true) active = models.BooleanField (db_column = Django.form...
Read more

html - CSS autoheight, but fit content to height of div -

I have a div in which there are three children- div in the left and middle div: float: left while true: float: true because it is my layout Actually will spoil, I've used ClearFix Hack: .cf {zoom: 1; }. Cf: First,. Cf: {content: ""; Display: Table; }. Cf: After {clear: both; } It still works, but I want to be the right div an indicator. So it should fill 100% of the parent unit of height. How can I complete this? PS is the full code: & Lt; / Div & gt; & Lt; Div class = "mobile_content" & gt; & Lt; H5 & gt; {{Data.titel}} & lt; / H5> & Lt; Table & gt; & Lt; TR & gt; & Lt; Th & gt; Komponist: & lt; / Th & gt; & Lt; TD & gt; {{Data.komponist}} & lt; / TD & gt; & Lt; / TR & gt; & Lt; TR & gt; & Lt; Th & gt; Instrument: & lt; / Th & gt; & Lt; TD & gt; {{Data.instrumente}} & lt; / TD & gt; & Lt; / TR & gt;...
Read more

qt - How to prevent QAudioInput from automatically boosting the master volume to 100%? -

I have been trying to use Qt5 multimedia to record audio with QAudioInput, however, when I see If QAudioInput is started, it increases the master volume of my sound device to 100%. How can I prevent QAudioInput from changing the master volume? My current development platform is Linux with PalsAdio (with flat audio disabled). How can I use QAudioInput : QAudioDeviceInfo device_info = QAudioDeviceInfo :: defaultInputDevice (); QAudio format format; Format.setSampleRate (44100); Format.setChannelCount (1); Format.setSampleSize (16); Format.setCodec ("Audio / PCM"); Format.setSampleType (QAudioFormat :: SignedInt); Format.setByteOrder (QAudioFormat :: LittleEndian); Std :: cout & lt; & Lt; Device_info.deviceName (). ToUtf8 (). ConstData () & lt; & Lt; Std :: endl; QAudioInput * default_device = new QAudioInput (device_info, format); QIODevice * default_io_device = default_device-> Start (); a QAudioInput.setVolume () method is not you I ...
Read more